Typography on the Web: Fonts and How to Use Them
How much do you notice the fonts and typography used throughout the websites you visit and interact with on a daily basis? Facebook uses Helvetica, Instagram uses Proxima Nova and the New York Times predominantly uses Georgia. These fonts are applied through a line of code in the CSS of each site, that sets the “font-family: Helvetica, Arial, sans-serif;” for example.
These popular websites are all using what is called a “web safe” font. Web safe fonts are font faces that are pre-installed by most operating systems, and therefore will show up correctly in a user’s web browser despite being on a Mac, Windows PC, or even any type of cell phone.
But what about all of the other amazing fonts out there that many non-designers may not have installed on their computers? Even 5 years ago, it was widely accepted that you should use only web safe fonts for the most of the copy. If you had a custom typeface you wanted to use in a header for example, you would have to save it as an image and then upload that in its place. This made it extremely difficult to update copy, was terrible for SEO and screen readers, and could affect page-loading time.
It wasn’t until 2010, when all in-use web browsers finally began to support the CSS2 @font-face, that we have seen a true revolution of custom web typography and opened up the usage of web fonts on all sites, screens, and devices. @font-face allows the developer to set up the website to download a particular font from a server, and display that font on a webpage if the user does not have that font installed. You would need to have the OTH/TTF, WOFF, EOT, or other font file types on your own server in order to use @font-face.
These new advancements have also stirred the creation of new web font services such as Adobe’s Typekit and Google Fonts API. Both of these services host a large collection of fonts on their own servers, which you can then <link> to in your websites code and use throughout your site. They make it quicker and easier to load and implement a variety of beautiful typefaces on the web.
You can add a custom web font to your site with just a few lines of HTML or CSS code in the following ways:
<link> (HTML - using a service)
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type=“text/css”> @import (CSS - using a service)
<style="text/css">
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
</style> @font-face (CSS - self hosting the font)
<style="text/css">
@font-face{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(‘http://yourwebsite.com/fonts/OpenSans.woff’) format('woff');
}
</style>
Once you have the web font files downloaded into your site, you can then apply the font as you would in normal CSS.
<style="text/css">
.myCustomWebFont{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
}
</style> The web is a constantly changing, living and breathing place. It is up to developers and designers to push for websites to include things like a new CSS3 animation, jQuery functionality, or bold, impactful typography using a new web font. The web only moves forward when the new becomes the new standard.
