By: Michael Tuck

January 8th, 2009

Reader Rating: 9

“Web design is 95% typography.”—Oliver Reichenstein [1]

“Typography is not ‘picking a cool font.’”—Jeff Croft [2]

“Typography is ... about shaping text for optimal reading experience.”—Oliver Reichenstein [3]

Over the last few months, I’ve spent more time than I intended on exploring the whole idea of fonts and typography for the Web. (My friend, typography expert Simon Pascal Klein [4], writes, “The former is a stylized set of glyphs of characters,” while “the other [is] the whole art of creating type and setting it into the written word.” For more clarification and illumination, consult Jon Tan [5] and Mark Simonson [6].)

In the process, I’ve been considering the idea of font stacks—using the well-known font-family CSS property—to list as many different fonts as possible in order to optimize the web site experience for a maximum number of users.

What About User Preferences?

There’s a strong argument for leaving well enough alone, and simply specifying serif or sans serif fonts, thus letting the user’s own settings determine the font display. I can understand this philosophy, but personally I prefer exerting more control over the display of my sites.

Fonts matter more than we may realize; they’re as important a choice in determining the visual impact and informational flow of a web page as the color scheme or the navigation layout. And as a designer (even an admitted amateur), I’m unable to leave these crucial elements to whatever settings a user may have.

Different Categories of Fonts

Of course, there are more distinctions among typefaces than just the presence of a serif. The traditional categories, especially for web use, are: serif, sans serif, monospace, cursive/script, and decorative or “fantasy” fonts, which are useful primarily in snazzy graphic creations.

Daniel Mall [7] has a useful list of categories for his typeface collection, including pixel (the really little guys), symbol (Wingdings), and blackletter (used in medieval manuscripts and heavy metal bands). I list these because a lot of very capable web designers are simply unaware of what exists beyond serif, sans serif, and monospace.

In fact, this is how I also viewed typography for years, until I came to understand that the more you learn about typography as a designer, the more informed choices you can make, and the better your sites will be. Rather than an afterthought, your typographical decisions should be at the forefront of your design, navigation, and structural choices in any site you design. The difference good typography makes in a site are often subtle, but equally profound.

Expanding Your Typographic Options

The idea behind creating recommended font stacks is simple: since most web designers don’t know a great deal about font selection and typography for the Web, and have far too much on their plates to spend the time needed to learn, they need a one-stop shop of font stacks that provides a wide variety for all platforms—Windows, Mac and Linux.

Additionally, those designers who do understand enough about typography may feel like their creativity is limited by the restrictions of the standard “web safe” set of fonts. Using font stacks is one possible way of increasing a designer’s options.

The font stacks listed here are grouped together by the universal font that forms the base of that stack. A designer can therefore decide on a typographical look for their site, grab the appropriate font stack, and tweak it to suit their needs.

I hope that readers use this as a springboard for their own typographical research and experimentation, developing their own stacks to suit themselves and the needs of their site users.

Introducing the Stacks

Eight font stacks are listed, combining Windows, Mac, Linux, and Adobe fonts in groups that are relatively similar among themselves. Each stack takes the following format:

exact font, nearest alternative, platform-wide alternative(s), universal (cross-platform) choice(s), generic

A second structure is also listed—one that will often conflict with the first structure:

Windows fonts, Mac fonts, Linux fonts, universal, generic

In this article I’ve listed three serif stacks, four sans serif stacks, and a monospace stack. Of course, the idea that these might be definitive is laughable, the title of this article notwithstanding. They are merely a starting point for experimentation. I’m happy to update this article with changes if there’s a strong enough argument to do so, and welcome your feedback in the comments.

Here are the font stacks as they currently stand. Copy and paste as you will.

The Times New Roman-based serif stack:

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

A modern Georgia-based serif stack:

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

A more 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;


The 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;

The 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;

The 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;

The heavier “Impact” sans serif stack:

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

The 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;


“A good rule of thumb is that the closer to one another are the font sizes of the various levels, the more elegant the overall impression will be. If you're after a disjointed or modern feel, try using font sizes that are further apart on the scale.”
—Andy Hume [8]

Rationale behind the Stacks

It’s true that there are an unusually large number of fonts in most of the stacks, but there’s a reason for this: there’ll be a huge disparity of what people are likely to have on their machines. It’s better to use a more common font as an approximation than going back to the generic, fallback serif or sans serif choice. There are also a lot of Linux fonts towards the bottom of most of the stacks, mostly because different flavors of Linux provide different fonts for their users.

A lot of fonts undergo name changes over the different operating systems, which is why I’ve listed them all; for example, Palatino, Palatino Linotype, Palladio, URW Palladio L, and Book Antiqua are all (more or less) the same font.

Additionally, some thought has been put into which variants have a larger Unicode character family, and which then precede its cousin in its stack (kudos to my friend, Tommy Olsson [9] for reminding me of this important font element).

As noted above, 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—they are as close to universal as you can have. Certainly you’ll want to reorder these stacks to suit the needs of your site and its regular users.

Of course, your font stacks will be largely determined by what you’re actually styling. What works beautifully for a header might well strike out as body text. Yes, it's obvious, but how many sites have we visited (or be honest, created) that violated this caveat?

I once designed a site for a high school mythology class that used an ancient Greek typographical font (the name of which escapes me now). I thought that since the Greek typography looked so good in the headers, it would also complement the body text. That decision lasted all of thirty seconds. As I remember, the body text ended up presented in Verdana—a much more readable choice.

How Similar is Similar?

Klein has noted that grouping fonts according to their aesthetics (type and angle of stroke, proportions, “looks like Georgia,” “looks like Arial”) may be unhelpful in some instances. Even similar typefaces often have distinct differences; for example, he notes that Garamond is a different typeface family from the ITC Garamond family, even created by different designers [10].

Also, fundamental aspects such as weight, width, and height need to be considered, such as the swing from “Baskerville to Georgia, with the former having a much lighter, smaller appearance.” You may want to take a good long look at the fonts that are listed as “similar” to one another and make your own choices.

In a related item, Vivien from Inspiration Bit [11] points out that the Garamond stack is too large for a designer to penetrate the Garamond fonts and suggests the stack should be split into two. I can see that perhaps a Palatino-driven stack and a Garamond-driven stack, with some necessary overlap, might be an acceptable alternative worth exploring.

A Case Study: The Helvetica/Arial Sans Serif Stack

The Helvetica/Arial stack is one of the largest, and seemingly most haphazard, of stacks. Let's pick it apart and see why it is what it is.

• We begin with Frutiger/Frutiger Linotype—a personal choice that I know isn't on the machines of many casual users, though it is well known to graphic designers. (Frutiger Linotype is Microsoft's version of the standard Frutiger font.)
• Since most users won't see that font displayed, we work down to Univers, a Mac font for older computers.
• About half of Windows users have Calibri, the Vista font, so I give that one next.
• We then have two variants of Gill Sans, an older and lesser-known Mac font, and two variants of Myriad, an Adobe font that Mac has adopted to replace the old warhorse, Garamond. (You know the Myriad Pro font; it’s used for the older iPod logo [12].)
• Next we have a raft of similar Linux fonts that depend on the Linux user’s OS.
• Then we come to a popular Windows choice, Tahoma, available on most Macs as well, and a popular Mac font, Geneva. We finish with the almost-universal Helvetica Neue/Helvetica (primarily Mac, with some Linux availability of faux Helveticas).
• And lastly we list Arial (Mac, Windows, and plenty of Linux users) as the final fallback. We end with the generic sans serif term.

As far as typical visitors to our site are concerned, most Mac users will see the display in either Tahoma, Geneva, or Helvetica/Helvetica Neue, while the majority of Windows users will see it in Tahoma or Calibri. Arial is the final alternative for those who have an unusually bare font cupboard.

Note the stack has the virtue of covering almost every option out there before getting to the mainly-universal fallbacks: Tahoma, Verdana, Helvetica, and Arial. Those who have the less widely-distributed fonts will have the site displayed in those fonts. Thus, there is some semblance of order in the apparent chaos of font listings.

Klein states that this stack combines humanist typefaces—Frutiger, Calibri, Gill Sans, and Tahoma—and realist/classical typefaces such as Helvetica. He would separate the two, but it‘s important for you to decide what’s best for your purpose; combining humanist and realist/classical typefaces might be suitable. You can start delving into this subject on Wikipedia [13].

Don‘t Limit Yourself to Web-safe Fonts!

Many designers choose to stick with what are commonly known as web-safe fonts—fonts that can be found on virtually every machine. Admittedly, this is a perfectly defensible decision with obvious benefits, particularly simplicity: pick a web-safe font or two, move on to the next design decision.

I would advance two counterarguments, though.

1. Restricting yourself to this relatively anemic group of fonts is to ignore the thousands of lovely alternatives out there; by selecting well thought-out combinations, you can ensure that 90% or more of your visitors have at least one of the alternative fonts you use for your design.


2. “Virtually every machine” means Windows and Mac, not Linux. Many Linux users have some or all of these fonts, usually from the Microsoft TrueType core fonts [14] package, but many are without them. Indeed, a lot of Linux users prefer their own fonts; after all, part of the point of using Linux is to depart from Microsoft.

Klein argues that with more fonts in your stack and design comes the ever-increasing likelihood of poor fonts being used on which to base a design: “There are hundreds of thousands of fonts out there … [but] only a small number of good typefaces.” Elements of a good typeface include strong aesthetics, well-designed hinting tables, good kerning, provision for different languages, strong Unicode support, and real italic faces as opposed to lame computer-generated italicization. “With more fonts to choose from the chances of picking a poor font is elevated dramatically.

In actual fact, it almost all comes down to the overall typography.” He is correct: more options can create more problems. And those web-safe fonts? They are: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana.

When you weed out the ones you’ll probably reject as mainstay font choices (Arial Black, Comic Sans, Courier New, and Impact), you have five—count 'em—five choices. Me, I prefer a bigger selection.

Summary

Font stacks are a useful, practical way of achieving richer, more unique web typography than that dictated by sticking to only web-safe fonts (and without waiting for CSS3 web fonts to gain wide-spread support from browser vendors and font foundries). However, a reliable font stack must take into account a number of factors, not just the number of users that have one specific font installed. Luckily, I‘ve done much of the hard work for you in this article.

With the font stacks listed here, your site’s content can be viewed by more users in more interesting fonts than you may have previously thought possible—all without the integrity of your design being compromised.

I hope you find these font stacks useful, and wish you luck in using them in your designs! (Note: you can see a cut-down collection of the CSS used to implement these stacks here [15].)

[1] http://informationarchitects.jp/the-web-is-all-about-typography-period/
[2] http://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Workshop_Elegant_Web_Typography.pdf
[3] http://informationarchitects.jp/webdesign-is-95-typography-partii/
[4] http://klepas.org/
[5] http://jontangerine.com/log/2008/08/typeface--font
[6] http://www.typophile.com/node/
[7] http://www.danielmall.com/archives/2005/09/01/a_man_of_many_faces.php
[8] http://www.sitepoint.com/article/anatomy-web-fonts/2/
[9] http://www.sitepoint.com/forums/member.php?u=59436
[10] http://klepas.org/2008/10/25/whose-garamond-is-it-anyway/
[11] http://www.inspirationbit.com/
[12] http://forums.macrumors.com/showthread.php?t=266825
[13] http://en.wikipedia.org/wiki/VOX-ATypI_classification
[14] http://corefonts.sourceforge.net/
[15] http://sitepointstatic.com/examples/font-stacks/font-stacks.txt