Building a Fluid Font Stack

In Chapter 3, “Fonts & Typefaces,” we explored the many ways to find typefaces for use in your Web designs. One of the prime tenets of fluid Web typography, though, is that things change, and you cannot assume that the first font you choose is the one in which the end user reads your text. Many variables can contribute to this uncertainty, but the solution is to be prepared, by creating a fluid font stack with backup fonts.

It is important, however, when putting the font stack together to choose fonts that not only look similar but behave similarly on the page. Here are a few of the most important considerations.

Find screen-friendly fonts for body copy

Although you may have a candy store of fonts to choose from now, some are more legible at body copy sizes (16px or below) than others. Two factors to consider with the legibility of a font are its x-height and letterspacing. A font with a taller x-height will generally be easier to read on the screen. Additionally, if you can find fonts whose characters are slightly spaced apart, they will not clash with each other on the screen. If you need to, add a small amount of letterspacing or word spacing to headlines or body text:

							h1, h2, h3, h4, h5, h6
						
						
							{
							word-spacing: .1em;
							}
						
						
							p  {
							letter-spacing: .03em
							}
						

Use fonts with similar widths and kerning

Because headlines generally have a confined height—you don’t want the headline to take up more than a certain horizontal space in the design—choosing fonts with similar widths will ensure that one font will not take up much more space if used than any of the fallbacks.

Body copy may need to occupy a specific column width for readability, so choosing typefaces with widths and kerning will ensure that one does not take more vertical space than any of the alternatives.

Test your fonts, by placing them one after another and comparing lengths (for headlines) and heights (for body copy). There is a certain amount of variation that can occur, but you don’t want any font to be off from the others by more than 2em over the width of the line.

Make sure that a typeface includes all of the weights and styles you need

Although there are ways to style around it, you should make sure that if you are using the bold, italics, and/or oblique versions of a typeface in your design, the typeface supports these styles. Otherwise, the browser will likely synthesize them, which rarely looks good.

One way around this is to specify different typefaces or different styles rather than bold or italics. For example, rather than using a heavier font for the bold or strong tags, you could set font-weight to normal and use all caps or small-caps:

							b, strong {
						
						
							font-weight: normal;
						
						
							font-variant: small-caps;
							}
						

Use this technique sparingly, as it can create a strong typographic voice that may not be desired.

Download fonts as needed, but consider download times

Although downloading fonts allows you to add typefaces without images, you are still downloading files, which can slow down your Web site. Check the list of Web safe fonts first to see if one of those meets your needs before resorting to the download. However, you will always want to put your linked fonts first, since whether you use them or not, the file is still downloaded.

Include Web safe, core, and generic font-family backups

Include a list of multiple fonts, starting with linked fonts, then Web safe fonts, then core Web fonts, and finally a generic font family. This will ensure that the fonts you most want to be used are tried first, and then the fallbacks are tried, all the way down to the default generic font that the browser has on hand. Obviously, you can include as many different font families of each type as desired.