Web tip :: a word on web fonts

I love web fonts, they have revolutionised what web designers can do with typography in designs. Cufón, Typekit and sIFR have all made our task a little easier and our designs a lot more interesting.

Then there’s Google Webfonts who, at last count, have 436 fonts available for use. They’re easy to implement and your only difficult task is to pick one, or two, or three, or… well maybe you should stop there.

Out doing some competitive analysis browsing today I saw so many sites that have poorly implemented Google Web Fonts.  Shockingly most of these sites are by people who call themselves web designers. So today I want to show you how to avoid their mistake.

By way of example I chose two fonts from Google; Nixie One and Josefin Sans. When browsing fonts on Google Web Fonts you’ll notice under the sample text and next to the font name it will tell you how many styles there are of that font and this is important. Let me start with my 3 Nixie One sentences below… take some time to study them…

1. This is my gorgeous Nixie One sentence at Normal weight.
2. This is my Nixie One sentence at Bold weight.
3. This is my Nixie One sentence at Bolder weight.

Now Nixie One has one style or weight, which is 400 or normal in font speak. So when I use the font as it was intended, in number 1, it looks crisp and clean and dare I say gorgeous. The problem comes when I start adding a weight to the font by making it bold and bolder in my CSS. Can you see it’s slightly blurry or just looks a little strange?

So what’s the fix? I’m glad you asked.

Now let’s ponder my second font, Josefin Sans. This font has 10 styles which translate to varying weights of the font from ultra-light (100) to bold (700) and even accounts for italics. The advantage of using a font like this is I can make use of the varying weights (by their numbers) without the loss of quality. Can you see the difference?

1. This is my Josefin Sans at 400 so that is normal weight.
2. This is my Josefin Sans at 600 so that is semi bold weight.
3. This is my Josefin Sans at 700 so that is bold weight.

The only catch is when using a Google Web Font is make sure you’re telling your stylesheet that you want to use all 10 (or 3 in my example) styles. So you would be linking to it by either
< href=’http://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600′ rel=’stylesheet’ type=’text/css’> in the HEAD of your document or @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600); in your stylesheet.

Hope this helps and feel free to leave a comment if you have any questions.