Research

One of the unique challenges of designing for the web is knowing what font size is ideal for readers. Creating a large default font-size wastes precious screen space. In contrast, having too small font means that viewers might skip over your page in disgust or expand the text via their browser and throw off the page's design.

Research shows that larger font size increases readability, especially reading speed. Bernard, Liao, and Mills(2001) found that older adults read both serif and sans-serif fonts faster with 14 point font than with 12 point font. In a later study, Bernard and Mills'(2003) found that their study participants, who were not segmented by age, preferred 12 point to 10 point font regardless of whether it was serif or sans-serif. In a later study by Bernard's research group, the evaluators found again that the smaller the font, the slower the reading time (Bernard 2002).

Font Size(Pt.)
10 Test
12 Test
14 Test

An expert evaluation and usability test with senior Web users found that older adults are very sensitive to font size on a page. The senior adults were charged with performing tasks such as finding specific information. The study measured learnability, efficiency, error rates, and user satisfaction. For older adults, the researchers found that it is necessary to have a font size of 12 to 14 point font with space between lines (double spacing). However, the researcher also suggested that font color may be an even more important determinant of readability than font size. In addition to preferring 12 to 14 point font, older adults preferred dark typeface with a medium or bold weight against a white background (Nahm, 2004).

One problem with font size is that a font may look good at a large size and terrible at a smaller size, or vice versa. This is due to complications in scaling and rasterizing at lower resolutions (Shamir, 1997). When designing for the web, designers should make sure that the fonts they use are scalable and look appropriate and larger and smaller sizes. Below, you can see how a small and large x in Times New Roman look different.

x

Guidelines