Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  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?

  2. I enjoy this.

  3. Ant

    My favorite font-stack is:

    font-family:sans-serif;

  4. Permalink to comment#

    Chris,

    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. 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 codestyles.org (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. 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 cssfontstack.com.

    Comments and suggestions are more then welcome.

  7. Drew
    Permalink to comment#

    @Denis – Nice little tool congrats.

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

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

  10. Ah, I wish you would include examples of each!

    Regards,
    Geoff

  11. 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”. http://jsfiddle.net/mkRXx/embedded/result/

  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)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".