8 Definitive Web Font Stacks

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, anddecorative 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
dont 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 designers 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 arerelatively 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 Ive 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. Im happy
to update this article with changes if theres 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 youre after a
disjointed or modern feel, try using font sizes that are further apart on the scale.
Andy Hume

Rationale behind the Stacks

Its true that there are an unusually large number of fonts in most of the stacks, but
theres a reason for this: therell be a huge disparity of what people are likely to have on
their machines. Its 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
Ive 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 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 youll 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 youre actually styling.
What works beautifully for a header might well strike out as body text. Yes, its 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.

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 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. Lets pick it apart and see why it is what it is.

We begin with Frutiger/Frutiger Linotype a personal choice that I know isnt on the
machines of many casual users, though it is well known to graphic designers. (Frutiger
Linotype is Microsofts version of the standard Frutiger font.)
Since most users wont 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 ofMyriad, an Adobe font that Mac has adopted to replace the old
warhorse, Garamond. (You know the Myriad Pro font; its used for the older iPod logo.)
Next we have a raft of similar Linux fonts that depend on the Linux users 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 inTahoma 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 its important for you to decide whats best for your purpose; combining
humanist and realist/classical typefaces might be suitable. You can start delving into
this subject on Wikipedia.

Dont 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 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 youll 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, Ive done much of the hard work for
you in this article.

With the font stacks listed here, your sites 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.)