Font Stacks

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;


  1. User Avatar
    Giovanni Mattucci
    Permalink to comment#

    I’ve used some font stacks before such as one that included “Helvetica Neue”, and the system font didn’t display properly on the screen. I had to abandon it.

    Perhaps typefaces at certain sizes on a web page break down?

    • User Avatar
      Giovanni Mattucci
      Permalink to comment#

      Seems that the reason that the fonts weren’t being displayed correctly (in Firefox) was because Clear Type wasn’t enabled in Windows.

      Check this out if fonts look like crap in Firefox for you in windows:

  2. User Avatar
    Blaze Pollard
    Permalink to comment#

    I enjoy this.

  3. User Avatar

    My favorite font-stack is:


  4. User Avatar
    Permalink to comment#


    For people copying and pasting these stacks can you change an error in the first stack?
    “DejaVu Serif,”

    Should be
    “DejaVu Serif”,

    Thanks! Love your work!

  5. User Avatar
    Permalink to comment#

    Max Black et al, please consider system stress when downloading junkyard typefaces to boxed in fools who think every font in a font family has to be installed on their system (s). LOL! This is not to detract in any way from simply and naturally and vibrantly good work done on (more than meets the eye). But … Use only bought fonts acquired personally from Agfa, Adobe, Microsoft, ITC and other monotype accredited “agents” report any aberrant behavior to as many foundaries as you can. When you have done so, delete all your irrational posts … or edit them to clearly demonstrate why junkyards don’t belong in any serious thread [Max, G u could have more to say there than anyone in region “?” – wherever you are. Amen. BURB this comment be kerneled from dead center of the junkiest skunk pile ever to stale in cyberspace.

    Yes Ryan, lovely work by Chris, best snippets tonic in the world. Even though Ctrl-A is a little berserk.

    Cheer up! This snippet got it wrong at the end of almost every line. Given the ugly comments arising from the disgusting visual insult of a generic font on today’s colorful Internet, Chris’ font family efforts are missing just one feature that attends to the frequency of installed fonts: five foundation fonts each corrrespond to exactly one most popular variant of that typeface for each OS-type. For example, serif ‘owns’ Times New Roman (Win), Times (Mac) and Century Schoolbook L (Uni): in any order, these three typefaces should be placed immediately to the left of “serif”. They are set to knock out 99.9-100% of anything that follows them. Like wise the other four branches. Then a web font script should be applied to the properly stacked web site ~ current best practice.

    You can travel at speed along any highway, but if you are going backwards, that’s not a good thing. There are ten kinds of drivers in this world, one is binary, and the other is lost.

  6. User Avatar

    Hey Chris,

    I just created a visual font stack library that just allows you to click a button to copy a font stack and paste into your css. I included all the standard stacks but it will definitely grow with some fancier, less common stacks. You can find it at

    Comments and suggestions are more then welcome.

  7. User Avatar
    Permalink to comment#

    @Denis – Nice little tool congrats.

  8. User Avatar
    Permalink to comment#

    Personally, I wouldn’t use any fontstack that has fonts in it that I did not test myself for the layout in question. While those font-stacks are a nice reference, I’d like to utter a word of caution about blindly using them as such ;)

  9. User Avatar
    Permalink to comment#

    The “sans serif” fallback in each list is missing its dash, they should be “sans-serif”

  10. User Avatar
    Geoffrey Hale
    Permalink to comment#

    Ah, I wish you would include examples of each!


  11. User Avatar
    Permalink to comment#

    I’m not trying to be spammy or anything but I made a jsFiddle for all these font stacks, just to see how they look like. My favourite is “Modern Georgia-based serif stack” and “Traditional Garamond-based serif stack”.

  12. User Avatar

    how about a narrow sans serif stack?

  13. User Avatar
    jorge eduardo
    Permalink to comment#

    Hi, what do you think of using google fonts. Indeed it could be more efficient due to the fact that fonts are hosted in a 3P server?

  14. User Avatar
    Permalink to comment#

    The reason I use Verdana is the clear distinction between letters, particularly ‘I’ and ‘l’. Is there a font-stack which maintains this clarity? (The given Verdana stack contains Corbel and Lucida Grande, both of which fail for my purposes)

  15. User Avatar
    Andy Mercer
    Permalink to comment#

    I’ve been testing the Palatino Linotype stack, and can’t get it to do anything at all on Android. Any ideas that might be similar, that Android would have?

    • User Avatar
      Permalink to comment#

      Testing indicates that mobile Android ditches any stack that has Palatino in it and automatically assigns it Droid Serif, no matter where in the stack Palatino is. I don’t know what other forced substitutions there are in mobile Android.

  16. User Avatar
    Permalink to comment#

    It would be great if we could add an identifier to fonts to test which one displays in each browser. I.e., arial is red, times is blue etc. Another idea is a psuedo element. If arial appears the word arial appears before. This would take a lot of code to identify every one of the fonts above but less so to test a single stack on your site.

  17. User Avatar

    Due to the weak-kneed way Apple Safari displays ‘Hoefler Text’ in garishly bold form these days, I have found it helpful to specify the string “HoeflerText-Regular” ahead of “Hoefler Text” when targeting laptop Safari. (As of OSX 10.11.5)

    • User Avatar

      (N.b., “HoeflerText-Regular” alone isn’t sufficient. Laptop Firefox on OSX 10.11.5 prefers “Hoefler Text”.)

  18. User Avatar
    Permalink to comment#

    Interesting article. Is there a current update for these font stacks?

  19. User Avatar
    Shawn Crigger
    Permalink to comment#

    Does anyone know a good fallback font stack for Montserrat, I use it quite a lot with the designs I have been getting lately and I am looking to build a decent fallback stack since I am starting to use web fonts in the HTML emails I build and having a good fall back stack is essential since support is very low on web fonts in HTML emails

    • User Avatar

      I was looking for the same thing and ended up rolling my own. This stack is nice because the leading fonts are available via Google Fonts as well as Typekit. Source Sans is very similar to Montserrat. I leave out Open Sans because it’s not a geometric. Helvetica Neue is little bit nicer IMO, but most machines have og Helvetica installed. Arial black would be if you are using a heavy weight of course, and then yea. Feedback welcome:

      font-family: 'Montserrat', 'montserrat', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.