Typography for web designers has not really been a hot topic simply because for the longest time we have been limited to a very basic subset of fonts. A bunch of alternative ‘hacks’ came about like text replacement, IFR which eventually became sIFR and more. These solutions for relied on some CSS trickery, dynamic generation via a back-end language such as PHP or Python or using Flash. While it gave designers more freedom it just never felt right.
Thanks to CSS3 Fonts Module and the quick adoption and implementation of the specifications by browser vendors, typography on the web is becoming real. We now have the ability to embed fonts using the CSS @font-face rule and with resources such as Typekit and Google’s own Font Directory we are truly spoiled for choice. With the Google Web Font Directory you can truly embrace the openness of the web as all the fonts in the directory are released under an open source license and, to use one of these fonts cannot be simpler.
Simply browser the directory, when you found a font you like, click on the ‘get the code’ link, select all of the variants you want to have access to and paste the one line of code into the head of your document, for example:
<head>
<meta charset="utf-8" />
<title>Web Fonts</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif&subset=latin' rel='stylesheet' type='text/css'>
</head>
Now, when you want to use this font on your page, it as simple as including the font in your font family style rule:
h1 {
font-family: 'Droid Serif', arial, serif;
}
Hosting the Font Locally
If for some reason however, you cannot make use of a service such as Google or Typekit and need to host the font on your local machine or your own CDN, the code to embed a font and make it available for use on your site is pretty straight forward. If you grab the URL from the Google Font Directory above and paste it into a browser, you will see the following:
@media screen {
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: normal;
src: local('Droid Serif'), local('DroidSerif'), url('http://themes.googleusercontent.com/font?kit=DgAtPy6rIVa2Zx3Xh9KaNaCWcynf_cDxXwCLxiixG1c') format('truetype');
}
}
There is no additional magic here from Google and they are just using standard CSS3 @font-face syntax to load, embed the font and make it available as ‘Droid Serif’ to the rest of your web site. From the above you can then see that the bit you would change to host the font locally or on you own CDN will be the URL. You also do not need to wrap the @font-face rule with the @media screen rule and the following will work just fine:
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: normal;
src: local('Droid Serif'), local('DroidSerif'), url('http://themes.googleusercontent.com/font?kit=DgAtPy6rIVa2Zx3Xh9KaNaCWcynf_cDxXwCLxiixG1c') format('truetype');
}
You also do not need to have this code in a separate style sheet and can have it at the first rule in your main style sheet file.
With this freedom and the new creative avenues it opens, how do you go about choosing the right font for the right project. Well, about a week ago I stumbled upon an post on Jeffrey Zeldman’s blog where he introduces the ‘So you need a typeface’ infographic designed by Julian Hansen, a graphic designer from Copenhagen (@Julianhansen). The design is absolutely awesome and easily guides you along the path to find the right font for the job at hand and at the same time, serves as a great form of inspiration.
I grabbed the image that was available at that time and immediately converted it into a desktop wallpaper. With this, I thought, seeing that web designers, especially those that do not hail from a print industry background, will now have to learn more about the art of typography, more people might want a wallpaper version of the design as well. I duly went ahead and created wallpaper versions of the infographic for six different screen resolution and with the blessing of Julian, I am making them available to anyone and everyone that agrees that this is a beautiful piece of work.
Downloads
If you would like a more tangible version of this you can also purchase a copy of the poster. I hope you all enjoy this and I look forward to your comments.
