How to Choose Fonts for Your Website
Some fonts don’t work well on websites. Unfortunately, too many fonts exist these days for you to find a complete listing of which ones do and which ones don’t. Also, it’s important to understand that fonts, like fashion, go in and out of style for use on the web (for a quick example of an unfashionable font, just do a search on Comic Sans). But there are some general guidelines to help you select the right fonts for different applications.
Standard versus display fonts in web design
In order to choose the right font for your website, you should be familiar with the different categories of fonts. Generally, you should use standard fonts for pages of body text and reserve the fancier or decorative fonts, often called display fonts, for short headings, callouts, and subheadings.
Standard fonts include Garamond, Times, Georgia, Arial, Helvetica, and Verdana, which were designed for legibility and work well for larger blocks of text. They’re common fonts that many people have heard of. There are a number of fonts, however, that fall into the “standard” category with names that you may not recognize.
Font weights for body copy are usually called Roman, Body, or Regular. Readers aren’t distracted by the design of these classic fonts, enabling them to focus on the text at hand. Standard fonts are designed for easy reading, so they work well in the smaller point sizes and in larger blocks of text.
Fancier fonts, on the other hand, or other weight variants of a font like Bold, Condensed, Semi Bold, Black, and Ultra, have a lot of detail and personality, ideal for larger-set headings and subheadings consisting of a few words. These fonts grab people’s attention, but they aren’t designed for a long page of text. You can often distinguish the decorative fonts just by their names, such as Kid Print, Comic Sans, and so on (see the following figure).
Font thickness on the web
The thickness of each individual letter (or line weight) contributes greatly to a font’s readability. Because pixels on computers aren’t comparatively very small, fonts that are too thin can fade away into oblivion, especially at smaller point sizes.
If you examine any font, you notice that the thickness varies in each letter. For example, take a look at the letter m in the example, below. The letter is set in a few different typefaces for comparison. Some fonts, such as Kepel Bold (the example on the far left), change drastically between the thick and thin areas of a single letter. At a small point size, for the letter m, all you see is a blob of three bold strokes — the thin strokes disappear altogether. When choosing fonts for small-point-size text, therefore, find versions that don’t have a big variance in the stroke thickness. Also, avoid the “lightweight” editions of fonts — they’re too thin to read at a small point size. (Most font families come in a variety of thicknesses, ranging from light for the thinnest of the set to bold, black, and ultra for progressively heavier line weight.)
Serif versus sans-serif fonts in web design
Your font education won’t be complete until you know the difference between serif and sans-serif fonts. A serif is the little ledge that adorns the tips of a letter. Sans-serif fonts, on the other hand, don’t have these ledges. Some modern sans-serif fonts do have little embellishments on their tips, making you look twice, but they’re still considered sans-serif fonts. Both serif and san-serif fonts can be used for larger blocks of body copy. Typically, serif fonts give the page a more conservative, classy, or newsy look, while using san-serif fonts yields a cleaner, more modern feel.
The fonts on the lists all survived the 10-point test: They are all readable when set at just 10 points, which is the smallest font size for text that you should ever consider for body copy in web design (best to set at 11 points at least).
Try mixing serif and sans-serif fonts together. For example, use one style for headings and the other style for the body text. Choosing a set of two to three fonts for your website — one for each different kind of type element — helps to add visual interest to the page, as in the following example.