/* 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;
Font Stacks
Chris Coyier
on
(Updated on )
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?
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: http://support.microsoft.com/kb/306527
Chris, thanks for citing my article. In hindsight, some of those font stacks are a bit heavy and could be trimmed. I’d advise anyone who sees this snippet to consult the article first before cribbing a font stack wholesale, and to peruse the lively discussion that ensued in the SP forum.
Windows users have some trouble finding versions of Helvetica unless they’re willing to buy them. There are a tremendous number of badly done “pirate versions” of the Helveticas out there. I had a few, including one that displayed headers in Cyrillic lettering (?!). I’ve purged them all until I can either find a legitimate way to get free copies, or can afford to buy some of the core Helveticas, including Helvetica Neue. In general, the basic Helvetica fonts display well on monitors even at relatively extreme sizes — far better than their b@stard cousin Arial does.
I enjoy this.
My favorite font-stack is:
font-family:sans-serif;
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!
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.
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.
@Denis – Nice little tool congrats.
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 ;)
The “sans serif” fallback in each list is missing its dash, they should be “sans-serif”
Ah, I wish you would include examples of each!
Regards,
Geoff
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/
how about a narrow sans serif stack?
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?
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)
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?
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.
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.
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)
(N.b., “HoeflerText-Regular” alone isn’t sufficient. Laptop Firefox on OSX 10.11.5 prefers “Hoefler Text”.)
Interesting article. Is there a current update for these font stacks?
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
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;
The order of some of those stacks seems odd.
For example in the the Helvetica stack why is
"Helvetica Neue", Helvetica, Arial
not first in the list?By mARK’s and ANT’s comments, somewhat, I am led to ask. Is there anywhere a reference as to what I’ll most likely get most everywhere for generics? For example, on iPadOS Safari, I see that “font-family:serif” yields “font-family:’Times New Roman’” (or vice versa). May I find out what “serif” and “sans-serif” are most likely to yield? Could save a lot of typing for those who are typography-lazy.