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;

Reference URL


  1. 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?

    • 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. Blaze Pollard
    Permalink to comment#

    I enjoy this.

  3. Ant

    My favorite font-stack is:


  4. Ryan
    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. mARK
    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. Denis

    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. Drew
    Permalink to comment#

    @Denis – Nice little tool congrats.

  8. kontur
    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. FlowFu
    Permalink to comment#

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

  10. Geoffrey Hale
    Permalink to comment#

    Ah, I wish you would include examples of each!


  11. Rafal
    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. Wes

    how about a narrow sans serif stack?

  13. 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. Rick
    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. 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?

    • Duane
      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. Robert
    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. Jesse

    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)

    • Jesse

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.