3.3 Use a readable font that’s at least 16 pixels.
The font you choose is important because it affects your site’sreadability. Below, we list the most important elements that contributeto making a font readable.
Size
Choose a font that’s at least 16 pixels, or 12 points. If many of yourusers are older adults, consider using an even larger font size—19pixels or 14 points.6,24 A small font size is moredifficult to read, especially for users with limited literacy skills andolder adults.
Quote
“I like when I can read the words without myreading glasses.”
Set up your site so that users can adjust the size of the text on thepage.24 Web designers can make this possible by using what’s calledrelative type size. However, it’s still important to test out yourwebsite with different font sizes to make sure it’s still easy to readand navigate. Always check how your content looks on a mobile device, aswell—newer, high-resolution screens that render more pixels per inch canmake text look smaller.
Figure 3.3
NIH SeniorHealth includes a toolbar on every page that allowsusers to change text size and adjust color contrast (colored text on ablack background).
Source: http://nihseniorhealth.gov/ homepage
Simplicity
Unusual fonts with unnecessary flourishes can be hard to read. Choose amainstream font that will feel familiar to your users.30
It’s easier to read text printed in simple, familiar fonts likeVerdana.
Example
Lucida Handwriting
“Regular physical activity is good for your health. Get tips to help youget more active.”
Verdana
“Regular physical activity is good for your health. Get tips to help youget more active.”
Also, while you can use a different font for headings and body content, don’t use more than 3 fonts on a page. Use fewer, simpler fonts to make your page look more cohesive.55
Serif or sans serif?
There’s been a lot of debate about which type of font is easier to readonline—and overall, the research is inconclusive.30,56However, some evidence suggests that serif fonts may make reading on theweb more difficult for users with readingdisorders.56,57
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 seriffonts are Arial, Calibri, or Verdana.
The bottom line: Choosing sans serif fonts is best practice when writingfor the web.24,57,58 Use a familiar sans serif font likeVerdana, Lato, Open Sans, Proxima Nova, or Source Sans.
Line height
Line height (also called leading) is the vertical distance between linesof 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)
Some word processors—and many web design programs—will give you evenmore options.
To maximize readability, use a line height that is 130% to 150% largerthan the font size.56 This helps keep users with limited literacyskills from losing their place in the text as they start reading a newline—and makes it easier for them to use their fingers to help keeptheir place.
Example
It’s best to specify leading of about 140% (the middle optionbelow).59
100% Leading
“Making small changes to your eating habits can make a big differencefor your health. Here are some tips and tools you can use to getstarted.”
140% Leading
“Making small changes to your eating habits can make a big differencefor your health. Here are some tips and tools you can use to getstarted.”
200% Leading
“Making small changes to your eating habits can make a big differencefor your health. Here are some tips and tools you can use to getstarted.”
Line height is also an important consideration for mobile users. Whenparagraphs or bulleted lists include multiple links, extra heightbetween lines helps ensure that users have enough room to tap the itemthey want.60
