Hiring the experts to help me write and to build a design around my message was a no brainer. It was an amazing transformation when Sisarina took my words and my thoughts and my services and explained them to me and my clients so simply through my website.- Quincy CFO, Kelly Jennings

by Mike Guill, 107 Designs (@107designs)

The Part Where We Talk About Graceful Degradation

In an ideal world, we’d all have the latest standards-compliant web browsers, running on fast computers with giant, glossy, crystal-clear monitors. However, this is the real world, and any one of the following things can throw a major wrench into a website layout:

  1. Older hardware
  2. Handheld devices
  3. Corporate rules/policies
  4. Personal choice (I know, right?)

What’s a (web) designer to do, then? Surely there must be a bulletproof way to employ some really nice typography without getting our elbows too dirty. Luckily, there is, and it’s as simple as leaving a set of fall-back rules for devices that just don’t see eye-to-eye with you and your vision of a beautiful web. These rules are called font stacks.

What Is a Font Stack, Anyway?

Simply put, a font stack is a list of fonts for the browser to attempt to use, ranked by order of importance. The stack is made up of font names, separated by commas, and placed in your Cascading Style Sheets (CSS). These font stack rules need not be applied to an entire page, they can instead be written to apply to a certain heading or subtitle, for example, just as any other CSS selector can target specific elements.

It’s Just Text. Why Bother?

Most people don’t give much thought to what typeface is in front of them until they have a hard time reading it. Typographers, on the other hand, spend a great deal of time considering readability (not legibility, that’s different), and how the reader will be able to get through the content with maximum understanding and minimal confusion. A well-planned, comprehensive font stack can make sure that most readers get to see a very readable typeface, increasing the chances that any given visitor will have better content comprehension and less visual strain. Yes, it’s that important.

The Stacks

Even though it’s a couple years old, this article on Sitepoint is exceptionally good and goes into great detail about the process of selecting fonts and the anatomy of a font stack. For brevity, I’m listing those font stacks here without much explanation other than the base font family, but feel free to explore the article in more detail and even invent your own stacks! (note that font names which have a space in them require the use of quotation marks)

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;

In Conclusion

Well thought-out font stacks make it possible for you to deliver better, more consistently readable pages to your site’s readers, without resorting to image replacement techniques or JavaScript trickery. I sincerely hope this was helpful to at least a few of you.

Please cuss and discuss.

TOPICS

How side projects saved our startup: bit.ly/1pIkfga /via @mikaelcho #startup pic.twitter.com/0AMUU7hne8