Thank you for putting this together. I appreciate the research and critical thinking that went into developing these stacks. I will be able to use these and be much more confident in making more interesting (and more appropriate) font choices, rather than just surrendering to serif and sans. 
One question – and call me crazy but – how do these font stacks relate to mobile devices? … Will my iPhone do justice to the Garamond-based stack?
this was a great and informative read.
i really dug how you provided a lot of counterpoints and backed up your approach in a very significant manner. thanks - i will definitely be using these stacks in some of my projects going forward!
Thanks, guys.
JDN, I would shy away from using anything but the most common fonts and font stacks for mobile phones. I’m no expert by any stretch, but I do know that most mobile phones come with a very limited range of fonts, and that though some mobile phones can accept fonts from a PC, most people won’t do it, they’ll just use whatever’s on the phone. (And Garamond fonts are probably anything but standard issue.) Fonts for mobile phones is probably a good subject for a separate article. But I won’t write it…I don’t even OWN a mobile phone!?!
Andy, drop me a note if/when you use one of those stacks in your design. I’d love to see how they work for you.
Great article. I’ve just started using them in a new project but one of the fonts isn’t looking too great at certain font sizes.
Can you let me know the CSS sizing method you use normally?
I set a font size of 100.01% in my reset CSS and then use ems to change specific areas, such as:
#nav ul li {
font-size: 0.8125em;
}
Is this the method you use?
It’s a very good method. Check some of the links in the above comments for more info on font sizing methods and practices. Ultimately, though, some fonts just don’t look good at certain sizes no matter what you do.
One site that is very good at using carefully calculated ems from a base size is A List Apart. Another is [URL=“http://informationarchitects.jp/”]Information Architects. Take a look and see how they handle things.
This is really interesting and there’s lots of food for thought here, BUT…
I came across a post on Helvetica, Arial rendering in Windows today (I don’t think it’s discussed above, apologies if it is):
nivas.hr/blog/2008/02/28/browser-font-rendering-and-antialiasing-windows-vs-mac/
(SitePoint seems to have lost a load of my posts so I can’t create a link!)
Here’s a synopsis of the post…
There must be many other fonts in the proposed stacks for which the same issue presents itself.
This is regrettable but it surely means that until Vista and/or ClearType have a much greater uptake, the world is not ready for the approach Michael Tuck advocates?
I guess we could use conditional comments for Explorer to send different font stacks to Windows users but then:
Perhaps Microsoft can come up with a non-Explorer-specific conditional comment for ClearType being enabled?
Or maybe the wonderful JavaScript guys at SitePoint (James Edwards et al) could figure out a JS-based test?
[Halfway to 10 posts: I’ll soon be able to post a perfectly valid link 
]
In light of my Windows epiphany this morning, I’ve just changed something I’ve been working on that declared “Helvetica, Arial” to “Arial, Helvetica”. It pains me that it looks sh*te on a Mac but it does look much better on Windows as a result. And since I’m somewhat outnumbered by my Windows brethren, I guess I just have to suck it up.
Watershed, my apologies for not seeing and responding to your posts until now.
The poster is absolutely correct on the first two points. Win XP has ClearType, but it is not enabled by default, and most users don’t even know they have it. Vista has ClearType enabled. Whether you think ClearType is excellent or a disaster is a matter for another discussion (it WAS discussed in my original article, but most of that material was cut), but any design must be made with the assumption that more than half the general Windows populace will not have ClearType enabled on their machines.
I disagree with the position that
I don’t think that’s necessarily the case.
I don’t think this is a particularly good idea. I don’t know how such would work on a practical level, and without being able to force ClearType to be enabled through some sort of protocol (I’ve never even seen anyone suggest such a thing), you must assume, as I said, that most of your Win users won’t have it enabled. The font stacks in the article aren’t perfect by any means, but I did make an effort to include fonts for Mac and Linux users towards the front of the stacks, ensuring that those users had their fonts displayed before the fallback Windows fonts came up in the rotation. Better to make a well-rounded stack that covers the OS bases.
I’m not sure this could be done, and I’m not sure what practical use to which we could put the info, unless we learned that a lot more users than we thought had ClearType enabled.
Why do that? All you’re doing is making Mac users view the site in Arial instead of Helvetica, if they have both fonts. Keep Helvetica in front of Arial and use Arial as a fallback font. (I’m one of the relatively few Windows users that have Helvetica on my machine, and believe me, I much prefer it over Arial.)
I think SP wants another article on this subject. I was considering doing a Linux fonts article, but maybe I’ll do one on ClearType instead – or maybe save that for the third in the series.
Some notes:
IE7 also has ClearType enabled by default. Microsoft researchers say that having ClearType enabled increases reading speed.
Nice SP blog about ClearType’s poor anti-aliasing in comparison to the Mac font rendering.
In September 2008, this blogger said that based on his site’s stats, about 60% of his visitors used XP, and 20% of his visitors have an XP/IE7 combination (giving them ClearType enabled by default). About 40% of his visitors, he says, have no font rendering at all. Not sure if he’s aware of the font rendering systems in the Mac and some Linux systems.
Black Max, thanks for your replies…
When I said:
font rendering for non-core Windows fonts is significantly inferior to the standard core fonts
I was attempting to summarise Daemon’s findings in the Nivas thread cited: comparing the rendering of Helvetica and Arial without ClearType enabled. Taking those screenshots at face value, I find myself having to agree with Daemon’s position – Helvetica looks crap (less readable) without ClearType.
You say that inferior rendering is:
not necessarily the case
Well, yes, but because Helvetica (a non-Windows-native font) looks poor without ClearType my working assumption (until I test or someone proves to me otherwise) is that this applies to other non-Windows-native fonts without ClearType. (Note to self: do some tests, kiddo.)
As to the Helvetica, Arial or Arial, Helvetica issue, it galls me to put Arial first, BUT…
It’s a reasonable assumption that the vast majority of IE6 users haven’t turned on ClearType and in my experience they typically now account for between 10% and 35% of site users. Even at the lower end that’s substantially more than twice the number of Mac users for most sites, so it’s a pretty big step to take a position that one doesn’t care how fonts render for that user group!
Very interesting article and an informative read. However, I wouldn’t use these font stacks myself. For example: Bitstream Vera Sans, Trebuchet MS, and Verdana all look very different to me. Bitsream also renders significantly smaller than Verdana on my PC. Tahoma is definitely not a preferred substitute for Arial - they are both quite different and when applied in the context of an entire site give quite a different look & feel.
For the sake of consistency, these stacks might work better with the most popular universal Web fonts first (arial, verdana, etc), then OS-specific variations, and then finally the fallback serif/sans-serif.
I guess it depends on whether you’re going for consistency, or taking a little risk to utilize some of those less common and possibly more pleasing fonts out there.
They are very different, but you have to remember that those are fallbacks for users who don’t have your preferred font installed. If you leave out fonts that ‘look different’, users like me will end up with whatever is the browser’s default sans-serif. And then you have no idea how different it will look.
Watershed, from what I read, the typographical “purists” like Jon Tan and Cameron Moll hate and despise ClearType. The everyday shlubs like myself seem to like it. As with most things, it’s a matter of personal taste and individual needs. My eyesight is not good, so I appreciate the anti-aliasing and rendering; the “jaggies” that some people get so fired up about don’t make as big an impact on me.
I wouldn’t say that at all. By putting Helvetica before Arial in your stack, you’re giving it preference. Most Mac users have Helvetica on their machines, therefore they get to see your site in Helvetica. Most Windows users don’t have Helvetica on their machines, so they will see your site in Arial. I would venture to guess (no research to back this up) that if a Windows user has gone to the trouble to find and install Helvetica, he knows about ClearType, and has made the decision whether or not to enable it. So the number of likely users on Windows, with Helvetica, but without CT enabled, is small enough not to worry about, whereas the number of Mac users impacted by your choice is a good bit larger. That’s my thinking, anyway.
Tekime, thanks for sharing your thoughts. Ironically, I don’t use these identical stacks in my own coding. They’re a starting point for your own choices. As Tommy points, out, the fonts won’t render identically – you’re looking for fonts that approach one another as rough substitutes for your font of choice. The general thinking is that the fonts become “rougher” substitutes the farther you go down the line. Tahoma does give a fundamentally different feel than Arial, and I would never use Tahoma as a substitute for Arial – but because of the realities of the font usage stats, I would readily use Arial as a substitute for Tahoma.
This is exactly backwards! Let’s take Watershed’s dilemma as an example. Arial can be considered a “popular universal Web font,” with over 90% penetration on the general run of machines out there, and Helvetica far less, being primarily a Mac font with light penetration in Linux and Windows user groups. If you do this stack:
Arial, Helvetica, sans-serif;
you’re making a command decision that virtually all your site users will see the site in Arial. It’s all but pointless to put Helvetica in the stack at all, as a relatively small number of users will have Helvetica but not Arial on their machines. Far better to do this:
Helvetica, Arial, sans-serif;
Now your users with Helvetica get to see your site in that font; only the ones without Helvetica have to fall back on Arial. A vanishingly small number of users won’t have either font and will see it in some godawful antique bitmapped sans-serif that is their default, but you can’t help that.
You’re going from smaller to larger audience numbers down the stack:
few users, more users, most everyone, fallback generic to catch the strays
A lot of sites will do something like this:
Chalet, "Helvetica Thin", Helvetica, Arial, sans-serif;
You (probably) don’t have Chalet on your machine, and neither do I. It’s a lovely sans-serif and I’d love to design a site around it, but probably 1% or less of your visitors (assuming you have a more varied audience and not an audience of, say, Chalet fans or typophiles) have it. So you give that fortunate 1% the lovely font, you give Helvetica Thin as a close approximation for a few more users, you give the less fortunate Helvetica, and you give the great unwashed Arial. By the time you work your way down to Arial, the “universal” font, I’d guess you’ve covered around 99+% of your audience. You can’t do much better than that in practical terms.
Doing something like this:
Chalet, sans-serif;
is just being obstinate. 
Actually, that was exactly my point. For consistency, these stacks are pretty much pointless. Consistency in presentation, especially in a commercial context, is very important.
Consistency to the degree you seem to be advocating is a near-impossibility on the Web. You absolutely need to consider the letter heights, widths, drops, and so forth from one font to the next in a particular stack so as to ensure maximum consistency (that’s why you wouldn’t put, say, Verdana and Tahoma in the same stack), but you simply cannot ensure that every user is going to have the font you’re designing around, even if you stick to the “web-safe” fonts that have the widest penetration. These are the ones:
Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana
Take out the ones you wouldn’t normally design around, and you’re left with:
Arial, Georgia, Times New Roman, Trebuchet MS, and Verdana
Not a bad selection for a font base – a narrow sans-serif, two wide sans-serifs, a narrow serif, and a wide serif, to break them down by a very rough criteria – but not a lot of room for experimentation or artistic creativity.
If you’re designing strictly from a business standpoint, then you will want to stay pretty much with these fonts, maybe fleshing out just a bit (Helvetica before Arial, Geneva before Verdana, that kind of thing). But all of us don’t focus primarily on a corporate/business design paradigm. If you’re designing a corporate intranet site where you can be fairly sure every machine in the corporation has the same set of fonts on the same size and make of monitor display, then you’re good to go, you can use
font-family: "Our Corporate Font";
and move on, singing hallelujahs to the board of directors and counting the days until the stock splits. But when you’re designing for the wilder, woollier world as a whole, consistency is one thing you always strive for but never actually achieve. You can’t be rigid in your approach.
Well, all I’m really advocating is putting the most universally supported core Web fonts first if consistency is a higher priority than artistic expression. All of these stacks prioritize less common and most likely less consistent fonts over the ones you know will be present on 90% of computers out there.
If you’re designing strictly from a business standpoint, then you will want to stay pretty much with these fonts … But when you’re designing for the wilder, woollier world as a whole, consistency is one thing you always strive for but never actually achieve.
Yes I think you hit the nail on the head here – that’s all I’m really getting at. Just seems an important point to consider before throwing these into use.
Your point is valid. If your priority is consistency, then you choose a universal font from the outset and design around that. In some ways, it makes your design choices simpler. I just prefer more variables and more options, and I’m willing to live with the loss of consistency.
some of the links in the above comments for more info on font sizing methods and practices. The general thinking is that the fonts become substitutes the farther you go down the line.