Part of the CSS Typography Reading List

CSS Levels 1 and 2 assume that the font specified in a style sheet declaration is installed on the user’s system. This means that while we can specify any font we wish text to be displayed in, we need to create a series of increasingly common fonts as fallback positions. The order is: 

font-family: ideal, alternative, common, generic;

While there should be a minimum of two fonts and one generic font-family, the designer can specify as many fonts as they wish as a cascading series of less-ideal choices; as a result, long font declarations are not uncommon:

p {
	font-family: Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif; 
}

The greatest challenge to designing a good font stack is that there is no one font that is absolutely guaranteed to be on every system. The list of available fonts changes with operating system platform (some fonts are shared between default installations of Windows and OS X, and some are not), operating system version, (Windows 7 introduced 48 new fonts, and those still running Windows XP are unlikely to have access to a font like Gabriola), application installation (Adobe CS6 installs its own suite of fonts), and even software philosophy (Linux users have their own, copyright free fonts that are replacements for commercial fonts).

It is possible to avoid this problem entirely by laying out your text in a program like , then exporting it as a bitmapped image, placing the image of the text on your page. That, however, immediately causes several problems:

  • To make any changes to text you must return to the PhotoShop work, make your changes, re-export the image, re-import it into the web page, and upload the altered files, raising amount of time required for any changes by several orders of magnitude .
  • Long phrases of bitmapped text cannot be indexed by search engines.
  • Images are, outside of the alt attribute value, not semantic.
  • Bitmapped text cannot be copied by the user (important for gaining name and contact information, for example).

However, there is one case in which bitmapped text might be appropriate for use on a web page. If the text is a heading that is only used once or twice per page, and if the text used is not one of the top 20 most commonly installed fonts, then exporting it as a bitmap makes sense, so long as you keep the principles of semantics, search ability and graceful degradation in mind. I’ve provided an example of that in a previous entry.

Let’s assume that none of the conditions I have just mentioned are true, and that you want to design a font stack for heading or body copy. First, let’s establish some rules:

Typographical Ground Rules

  1. Never use more than three typefaces per page. A confusion of fonts and font styles creates a distracting design mess. Use different font weights, capitalization and obliqueness for text variation and emphasis, rather than using a new font.
  2. Ensure that fonts are readable by human eyes of differing ability: use high-contrast colors and avoid small font sizes. (There is an interminable debate over whether serif or sans-serif fonts are more legible. I am not going to wade into that particular morass.)
  3. Do not use blinking, flashing, or moving text. Aside from possibly causing seizures, they are security risks, and bad design choices.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.