8 Definitive Web Font Stacks Article

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. 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.)
  • 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.

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 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.)

Go to page: 1 | 2 | 3

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.