Feature
Post

Category
Design


Better Font Families in CSS

font-family is one of the most widely used CSS properties, and with good reason: sometimes you can change the entire feel of a design with this one property. But selecting fonts for your stack also greatly influences your design’s readability and accessibility- which, ultimately, is what’s most important in any web design. That is, if you want your visitors to actually read your content.

The font stack I use most commonly is:

font-family: Arial, Helvetica, Tahoma, sans-serif;

Use this, and you can’t go wrong- because nearly everyone has Arial, Helvetica or Tahoma installed on their computer. And in the off chance that they don’t, the “sans-serif” in there will use a similar font that they do have installed.

Sometimes, though, if I’m feeling a little saucy- or have fallen in love with a particular font- I’ll do something like this:

font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;

By sneaking in a “Myriad Pro” at the beginning of my font stack, I’m making sure anyone who has the font installed will see it when viewing my page. (This is just an example, by the way- I’ve long gotten over my love-affair with Mr. Myriad). The point is that you can do this with any font of your choice- just as long as you keep the rest of the “safe” fonts in the stack.

Now, Myriad Pro is a fairly common font. It was Apple’s official corporate font, used in Wells Fargo’s identity, and comes packaged with Adobe Reader. So it’s safe to say that a lot of users will have it installed. But what if the font you want to use is a little more obscure? You can do the same, tacking it onto the front of your font stack- or you can take control and use sIFR or FLIR, two methods that are easy to use- although a little more involved. Still, I recommend that you use these methods only for headers or titles.

When deciding what fonts to use in your stacks, I recommend taking a look at Code Style’s Most Common Fonts List, which is updated regularly, and is totally fascinating for geeks like me.

What fonts do you use in your stacks? Do you use sIFR or FLIR?

*Update: Also check out Cufon, another alternative to font embedding. Cameron Moll discussed it here, with some lovely test pages. Thanks to Wes Baker for his comment!


  1. By Jon Eland posted on May 5, 2009 at 11:25 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Interesting point – and one many ignore; but it is worth considering the repurcussions when designing.

    For instance I recently release a site built using font-family: helvetica, arial, sans-serif – and never saw the site in Arial. When I went into testing panic ensued – as those who didn’t have Helvetica saw the content 20% bigger – due to weird metric variances between Arial and Helvetica.

    Throwing in other fonts can only compound this and add to testing.

  2. By Simon Pascal Klein posted on May 5, 2009 at 11:53 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I would argue that placing poor font in front of its (albeit even if less common) similar and better counterpart is a complete waste of listing the better of the two if the former is widespread on systems that include the better. In other words, listing Arial before Helvetica or Helvetica Neue in any font stack will result in Helvetica never seeing the light of day on the web page the font stack was applied to. Why? Because Helvetica ships currently only with Mac OS X, but also with the Microsoft Web Core Fonts which include Arial. For users who purchase Helvetica the probability that they also do not already have Arial on their system is so infinitesimally small such that thus listing Arial before Helvetica makes Helvetica in the stack essentially redundant.

    Instead I would list Helvetica first followed by other realist sans-serifs, like Arial. :)

    —Pascal

  3. By simselmann posted on May 5, 2009 at 12:04 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    What about cufon?
    Didnt use any of these 3 but cufon seems very interesting!

  4. By jignesh posted on May 5, 2009 at 12:43 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I used to put verdana font in my blog and i love it, i have never tried sIFR or FLIR before. I will take a change once i get some time for experiment. thanks for sharing this article.

  5. By simselmann posted on May 5, 2009 at 1:25 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    sry, forgot the link:
    http://wiki.github.com/sorccu/cufon/about

  6. By Emily chen posted on May 5, 2009 at 2:15 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice ~
    This article has given me a great help!
    Thank you~

  7. By J. Albert Bowden II posted on May 5, 2009 at 4:08 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    you should check out cufon, its the new sifr.
    always encouraging new typography on the web!

  8. By Greg posted on May 5, 2009 at 5:08 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    “Comic Sans”, Papyrus, Arial, Webdings, san-serif

  9. By Wes posted on May 5, 2009 at 5:47 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    On a recent project we used Myriad Pro, but only because we liked it just a bit better, it wasn’t part of the client’s branding. I’ve used Gill Sans pretty extensively on other sites, because the majority of Mac users are going to have it. And for your serifed typefaces, I’ve used Garamond, the only problem with Garamond is how many versions exist out there, so you have to include each of them in your stack.

    I tried sIFR and FLIR in the past, but I was never satisfied with their ease of use or their speed—you always get that blink on load where you see the original typeface and then you see the replaced Flash typeface. Recently I tried Cufon and had a lot of success with that. It’s easy to use, simple to configure and the replaced text is there on page load, even with IE.

  10. By Trond posted on May 5, 2009 at 9:11 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I see that more and more websites now are using Helvetica Neue. I am – like you – using the standard ones as those are the ones most people have installed.

  11. By Lorraine Nepomuceno posted on May 6, 2009 at 9:03 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks, Wes- I haven’t tried Cufon yet, but I will now! I’ll update the post with a link to Cufon as well.

  12. By Harry Roberts posted on May 6, 2009 at 11:05 am
    Want an avatar? Get a gravatar! • You can link to this comment

    The ‘Helvetica’ in your font stack is redundant, I could explain but Jen Meiert does a much better job: http://meiert.com/en/blog/20090212/arial-helvetica/ :)

  13. By Lorraine Nepomuceno posted on May 6, 2009 at 11:50 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Ok, that’s weird- the first 8 comments didn’t show up for me until now :)

    Jon and Simon, good points.

    Thanks, simselmann and J. Albert, for pointing out Cufon as well.

    Greg, LOL

  14. By Dave McFarland posted on May 7, 2009 at 5:34 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m not so sure that Myriad Pro comes with Adobe Reader. I just installed Adobe Reader 9 on a Windows Vista machine and there’s no Myriad Pro in my system.

  15. By Martin posted on May 8, 2009 at 8:52 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I also suggest trying out Calibri, apparently it’s a new(ish) Microsoft font? Looked OK when I used it…
    If you have had success with making the ‘normal’ Arial font look ‘better’ can you please explain how here… Thanks!

    Martin

  16. By telga posted on May 9, 2009 at 12:14 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I wouldn’t mix, as you have in your example, humanist and neo-grotesque fonts in the same font-stack: instead of Arial and Tahoma rather a sans-serif stack with better consistency of shapes would be all humanist such as Johnston Sans, Verdana, Tahoma, and so on or all neo-grotesque such as Gill Sans, Helvetica, Arial and so. The same applies of course to the serifs; you wouldn’t mix in the same font-stack transitional serifs like Georgia with Old Style ones like Garamond. The trick of course, unless relying on replacements, is still specifying a font-stack that will include fonts, from most desirable to reliable default, that are on most operating systems (Linux, Mac, and Windows).

  17. By telga posted on May 9, 2009 at 2:34 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    My apologies: Gill Sans is a humanist font.

  18. By Chris posted on June 1, 2009 at 10:29 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Myriad Pro comes with Adobe Reader? Are you sure? I’m pretty sure that it doesn’t.

    I myself also love Myriad Pro, it is my favourite in fact. But it does pose a couple of problems. Contrary to your statement above, the last time I looked it was listed as being installed on less than 4% of web users machines. Secondly, Myriad Pro is notably smaller than most other web safe fonts, so you have to use it at a size above for body copy, or more for headers. If the end user doesn’t have the font, the font it reverts to will look too big.

    Other than that, your post is right on the nail. Front end developers need to try and stick in at least one ‘special’ font at the front of the stack.

  19. By Victoria Blount posted on June 26, 2009 at 8:36 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Very interesting article, especially about “font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;” i will use this as a future reference as sometimes i feel the lack of web safe fonts can let down the design of my work.

  20. By adi posted on December 20, 2009 at 5:06 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    hi lorraine,

    Do u think that “Myriad Pro” comes with the pack {windows xp} when a user installed O.S on his machine ? because what if the user is not interested in downloading diff diff fonts on machine? So i think if we have to do testing of (most used) browsers on such machine which doesn’t have that particular font.Check this link bcos i really need the solution of this thing http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

  21. TrackbackTwitted by meeratankTwitted by psyk_Colorrage Blog » Blog Archive » Some links for light reading (5/5/09)Colorrage Blog » Blog Archive » Some links for light reading (5/5/09)Complete Guide to CSS Font Stacks « Smashing MagazineGuide to CSS Font Stacks: Techniques and Resources « Tech7.Nettypography tuesday: flickr « two smiths and a dogWordpress Blog Services - Guide to CSS Font Stacks: Techniques and ResourcesBetter Font Families in CSS | DevloungeDevils Backyard » Blog Archive » Guide to CSS Font Stacks: Techniques and ResourcesGuide to CSS Font Stacks: Techniques and Resources - Programming BlogGuide to CSS Font Stacks: Techniques and Resources | 9Tricks.Com - Tips - Tricks - TutorialsGuide to CSS Font Stacks: Techniques and Resources | Search Engine Optimisation