Revised Font Stack

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.

Font Stacks—Reviewed

1. Microsoft

   Tahoma, Verdana, Segoe, sans-serif;

   Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Segoe (45.04%) has less font share % than Tahoma and Verdana on Windows and will seldom get a chance to render. So, I believe its better to shift Segoe to the front of the stack. I have added Geneva (98.84% on Mac) to the revised font-stack, which is quite similar to Tahoma.

   Suggested font-stack:

   "Segoe UI", Segoe, Tahoma, Geneva, sans-serif;

2. Yahoo

   arial, helvetica, clean, sans-serif

   According to Jens Meiert, using Arial before Helvetica doesn’t makes much sense and he suggest of using Helvetica before Arial.

   Many high traffic websites like: Adobe, LinkedIn, Aol, ebay, You Tube, CNN.com and Mapquest use: Arial, Helvetica, sans-serif;

   99.71% Macs have pre-installed Helvetica and 99.15% PCs have Arial. While building our font-stack we should consider each of these platforms before pointing our finger to default sans or sans-serif typeface. Many designers agree that Helvetica looks terrible on Windows (but only if we specify it below 16px). Here is a comparison of Erskine Design on Mac and Windows, where Helvetica is being rendered at 12px.

   

   Suggested font-stack:

   Arial, sans-serif;

3. Facebook

   "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;

   Facebook, Twitter, WordPress, Newswine and Basecamp have set Lucida Grande as their primary choice for Mac but missed Lucida Sans Unicode for Windows and Lucida Sans for Linux.

   Lucida Grande (99.13% share on Mac) is a common choice these days. For Windows and Linux, Lucida Sans Unicode (with 98.25% share) and Lucida Sans (with 77.78% share) can be used, but they are missing (intentionally or unintentionally) in Facebook’s font-stack. So as to strengthen the font-stack comprising of Lucida, we should use both Lucida Sans Unicode and Lucida Sans for Windows and Linux respectively.

   Using Arial after Verdana and Times New Roman after Georgia is a very common practice. In both cases, x-height is different and the text varies at a given font-size. Richard Rutter—production director at Clearleft gave the following statement at Skillswap 09 on this issue.

   Verdana appears much larger than Arial, so Arial is not a suitable back-up for Verdana. If it’s not suitable, don’t specify it.

   Suggested font-stack:

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

4. I Love Typography

   Georgia, Cambria, "Times New Roman", Times, serif;

   Cambria is a part of the suite of fonts that come with Microsoft Windows Vista, Windows 7, Microsoft Office 2007 and Microsoft Office 2008 for Mac, specifically designed for on-screen reading. With 54.51% share on Windows, Cambria can be a good choice over Georgia and Times New Roman. 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;

5. Jon Tangerine

   baskerville, palatino, 'palatino linotype', georgia,serif;

   Jon Tan—an expert web designer known for his beautiful web typography—uses Baskerville as a primary choice for his blog’s heading (pith & pulp …), followed by Palatino and Georgia. I’ve added Garamond (23.84% on Mac, 86.24% on Windows), Hoefler Text (88.70% on Mac) and Times New Roman (93.62% on Mac, 98.60% on Windows) to his font-stack and tested in Firefox on Mac so as to find the best possible choices.

   Following are the results in order of decreasing similarity in size and weight (results are ordered to the best of my judgment).

   Baskerville

   Garamond

   Times New Roman

   Palatino

   Hoefler Text

   Georgia

   From the above comparison and after considering the font-share %, we can choose Baskerville (88.60% on Mac), Baskerville Old Face (49.10% on Windows), Hoefler Text (88.70% on Mac), Garamond (23.84% on Mac, 86.24% on Windows), Book Antiqua (86.09% on Windows), Palatino (79.71% on Mac, 98.04% on Windows) and Times New Roman (93.62% on Mac, 98.60% on Windows). Georgia is left out and replaced by Times New Roman as a generic font because Times New Roman is clearly a better replacement for Baskerville while considering the x-height and weight.

   So the revised FS will be:

   Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;

6. Sushi & Robots

   "Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif;

   Sushi & Robots is having a nice font-stack crowned with Hoefler Text (88.70% on Mac) which renders beautifully and the site looks amazing on Mac. Garamond and Palatino Linotype are good choices for Windows. However, the typefaces used in above font-stack differs based on x-height. E.g. Hoefler Text, Basekerville and Garamond has comparitivly less x-height than Palatino and Georgia. Based on the difference in x-height, I’ve divided these typefaces into two groups keeping Hoefler Text at driver seat. Following images will help to clarify the matter further.

   Hoefler Text
   Hoefler Text
   Constantia
   Garamond
   Palatino
   Baskerville
   Georgia
   Times New Roman

   If we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. So, I’ve divided the basic font-stack into two separate groups that can be used while keeping Hoefler Text at the driver seat. You can choose the suitable font-stack among these two.

   "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;

   or

   "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;

“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

40 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 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: 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.

  www.highchairdesign.com/studio/isthefontloaded

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

  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: 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”: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″:support.apple.com/kb/HT1538
  - installed “on 10.5″: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