Fonts and User Experience

While editing pages on our current library website, I’ve encountered numerous pages with inconsistent font type, size, and style. We hope to fix many of these issues when the website is migrated to Drupal, but what are best practices regarding fonts and user experience?

There are no definite “best” practices concerning font and usability, but there are a few main areas that a user experience professional should take into consideration:

1. Font size

While the normal font size for most printed material is about 12px, most people sit farther from their screen than a book. The general consensus among web designers is to keep the font between 12-16px, or about .9em. Oliver Reichenstein has a blog post titled “The 100% Easy-2 Read Standard”, where he defends the use of a 16px font size because it is the size browsers were intended to display and the difficult of creating a good website with such a large font will force the web professional to make a simpler, cleaner design.

2. Font

Fonts are broken down into two categories: serif (fonts with small lines that extend from the ends of letters) or sans-serif (fonts without lines that extend from the ends of letters). Serif fonts are usually recommended for headings, or materials that are intended to be printed out on paper. Sans-serif fonts are easier to read on screens and recommended for large bodies of text. Today, most websites usually include Arial, Times New Roman, Helevetica, Georgia, or Verdana. It’s recommended to stay away from most alternative fonts because they might be difficult to read on a screen or the user will not have that particular font on their computer. In a lighter note, Google recently poked fun at the at the Comic Sans font because it is a known font to avoid in web design.

3. Line Height

Web design experts suggest paying close attention to the line height in blocks of text. If the line height is too narrow or too wide, it makes it difficult for the user to read the text. Most designers suggest increasing the default HTML line height between 110-150%.

4. Font Style

Use font styles sparingly and only to emphasize certain words or main ideas. Too many font styles look cluttered and can confuse the user. Underlining text should only be used for headings or URL’s.

5. Font Color

The color of the text should complement the color scheme of the website. Avoid using multiple font colors, which can be difficult to read. As with font styles, font color should be used to emphasize certain words.

Overall, there is no “correct” font type or style. The most important rule a developer should follow is design consistency.