8 Definitive Web Font Stacks Article

“Web design is 95% typography.” – Oliver Reichenstein

“Typography is not ‘picking a cool font.'” – Jeff Croft

“Typography is … about shaping text for optimal reading experience.” – Oliver Reichenstein

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, 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 and Mark Simonson.)

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