I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.


css / typography

Estimated reading time: 2 minutes, 52 seconds

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 / best-fit”, 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; }

Letterform componentsThe 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 (yes, I’m serious), they are security risks, and bad design choices.

    Further Resources has a good crash course in font basics.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.