8 Definitive Web Font Stacks

Get Started
21

Thanks! I’m not the first to do this by any stretch, and when I get a few minutes to reformat that very, very long source list, I’m going to post it in here. Quite a few alternate font stacks are listed in there.

22

As much as I love this article and want to use custom fonts in my design mockups which my clients would also love, these may not be the fonts they’ve chosen (or, near them).

Therefore, I’d say sometimes it’s safer or you’ll have to plain use sIFR.

Nonetheless, it’s great to know with stacks the probability of using some the non-standard web fonts are achievable. :slight_smile:

23

Okay, here’s the enormous list of sources used for this article, reformatted for the forum. These sources deserve much of the credit for the info in this article :nod: (and none of the blame for my own errors and misperceptions).

24

Interesting article. I had not thought about font stacks before, something I’ll consider for the next site I develop.

Thanks for the list of sources. Unfortunately, the links to the pages aren’t displaying.

25

Not sure why that is. They work for me. Anyone else having problems with the links not working?

26

They show up fine in the forum discussion thread, but not in the article comments. Since Deborah is listed as a ‘SitePoint Community Guest’ I think it’s safe to assume that she’s looking at the comments at the end of the article, not the forum thread.

27

The things I don’t know… Thanks, Tommy. Deborah, join us. We’re in the Web Design discussion thread:

28

Blimey! Those a good number of links!

I have to confess that the article gave more questions than answers… maybe the answers are there :lol:

The thing is that while I understand that typography is truly important, my knowledge of design is not that good and I always end up using the typical (Helvetica, verdana, arial, tahoma, etc… as sans-serif fonts as an example)

I find hard to get the font that will produce the right effect on my site, and knowing that most people will not be able to see it as intended doesn’t help much. This has always been an outstanding subject for me.

As you said, it is a good starting point… and I am still not sure of how to make things work out…

Lack of time doesn’t help of course.

29

Or maybe in the parts that didn’t make it past the final edit…?

Well, if you just don’t know and you don’t have the time to do the research, certainly the safest bet is to stick with the Web-safe and screen-safe fonts.

Hmmm. Off the top of my head, a safe Helvetica/Arial font stack might be something like:

"Myriad Pro", Myriad, "DejaVu Sans Condensed", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;

with the two Myriad variants for the Mac users, two for Linux users, the two Helveticas (I like the Neue variant so I always put it before the plain-vanilla Helvetica), then Arial as a final backstop. Of course, if you don’t like Myriad as your leadoff font choice, you could simply drop it, or swap it out for something else. If you like Helvetica a lot, as my pal Leon Paternoster does, you might try:

"Helvetica Neue", Helvetica, "DejaVu Sans Condensed", "Nimbus Sans L", Arial, sans-serif;

It’s like Lincoln logs, you just keep swapping them around until you find a combination you like.

30

So how long did it take you to do all this stuff? :smiley:

31

I did it between plowing the south 40 and buffing my nails :smiley: No, seriously, it took a good while, mostly because when I embarked on the article I realized just how ignorant of the subject I really was, so a lot of my time was spent reading and correlating info. I might know more than I did two months ago, but I still have a great deal to learn.

32

I would advise AGAINST using such font stacks in most cases. Here is why:

  1. They use half-popular, platform-specific or obscure fonts as first choices, before defaulting to an almost standard MS Core Font. Which means that you’ll end up with 31% of users seeing one font, 22% seeing another one, 12% seeing yet another one, 8% seeing yet another one, etc. And since actual letter size varies between fonts for a same font-size — unless you use font-size-adjust, only supported by Firefox3 and other browsers show no sign of wanting to support it… — you may end up with unreadable text for smaller or medium font-sizes.

  2. They’re quite obese. Yet every font has its possible quirks. One specific font may not have italics or bold (then you end up with extrapolated oblique text or boldified text, which is definitely not nice, especially the boldified disasters), and since you’re using a lot of fonts in your font stack you probably don’t know the specifics of each one. Way to get unpredictable results.

Don’t get me wrong, I definitely know there is not absolute control of the way text appears on web pages. Good web design should definitely plan for text that will appear bigger or smaller than expected. But sometimes, after taking basic measures to ensure that visual text accessibility will be good, you may also want to optimize your layout for, say, 40% or 70% of your readers who DO have such or such font, and such optimization requires shorter, less obscure font stacks.

33

As long as you’re going to provide a link to a “CSS file” of these font family call-outs, you might as well provide a file that actually validates. Having typos and invalid font designations makes you appear sloppy, at best.

Try this:

/****************

  • From the article “8 Definitive Web Font Stacks”
  • by Michael Tuck
  • Copyright SitePoint 2008
  • The general ordering is: the less widespread Windows fonts,
  • then Mac fonts, then Linux varieties, then universal fonts,
  • and finally, the generic family name. This is why the more
  • well-known fonts (Arial, Verdana, Georgia) bring up the rear.
    */

/* Times New Roman-based stack */
.times { font-family: Cambria, “Hoefler Text”, Utopia, “Liberation Serif”, “Nimbus Roman No9 L Regular”, Times, “Times New Roman”, serif; }

/* Modern Georgia-based serif stack */
.constantia { font-family: Constantia, “Lucida Bright”, Lucidabright, “Lucida Serif”, Lucida, “DejaVu Serif”, “Bitstream Vera Serif”, “Liberation Serif”, Georgia, serif; }

/* Traditional Garamond-based serif stack */
.garamond { 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 */
.helvetica { 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 */
.verdana { 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 */
.trebuchet { 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 */
.impact { font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif; }

/* Monospace stack */
.monospace { 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; }

34

Florent, you make some good points. Some of the issues raised in your post were addressed, to an extent, in the original article.

This is true to an extent. You have to be careful in what fonts you choose in your stacks. Many fonts are of similar (not identical) letter size, and can be safely (relatively safely) substituted one for another without an appreciable shift in display.

Some of the stacks are quite large. Some are more streamlined. As I explained (and some of this explanation got edited out), many of the stacks have four or five variants of the same fonts – i.e. the Palatino family – to give the widest possible exposure of that particular font.

(Edit: That Garamond stack needs work. :slight_smile: )

True, and this is something each designer will have to decide for him/herself. If a designer isn’t bothered by the way a particular font is “boldified,” or his/her design doesn’t use boldface enough to make it a consideration, then that designer won’t care about fonts having italics or bold versions. Others will draw different conclusions. That’s why a designer has to have a strong baseline knowledge of fonts/typography, and make some informed decisions. But to just throw out the idea of using various font stacks and sticking to the usual four or five is, to my mind, more limiting than being a bit more adventurous and taking some risks with your design’s display.

Oftentimes it does. Others it does not. You’re basically saying, “err on the side of caution and on uniformity.” Some designers will want to expand their horizons a bit – and in the process, run the risk of changing their site’s display on some users’ machines. You weigh your options, do the research, and make your decisions. My article is just one of many sources of information about the subject, not a hard-and-fast advocacy of using this or that particular method or approach.

Good response, and thanks!

35

This is great and I would love to see a follow up article talking about the other aspects of typography such as line spacing, letter spacing, font sizes between headings etc.

36

Greg, I’m not sure on what you’re basing your rather pointed criticism. If you’re referring to the text file, the snippets were obviously presented for use within someone’s CSS file. A designer may not want to use .times as a class identifier, for example. Or they may want to add to, or subtract from, the fonts. Most people will put these in their CSS files as part of their body or paragraph elements, and thereby not use any of the identifiers you’ve given. In the text file Sitepoint provided for the article, designers can cut/paste and insert a particular with little editing, if they choose. (I wouldn’t, not without doing some testing.) With your CSS snippets, it’s very likely they’ll have to edit out some of what you’ve given them. It’s just personal preference, but I’d rather let the user add their own stuff if they desire, and not force them to delete unwanted code. Other than this, I don’t see the “typos and invalid font designations” that you say are there. I did a rather quick comparison of your stacks and the ones in the text file, and outside of the class identifiers and the opening and closing brackets, I don’t see anything else that might qualify. I would appreciate your identifying the typos so I can ask the editors to make the appropriate changes.

37

I’ve proposed another article, or articles, drawn from the original “monster” article. I hope I can indeed provide a follow up. E-mail the SP staff! :slight_smile:

38

A good read, Thanks

39

A follow up article would be great, in my opinion :smiley:

40

Mine, too!

Greg Raven sent me an e-mail pinpointing the typos he found. He wrote,

The two things that jumped out at me were: 1) a quoted font name with the comma inside the end quote, and 2) “sans serif” instead of “sans-serif”.

He’s right. In the text file accompanying the article, he found this in the Georgia stack:

"DejaVu Serif,"

Not correct; the comma goes outside the quotation mark, not inside. He also found

sans serif

instead of the properly written

sans-serif

in all four sans-serif stacks. He has better eyes than I do. Good catches, Greg.