Revised Font Stack

February 3, 2010

Stack and Fonts

Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

“… font stacks are ultimately design factors, and should be scrutinized as such.”—Nathan Ford, Better CSS font stacks

Pre-installed fonts

Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. —Nathan Ford, Better CSS font stacks

Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. But, there are a few other typefaces which haven’t been tried earlier. Code-style font survey revealed some other common fonts installed on Mac and Windows which can used effectively.

I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. By considering the font-share % statistics in the following table, we can try some other typefaces, but with care.

Mac Windows
Serif % Sans-serif % Serif % Sans-serif %
Times 96.23 Helvetica 99.71 Georgia 98.55 Verdana 99.40
Georgia 94.20 Geneva 98.84 Times New Roman 98.60 Tahoma 99.30
Times New Roman 93.62 Lucida Grande 99.13 Palatino Linotype 98.04 Arial 99.15
Hoefler Text 88.70 Arial 97.10 Book Antiqua 86.09 Trebuchet MS 99.00
Baskerville 88.60 Verdana 96.81 Garamond 86.24 Lucida Sans Unicode 98.25
Didot 87.72 Helvetica Neue 94.74 Cambria 54.51 Franklin Gothic Medium 97.89
Big Caslon 85.10 Trebuchet MS 94.20 Constantia 53.81 Calibri 54.76
Palatino 79.71 Gill Sans 91.52 Goudy Old Style 51.30 Candara 54.31
Lucida Bright 64.90 Futura 91.01 Baskerville Old Face 49.10 Gill Sans MT 51.74
Garamond 23.84 Optima 90.14 Bodoni MT 47.89 Segoe UI 45.04

Font Stacks—Reviewed

“Make sure your font stacks make sense and are useful.”— Richard Rutter, [Skillswap 09]

Revised Font Stacks

I’ve created a font-stack for each typeface while considering the font share table statistics.

Notes:
  • Some of the fonts, like: Garamond, Baskerville and Didot are not as readable on screen as Georgia. Feel free to make your own selection.
  • Due to smaller x-height; Caslon, Didot, Garamond, Baskerville and Hoefler Text should be set at minimum of 14 pixels or above.
  • Lucida Grande, Futura and Tahoma are mechanically obliqued to fake an italic.
  • Geneva, Baskerville Old Face and Big Caslon has no bold and italic. They are faked to bold and italic.
  • Avoid using Helvetica or Helvetica Neue for body text, especially below 14px.
  • Futura, Gill Sans and Franklin Gothic Medium should be carefully stacked and used because of their unusual weight.

Serif font-stack

  1. Garamond

    (23.84% on Mac, 86.24% on Windows)Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;

  2. Lucida Bright

    (64.90% on Mac, 33.84% on Windows) Huge x-height "Lucida Bright", Georgia, serif;

  3. Palatino

    (79.71% on Mac, 98.04% on Windows)Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

  4. Big Caslon

    (85.10% on Mac)"Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;

  5. Didot

    (87.72% on Mac)Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

  6. Baskerville

    (88.60% on Mac, 49.10% on Windows)Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;

  7. Hoefler Text

    (88.70% on Mac, 1.16% on Windows)"Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;

  8. Bodoni

    (47.89% on Windows)"Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

  9. Goudy Old Style

    (51.30% on Windows) "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;

  10. Constantia

    (53.81% on Windows)Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

  11. Cambria

    (54.51% on Windows)

    Cambria, Georgia, serif;

  12. Book Antiqua

    (86.09% on Mac)"Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

Sans-serif font-stack

  1. Optima

    (90.14% on Mac)Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;

  2. Futura

    (91.01% on Mac) Futura, "Trebuchet MS", Arial, sans-serif;

  3. Gill Sans

    (91.52% on Mac, 51.74% on Windows)

    "Gill Sans", "Gill Sans MT", Calibri, sans-serif;

  4. Trebuchet

    (94.20% on Mac, 99% on Windows)

    "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

  5. Helvetica Neue

    (94.74% on Mac)

    "Helvetica Neue", Helvetica, Arial, sans-serif;

  6. Verdana

    (96.81% on Mac, 99.40% on Windows)

    Verdana, Geneva, sans-serif;

  7. Lucida Grande

    (99.13% on Mac, 98.25% on Windows)

    "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

  8. Geneva

    (98.84% on Mac)

    Geneva, Tahoma, Verdana, sans-serif;

  9. Segoe

    (45.04% on Windows)

    Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  10. Candara

    (54.31% on Windows)

    Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;

  11. Calibri

    (54.76% on Windows)

    Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

  12. Franklin Gothic Medium

    (97.89% on Windows)

    "Franklin Gothic Medium", Arial, sans-serif;

  13. Tahoma

    (99.30% on Windows)

    Tahoma, Geneva, Verdana, sans-serif;

“Think about typefaces beyond the core web fonts.”—Richard Rutter, [Skillswap 09]

It’s time… revise your font-stacks

These font-stacks are created after considering the font-share percentage on both Mac and Windows platforms and then checked in browser for x-height and other issues (like: readability). These font stacks are created as per my own understanding and may vary from designer to designer depending upon their choice, judgment and preferences. Any suggestions or improvements will be appreciated. I would love to see some interesting, but meaningful, font-stacks build on my research. Best of luck!

Thanks to Phil Shaw for Code Style and Font survey.

Update: Belorussian translation for Revised Font-Stack

39 Comments

Add your comment


  • # Prashant
    says on February 03

    Useful post with a good design. Lot of things to learn about the font and also we can learn a little bit usability from the post design.

    Great post, thanks for sharing 🙂


  • # Auré
    says on February 04

    Waho…
    Very good article.
    Thanks for sharing


  • # tejas
    says on February 04

    Nice article and sum up there!


  • # Yvonne
    says on February 04

    great article, sometimes forget about other fonts being available other than the web safe fonts that come to mind


  • # Pete B
    says on February 04

    Thank you for encouraging designers to *not* specify helvetica for body text.

    One of my pet peeves when using windows; I even made a bookmarklet to forceably overwrite helvetica body text http://www.marklets.com/Bookmarklets/helveticlear.aspx


  • # Gabe
    says on February 04

    Thanks for the post. I put all of these declarations into a style sheet (for easy copy/paste later). If you’re interested, you can find it here: http://gabe-harris.com/new_font_stacks.css


  • # Matt Wiebe
    says on February 04

    Wow, that’s a terrific list!

    I often find myself specifying the following for a Helvetica font stack:

    'Helvetica Neue', Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif.

    Helvetica Neue is installed on Macs, so Mac users get the benefit of a better-looking font, but Windows users never see it and get Arial instead, which renders reliably well on Windows. I add Helvetica after Arial because hey, you never know, and Liberation Sans and FreeSans are pretty good Linux alternatives.

    Finally, creating font stacks led me to create FontFriend, a bookmarklet to rapidly check different fonts in your browser – you might find it useful.


  • # Brian Smallbeck
    says on February 04

    Well done! Very useful for future reference, because who knows when font embedding will be an everyday reality…


  • # Ted Goas
    says on February 04

    Nice way to find a comfortable balance between web typography and website performance. It seemed a lot sites were adding @font-face files and javascript calls to get custom fonts on their site.


  • # Marco
    says on February 04

    I was using for body a “segoe ui”, GillSans, frutiger, verdana, Helvetica, “Trebuchet MS”, sans-serif; stack. But yours has much more sense.

    BTW great reading. Bookmarked.


  • # J. Hogue
    says on February 04

    This is a great resource and very well researched. I love stuff like this. A while back I was thinking of ways to help create better font stacks, and I made a page to test whether some fonts exist on certain machines or not. Here is a list of common fonts, compared to PNGs of said fonts so you can see what is being loaded and what is not.

    http://www.highchairdesign.com/studio/isthefontloaded

    I also have a page that shows all the different font-variants and how they look:

    http://www.highchairdesign.com/studio/web-type-samples

    With your cascades as a fantastic basis of understandable, perhaps my pages will also help designers make some good choices when it comes to web typography.


  • # Birgit
    says on February 05

    a very nice compilation and well researched. I am in the middle of a redesign and your article helped me a lot with defining a better font stack. Thanks so much!


  • # The Frosty
    says on February 05

    Real useful info on typography! Thanks for the break down!


  • # Dave Harrison
    says on February 05

    Great article. I am curious to now where you stand on @font-face. You have certainly inspired me to revisit traditional methods of using fonts, but for consistency across browsers I still see a need for progression.


  • # Don Carroll
    says on February 05

    Great work. I too, would love to see your thoughts on @font-face. Maybe a follow-up?


  • # Jon Buda
    says on February 05

    This is great stuff. Very well researched and thought out. Definitely opens up some wonderful possibilities.

    I turned the collection into proper CSS: http://gist.github.com/295498


  • # Kaushik Panchal
    says on February 05

    Thanks a lot Amrinder, Its really very useful post for me and others like me.
    I’ll always be waitin for ur posts.
    thank u very much 🙂


  • # gummisig
    says on February 05

    Splendid job on this Sir. This is an invaluable resource for future typesetting without a doubt.

    Many, many thanks again dude, this is great


  • # Amrinder
    says on February 05

    I’m glad you all found it useful.

    @Pete B, @Gabe:

    I appreciate your efforts. I’ll definitely look into your work.

    @Matt Wiebe:

    There is no problem with your font-stack. We only need to see if this font-stack works well in the context (heading, para) we are using. I’m not it favor of specifying Helvetica after Arial because according to the pre-installed share %, Helvetica has very rare chance. And, thanks for sharing the bookmarklet.

    @J. Hogue:

    Agree with your point.

    @Dave Harrison, @Don Carroll:

    I’ve read most of the good articles written about @font-face. The thing is, I don’t like most of the typeface available with @font-face license. However, I’ve no doubt in its performance.

    @Jon Buda:

    Thanks for your efforts. Definitely, this will be helpful.


  • # stv
    says on February 05

    My new font-stack cheat sheet.

    Many thanks.


  • # David Boni
    says on February 06

    I had never seen how Helvetica rendered on a Windows system. That is quite revolting.


  • # Philippe
    says on February 07

    fwiw,
    1. Helvetica Neue is _always_ installed on OS X 10.4+ (and can’t be removed without breaking the OS, it is a required system font).
    Thus, this is better (dropping the ‘helvetica’, which anyway displays poorly on Windows):
    E {font-family: ‘Helvetica Neue’, ‘Liberation Sans’, Arial, sans serif}

    Note also, 10.6 ships with one additional face for the Helvetica Neue collection: ‘medium’, which can result in odd behaviour for @strong@ elements. See “this article”:http://emps.l-c-n.com/notebook/HelveticaNeue-font-weight of mines.

    2. “Franklin Gothic Medium” was never installed by default on OS X. It might be available if one installs MS Office, can’t remember.

    3. source for OS X fonts (Apple):
    – installed “on 10.4”:http://support.apple.com/kb/HT1538
    – installed “on 10.5”:http://support.apple.com/kb/HT1642
    (no technote about 10.6, yet)

    4. One thing to take into consideration when writing a font-stack is the respective aspect-ratio (x-height) of fonts. For instance, Constantia has a much smaller aspect-ratio than Palatino (0.459 vs 0.472 receptively). That results in text flowing differently.


  • # Michael Fink
    says on February 07

    A flawed — but unstated — assumption seems to underpin much of the thinking behind this article.

    From the article:

    bq. However, it makes no sense of using Cambria after Georgia, which has share of 94.20% and 98.55%, on Mac and Windows respectively. Now if ILT is serious about using Cambria as a primary choice, then the revised font-stack should be: Cambria, Georgia, serif;

    And in the comments:

    bq. I’m not it favor of specifying Helvetica after Arial because according to the pre-installed share %, Helvetica has very rare chance.

    Many of Amrinder’s suggestions appear based upon an idea that fonts in a font-stack should be placed in the inverse order of the likelihood of the font being available. Which is an absolutely irrelevant consideration. And one that removes much of the clever flexibility that the font-stack concept introduced, for no apparent gain.

    A far better idea is to order font-stacks in the order that you’d prefer your site to be rendered in. Crazy, I know!

    If John Boardley at I Love Typography specified Georgia before Cambria then I’m sure that was no accident. If a user has both Cambria and Georgia on their system then he wants them to see his site in Georgia. On the odd chance that the user has Cambria but not Georgia he’d prefer them to see it in Cambria than an anonymous sans-serif font that he has less control over. The way font stacks work mean the effort of specifying what to do in this situation, and the penalty paid in the size of the file, is so small as to make it a possibility worth covering for.

    Placing a more popular font before a less popular one in a font stack obviously means that there is little likelihood of the latter font being used. But that’s not a good reason for not doing so.


  • # Michał Czernow
    says on February 07

    Great article. I studied it very carefully. What would You consider as a good stack for Corbel?


  • # DesignLovr
    says on February 10

    Nice article that definitely got my thinking and reconsider my own font stacks (I honestly never paid a huge amount of attention to them).

    Although there is still room left for improvement it’s definitely a great start, thanks for writing this!


  • # Mark Host
    says on February 11

    You’re missing the double quote in front of Hoefler Text in the Garamond font-stack you have provided towards the bottom.

    Awesome article! Really helpful.


  • # Amrinder
    says on February 12

    @Philippe:

    1. I agree with your point. However, using Helvetica Neue below 14px doesn’t show off well on Windows (just like Helvetica). Thus, Arial is a safe choice under font-size: 14px;

    2. You are right. It was Windows and not Mac. Correction made.

    4. I’ve made above font-stacks after checking each of them in browser, and made the best choice as per my judgment. And we can’t find two typefaces with similar x-height, so its better to test individual typeface before placing it in a font-stack.

    @Michael Fink:

    Thanks for the kind words.

    Many of Amrinder’s suggestions appear based upon an idea that fonts in a font-stack should be placed in the inverse order of the likelihood of the font being available. Which is an absolutely irrelevant consideration. And one that removes much of the clever flexibility that the font-stack concept introduced, for no apparent gain.

    If you have checked font-stacks around, you will know the reason. Designers follow the order of availability otherwise the less available font won’t get displayed for most of the users.

    Which makes more sense for you?
    1. “Lucida Grande”, Arial; or
    2. Arial, “Lucida Grande”;

    A far better idea is to order font-stacks in the order that you’d prefer your site to be rendered in.

    That depends upon designer’s preferences, but won’t it be more useful to know about some font-stacks that have fair chance of getting displayed on users screen. You can anytime add your choice of typeface to the front of a stable font-stack.

    If John Boardley at I Love Typography specified Georgia before Cambria then I’m sure that was no accident. If a user has both Cambria and Georgia on their system then he wants them to see his site in Georgia. On the odd chance that the user has Cambria but not Georgia he’d prefer them to see it in Cambria than an anonymous sans-serif font that he has less control over.

    Almost 99% of Windows machinces have preinstalled Georgia, so where do you see the chance of displaying Cambria (54.51% on Windows).


  • # iaresven
    says on March 02

    An AMAZING article, thanks Amrinder!


  • # Greg Wood
    says on March 04

    Interesting article Amrinder, but I feel I must defend our decision for our font-stack on erskinedesign.com.

    The stack actually uses Helvetica Neue as our primary face, with Arial being the next along. Helvetica on PCs is relatively common due to being installed with various MS products, and as you pointed out, the rendering of this typeface is inconsistent on Windows platforms.

    We chose Helvetica Neue as our primary face because it’s common on Macs, but not on PCs. Therefore most PC users will see the Arial version, unless of course they’re designers!


  • # Amrinder
    says on March 06

    @Greg Wood:

    Nice to see you here! I understand your point of using Helvetica Neue over Helvetica in erskinedesign.com font-stack. I’ve checked it again using firebug and observed the following CSS rules:


    /* MAIN.CSS */
    @import "screen.css";
    body {
    font-family:Helvetica,Arial,sans-serif;
    }


    /* SCREEN.CSS */
    @import "reset.css";
    body {
    background:#FFFFFF none repeat scroll 0 0;
    color:#444444;
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:13px;
    line-height:20px;
    }

    From above rules, it seems font-family rule of main.css is overriding font-family rule in screen.css and preventing the Helvetica Neue (of screen.css) to replace Helvetica (of main.css).


  • # Tomáš Kapler
    says on May 04

    The problem is, that you are thinking only about 128 char texts (ISO ANSII). What about that 95% of world, which use also some other characters? At least what about European people, who need to use characters like ěščřžýáíéúů …
    When we would use theese font stacks, our users will see very often only some wrong characters, because the system found the font you put there, but did not find a character (you can try it)


  • # Kwasek
    says on May 10

    Linux of course doesn’t exist??


  • # Dan O'Neill
    says on May 10

    Absolutely excellent article.

    Although a developer rather than a designer I still do the odd bit of design work – Terribly 🙂 . I never really thought about trying to pair fonts together to ensure a properly consitent experience.

    I do all of my coding on a linux machine so rarely see any nice fonts… 🙂


  • # Christian
    says on June 21

    Thanks alot for this one! I´m coming back here for reference.


  • # Raghav
    says on July 07

    A good example of typography.
    I added AWAYBACK in my favorites.

    Really appreciate your effort.


  • # Scott
    says on July 17

    Thanks for the great article, now I understand 🙂 and I really appreciate it.


  • # Lisa Web Designer Brisbane
    says on July 29

    I Knew Fonts would be understood by sombody some day. One of my clints wants Disney and Times New Roman !!!


  • # Graphic Chick Brisbane
    says on August 27

    I love typography! I have designed a few fonts myself 🙂


  • # Mike
    says on September 03

    Great article! I use fonts in jpg maximum or png format when I can away with the file size obviously for cross browser compatibility and usually in the top section design area ..though I do prefer Palitino and Georgia as my preferred web safe fonts