Pages

Web tip :: a word on web fonts

computer with post it note over the screen

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.

Tweet about this on TwitterShare on FacebookPin on PinterestShare on Google+

, ,

3 Responses to Web tip :: a word on web fonts

  1. Brandi January 31, 2012 at 10:30 am #

    I can’t see a difference. :/ Do I need to have something in my browser enabled?
    Brandi recently posted..The color of authenticity

    • Libby January 31, 2012 at 2:01 pm #

      Wait – does that mean the text looks all the same to you or you can’t see a difference between bold and bolder? If it’s the former, then hmmm not sure what’s up with that, may require a hard refresh in your browser. If it’s the latter – you’re right the bold and bolder will appear quite similar in this example but still look weird. If you want I can send you the link to the one site that sent me over the edge yesterday and then you’ll know what I’m saying.

      • Brandi January 31, 2012 at 3:17 pm #

        The text looks all the same to me. I can’t tell that it’s bold, neither here on your site or in my reader. That’s not supposed to be like that, right? I’m on Chrome, if that makes a difference.
        Brandi recently posted..The color of authenticity

Leave a Reply


8 − four =

CommentLuv badge

Powered by WordPress. Designed by Woo Themes

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11556761-4', 'auto'); ga('send', 'pageview');