So, What Size and Type of Font Should I Use on My Website?

By Michael Bernard & Melissa Mills

By far the two most common types of fonts currently used on the Web are the serif font, Times New Roman (TNR) and the sans serif font, Arial. The question is, which one is more legible and at which size? In the past, it has been determined that serif fonts, which have ornamental strokes at the tip and base of each letter, are easier to read on paper than sans serif fonts, which do not have serifs. This is because it is believed that serifs help distinguished each individual letter (Albers, 1963). However, this benefit may be reduced or even eliminated on computer screens because of their display particularities, like poorer screen resolution and aliasing or “jaggies,” as it is commonly known.

The use of anti-aliased text, which is seen in documents that use formats such as Adobe’s PDFTM, as well as ‘smoothed’ text from graphical files like JPEG, attempt to smooth out jagged edges that are seen with common dot matrix fonts. Anti-aliased formats are an attempt to make the text more legible, however this smoothing can tend to blur the text to some degree, thus possibly making it less legible for specific types and sizes of fonts than dot matrix fonts. The question we asked in this study was as follows: What font type (TNR or Arial), what size (10- or 12-point), and what text format (dot matrix or anti-aliased) is most readable and most preferred by web readers?

This study examined TNR and Arial fonts for readability (accuracy in reading text material), reading time, perceptions of font legibility and sharpness, as well as general font type/size/format preference. To accomplish this, we used an IBM compatible computer and chose a monitor resolution of 1024 x 768 to reflect the current trend towards higher resolutions (GVU, 1998).

After passing a Snellen near acuity test for 20/20 vision, participants were positioned at a fixed distance from the computer screen. They were then asked to read eight passages, which were ordered by means of a Latin square design. The passages were taken from Microsoft’s electronic library, EncartaTM which were written at approximately the same reading level, discussed similar topics (all the passages dealt with psychology-related material) and were approximately the same length (an average of 1041 words per passage, with a standard deviation of 25 words).

Participants (N = 35) were asked to read the passages “as accurately and as quickly as possible.” As they read, they were to find fifteen randomly placed substitution words that replaced the original words in the passages. The substituted word rhymed with the original words, but varied grammatically. For example, the noun “sun” would be replaced with the adjective “fun” and would clearly be out of context for the passage if it was read carefully. Participants were instructed to identify errors by speaking the incorrect word as they saw them.

Results

Results from the study found no significant differences in the detection of errors within the passages. However, when we examined the time taken to read each passage, we found some differences in speed. The fastest time came from the 12-point TNR (M = 365 sec.) and 10-point Arial (M = 368 sec.) fonts. The slowest time came from the 10-point anti-aliased Arial (M = 400 sec.) font. In fact, there was over a half-minute difference between the fastest and slowest fonts in reading the relatively short passages. However, statistically we found only a marginal main effect for speed [F (1,7) = 1.76, p <.09] between the 12-point TNR font and the 10-point anti-aliased Arial font (see Figure 1.).

Reading Speed in Seconds

Figure 1. Reading Speed in Seconds

Measuring the participants’ perceptions about their reading experience on a seven-point scale found that the 12-point Arial (M = 5.7) font was considered to be the most legible, followed by the 12-point TNR (M = 5.6) and the 12-point anti-aliased Arial (M = 5.6) fonts. There was, however, only a significant difference in perception of legibility between the 12-point TNR and the 10-point anti-aliased TNR fonts [F (1.7) = 3.63, p <.001] (see Figure 2.)

Perceived Legibility of the Fonts

Figure 2. Perceived Legibility of the Fonts

The 12-point anti-aliased Arial (M = 4.8) and 12-point Arial (M = 4.7) fonts were also considered the most sharp, while the 10-point anti-aliased TNR (M = 3.7) font was considered the least sharp (see Figure 3). These two fonts were the only ones that were significantly different from the least sharp,10-point anti-aliased TNR font [F (1,7) = 3.27, p < .001].

Perceived Font Sharpness

Figure 3. Perceived Font Sharpness

In determining the mean preference choice (1st to last) between all of the font sizes, types, and formats, we found that the first choice was the 12-point Arial (M = 2.34) font, followed by the 12-point TNR and the 12-point anti-aliased Arial (M = 2.63 for both) fonts. Together these fonts were significantly preferred over the other fonts [ c 2 (7, N = 35)= 137; p < .001]. The 10-point anti-aliased TNR (M = 0.63) font was the least preferred, significantly less than all of the fonts except the 12-point anti-aliased TNR and the 10-point TNR fonts (see Figure 4.).

Mean Font Preferences -from 1st choice (at left) to 8th choice. The shorter the bar, the more preferred.

Figure 4. Mean Font Preferences -from 1st choice (at left) to 8th choice. The shorter the bar, the more preferred.

Examining only the participant’s first and second preference choices, we saw an even greater tendency to choose one of the three most popular fonts as the most preferred. The 10-point TNR font was not ranked first or second by any participant (See Figure 5).

Percentage of Times a Font was Chosen as First or Second

Figure 5. Percentage of Times a Font was Chosen as First or Second

CONCLUSION

Taking these results into consideration, it could be argued that there is a slight advantage for the12-point Arial font over the12-point TNR font for the best font choice for reading text on the Web. The 12-point Arial font was the most preferred (though not significantly preferred over the 12-point TNR font) and was perceived as being the most legible and sharpest font by the participants. Also worth noting was the finding that the 12-point anti-aliased Arial font tied for second in preference, as well as being judged as the third to most legible font presented. Thus, if a website is to have anti-aliased text, then it is recommended to be 12-point Arial.

The 12-point TNR font, however, was the fastest font to read, was the second to most preferred (along with 12-point anti-aliased font), and was perceived as the second to most legible. Though not found in this study, previous studies have found serif fonts to promote greater reading comprehension than sans serif fonts, such as Arial. For example, a study by Boyarski, Neuwirth, Forlizzi, and Regli (1998) found small but significantly higher levels of comprehension for a serif font (Georgia) over a sans serif font (Verdana). However both Georgia and Verdana were designed for the computer screen, whereas TNR and Arial were not.

Yet, as seen in Figure 4, other than the 12-point TNR font, the TNR fonts were the least preferred. One reason for this could be that at smaller font sizes on computer screens, the serifs stop acting as distinguishers and start becoming visual ‘noise.’ Moreover, small anti-aliased fonts may create even more visual noise because of the smoothing effects of the anti-aliased font. This would explain the very poor performance of the 10-point anti-aliased TNR font.

It is interesting however that in our study we found that 57% of the participants used 12-point TNR font as their everyday font default, whereas only 8.6% used 12-point Arial font as their default (another 8.6% used 10-point TNR font, 2.9% used another font as their default, and 22% didn’t know what their default font was). It is hard to say if the default font had any familiarity influence on the preference choice – if it would, it should, of course, favor the TNR font. We did learn that some of the participants stated that they had TNR as their default font but chose Arial as their preference after the study.

References

Albers, J. (1971). Interaction of color. Yale University Press: New Haven

Boyardski, D., Neuwirth, C., Forlizzi, J., & Regli, (1998). A study of fonts designed for screen display. CHI 98 Conference Proceedings, 87-94.

Microsoft® Encarta® Online Encyclopedia 2000

http://encarta.msn.com © 1997-2000 Microsoft Corporation. All rights reserved.

Georgia Tech Research Corporation. GVU’s WWW User Survey Retrieved July 2000 http://www.gvu.gatech.edu/user_surveys/

Tagged with: , , , , , , , , , ,
Posted in Usability News
Subscribe to SURL

Want to receive notifications when SURL has new articles? Please enter your name and email address to subscribe to our website.

Popular Topics in Usability News
Log in/Sign Up
%d bloggers like this: