Week 1, Reading 3:

"Better CSS Font Stacks" by Nathan on 6.26.08

One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

When creating a stack, first consider the context of the text. Is it going to be a headline, sub-head, or body copy? This can determine the appropriate order of a stack, considering certain fonts work well for setting blocks of copy, while others work better at larger sizes. Once context is considered, there are few more things to consider when building a stack. First, select your ideal candidate. From there, the path of your choices may fork depending on the context:

Titles [ greater than 12px ]:
font-family: Ideal, Alternative, Common, Generic;

1. Ideal - Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.
2. Alternative - When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.
3. Common - At this point, you just need something similar that is not going to break your layout.
4. Generic - Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.

Paragraphs [ less than or equal to 12px ]:
font-family: Ideal, Fit, Common, Generic;

1. Ideal - Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica.
2. Fit - Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design.
3. Common - Something similar in flavor and well-represented.
4. Generic - Again, finish with the generic classification.