How to Pick Font Families For Your Website

How to Decide Which Font Family to Use

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

Look at any webpage online today, regardless of the size of the site or the industry that it is for, and you will see that one thing they all share in common is text content.

One of the easiest ways to affect the design of a web page is with the fonts that you use for the text content on that site. Unfortunately, many web designers who are early in their careers go a bit crazy by using too many fonts on each page.

This can make for a muddied experience that seems to lack design cohesion. In other instances, designers try experimenting with fonts that are virtually unreadable, using them just because they are “cool" or different. They may indeed be cool looking fonts, but if the text that they are meant to convey cannot be read, then the "coolness" of that font will wear off when no one reads that website and instead leaves for a site that they can process!

This article will look at some of the items you should consider as you choose a font family for your next website project.

SOME RULES-OF-THUMB

  1. Don’t use more than 3–4 fonts on any one page. Anything more than this starts to feel amateurish - and even 4 fonts can be too many in some cases!
  2. Don’t change the font in mid sentence unless you have a very good reason (Note - I have never, in all my years as a web designer, found a good reason to do this)
  3. Use sans serif fonts or serif fonts for body text to make those blocks of content easier to read.
  1. Use monospace fonts for typewriter text and code block to set that code apart from the page.
  2. Use script and fantasy fonts for accents or large headlines with very few words.

Remember that these are all suggestions, not hard and fast rules. If you're going to do something different, however, then you should do it with intention, not by accident.

SANS SERIF FONTS ARE THE BASIS OF YOUR SITE

Sans serif fonts are those fonts that have no “serifs”—the little added design treatment 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 only. This is not true for the Web. Web pages are intended to be viewed by web browsers on computer monitors and today's monitors are pretty good at displaying both serif and sans-serif fonts clearly. Some serif fonts can become a little challenging to read at smaller sizes, especially on older displays, so 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. That being said, most serif fonts today are designed for digital consumption and they will work fine as body copy as long as they are set at a reasonable font size. 

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 can behard to read online for older displays, they are perfect for print and good for headlines on webpage.

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: ​Consider using 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, and using them on your webpage can give you the feel of that typewritten content.

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, so you will need to deliver them using web fonts.

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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 9/8/17