How to Pick Font Families

How to Decide Which Font Family to Use

A pair of hands arrange letters for letterpress
(Photographer Kris Kr?g/Getty Images)

One of the easiest ways to affect the design of a web page is with the fonts that you use. But many beginning web designers often go crazy changing fonts every couple words and experimenting with fonts that are virtually unreadable, just because they are “cool.” This article will help you find the font family that works best for your situation.

Some Rules-of-Thumb

  1. Don’t use more than 3–4 fonts on any one page.
  1. Don’t change the font in mid sentence unless you have a very good reason.
  2. Use sans serif fonts for online body text and serif fonts for headlines and print.
  3. Use monospace fonts for typewriter text and code blocks.
  4. Use script and fantasy fonts for accents.

Remember that these are all suggestions, not hard and fast rules. But if you're going to do something different, then you should do it with intention, not by accident. For example, it's fine to use a serif font as your body text (as many sites do) as long as you're aware of the possible legibility problems.

Sans Serif Fonts Are the Basis of Your Site

Sans serif fonts are those fonts that have no “serifs”—the little hooks on the ends of the letters.

If you’ve taken any print design courses you’ve probably been told that you should only use serif fonts for headlines. This is not true for the web. Web pages are intended to be viewed by web browsers on computer monitors.

And computer monitors don’t have as good of resolution as paper. This means that when your readers view a page of serif font on the screen, the little serifs can blur together and start making the text harder to read.

This isn't true as much now because monitors have much better resolution than they did when the web was young.

But you should always be aware of your audience and make sure that they can read serif fonts before you make the decision to use them for your body text.

Best Practice: Use sans serif fonts for your web page body copy.

Some examples of sans-serif fonts are:

  • Arial
  • Geneva
  • Helvetica
  • Lucida Sans
  • Trebuchet
  • Verdana

Trivia: Verdana is a font family that was invented for use on the web.

Use Serif Fonts for Print

While serif fonts are hard to read online, they are perfect for print and good for headlines. If you have print friendly versions of your site, this is the perfect place to use serif fonts. The serifs, in print, make it easier to read, as they allow people to differentiate the letters more clearly. And because print has a higher resolution, they can be seen more clearly and don’t appear to blur together.

Best Practice: ​Always use serif fonts for your print-friendly pages.

Some examples of serif fonts are:

  • Garamond
  • Georgia
  • Times
  • Times New Roman

Monospace Fonts Take Up Equal Space for Each Letter

Even if your site isn’t about computing, you can use monospace to provide instructions, give examples, or imply typewritten text. Monospace letters have the same width for each character, so they always take up the same amount of space on the page.

Typewriters typically used monospace fonts.

Some examples of monospace fonts are:

  • Courier
  • Courier New
  • Lucida Console
  • Monaco

Best Practice: ​Monospace fonts work well for code samples.

Fantasy and Script Fonts Are Hard to Read

Fantasy and script fonts are not as wide-spread on computers, and in general can be hard to read in large chunks. While you might like the effect of a diary or other personal record that using a cursive font might give, your readers might have trouble. This is especially true if your audience includes non-native speakers. Also, fantasy and cursive fonts don’t always include accent characters or other special characters which limits your text to English.

Use fantasy and cursive fonts in images and as headlines or call-outs. Keep them short and be aware that whatever font you choose will probably not be on a majority of your readers’ computers.

Some examples of fantasy fonts are:

  • Copperplate
  • Desdemona
  • Impact
  • Kino

Trivia: Impact is the font family most likely to be on Mac, Windows, and Unix machines.

Some examples of script fonts are:

  • Apple Chancery
  • Comic Sans MS
  • Lucida Handwriting

Trivia: ​Studies have shown that fonts that are harder to read can help students retain more of the information.