The font you choose is important because it affects your site’s readability. Below we list the most important elements that contribute to making a font readable.
Size
Choose a font that’s at least 16 pixels, or 12 points. If you’re creating content for older adults or people with vision problems, consider using an even larger font size — 19 pixels or 14 points.23, 53
You can also set up your site so that users can adjust the size of the text on the page.53 Web designers can make this possible by using relative type size. But it’s still important to try out your website with different font sizes to make sure it’s easy to read and navigate. Always check how your content looks on a mobile device, too — high-resolution screens that render more pixels per inch can make text look smaller.
Figure 5.5: This page includes a button to allow users to adjust the text size based on their preference.
Simplicity
Unusual fonts with unnecessary flourishes can be hard to read. Choose a mainstream font that will feel familiar to your users.54
Example
Simple font:
Regular physical activity is good for your health. Get tips to help you get more active.
Unusual font:
It’s easier to read text printed in simple, familiar fonts like Verdana.
Also, while you can use a different font for headings and body content, don’t use more than 3 fonts on a page — too many fonts can keep a page from looking cohesive.105
Serif or sans serif?
There’s been a lot of debate about which type of font is easier to read online — and overall, the research is inconclusive.54, 106 However, some evidence suggests that serif fonts may make reading on the web more difficult for users with reading disabilities like dyslexia.106, 107 That’s why it’s best to choose sans serif fonts when writing for the web.53, 107, 108 Pick a familiar sans serif font like Verdana, Lato, Open Sans, Proxima Nova, or Source Sans.
- Serif fonts have “arms and feet.” Examples of serif fonts are Times, Garamond, and Georgia.
- Sans serif fonts don’t have “arms and feet.” Examples of sans serif fonts are Arial, Calibri, and Verdana.
Figure 5.6
Line height
Line height (also called leading) is the vertical distance between lines of text. Common line heights in word processing include:
- “Single spaced” (line height of 100%, equal to the font size)
- 1.5 lines (line height of 150%, equal to 1.5 times the font size)
- “Double spaced” (line height of 200%, twice the font size)
To maximize readability, use a line height that is 130% to 150% larger than the font size.106 This helps keep users with limited literacy skills from losing their place in the text as they start reading a new line.109
Figure 5.7
Line height is also an important consideration for mobile users. When paragraphs or bulleted lists include multiple links, extra height between lines helps ensure that users have enough room to tap the item they want.
