SURL Home


Criteria for optimal web design (designing for usability)

By Michael L Bernard

 How should text be presented within a website?

Evidence suggests that the most commonly used fonts tend to be equally legible at the 12-point size. Comparing five sans serif fonts (Agency FB, Arial, Comic Sans MS, Tahoma, and Verdana), five serif fonts (Courier New, Georgia, Goudy Old Style, Century Schoolbook, Times New Roman), as well as two ornate fonts (Bradley Hand ITC and Monotype Corsiva) at a resolution of 1024 x 768 found no difference in legibility (accuracy/speed of reading) between font types (Bernard, Mills, Peterson, & Storrer, Summer/2001). This finding is supported by other studies (discussed below), which did not find significant differences as well.

This is not to say there is no objective differences between the fonts. In fact, there is some evidence that suggest that some serif fonts promote better comprehension than some sans serif fonts. For example, a study by Boyarski, Neuwirth, Forlizzi, and Regli (1998) found small but significantly higher levels of comprehension for the Georgia font over the sans serif font Verdana by people reading on a computer screen. However, it is really too early to draw any definitive conclusions from this. Studies need to further examine the effect of different fonts on reading comprehension.

Times New Roman has consistently been found to be quicker to read than Arial. However, the differences in reading time generally have been for only 30-40 seconds for a two-page online document (see Figure 1). Thus, for most online documents, these differences will not be that great (Bernard & Mills, Summer/2000; Bernard, at al., Summer/2001). 

Reading time in seconds for 12-point fonts

Figure 1.  Mean reading time in seconds (Longer bar indicated longer reading times)

 
Arial tends to be preferred over Times New Roman.
In fact, as seen in Figure 2, the sans serif fonts, Verdana,
Arial, and Comic were the most preferred online font in the Bernard et al, (Summer/2001) study. The popularity of sans serif fonts in this study has been consistent with other studies examining children (see below), older adults (see below), and participants ranging in age from 17 to 45 (Bernard & Mills, Summer/2000; Tullis, Boynton, & Hersh, 1995). Times New Roman, on the other hand, has been found to have low preference scores in these studies.


Percentage chosen as first or second preference choice

Figure 2.  The percentage of times each font was chosen as the 1st or 2nd preference choice


For anti-aliased fonts, Arial may be the best font choice. Comparing aliased and anti-aliased Times New Roman and Arial fonts at 10- and 12-point sizes found 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 (Bernard & Mills, Summer/2000). The 10-point Times New Roman font was not ranked first or second by any participant (See Figure 3).

Percentage of Times a Font was Chosen as First or Second

Figure 3. The percentage of times each font was chosen as the 1st or 2nd preference choice

 
However, one should use caution in creating anti-aliased text that is based on a graphical image, such as with a JEPG or JIF, because they are "fixed" at a particular font size that may be too small to be read by a certain population of users (i.e., vision impaired). It is therefore recommended that text which cannot be size-adjusted (because it is part of an image, etc.) should be at least 3 mm in height (with is usually the equivalent of 12-point fonts). In addition, all graphics should make use of the alternative text function (alt=" " ) so that users who cannot see the text images can have the text image descriptions presented or read to them by a text reader.

Older Adults are more accurate with, and prefer larger font sizes. They also prefer sans serif fonts over serif fonts. As discussed by Bernard, Liao, and Mills (Winter/ 2001) reading online documents (about 2 pages), older adults significantly preferred the larger, 14-point font size (see Figure 4 below). In this study, serif fonts (Georgia and Times New Roman) were compared to sans serif fonts (Arial and Verdana) at 12- and 14-points. The 14-point fonts were found to be more legible, promote faster reading, and were preferred to the 12-point fonts. Also, at the 14-point size, serif fonts tended to support faster reading (see Figure 4). Examining participants' 1st and 2nd preference choice further shows the popularity of the 14-point size (see Figure 5). 

The sans serif fonts were, however, generally more preferred than the serif fonts. This finding is supported by Sorg (1985), which found that older adults preferred to read Helvetica, which is an sans serif font similar to Arial, compared to Century Schoolbook, which is a serif font. 

Mean reading time in seconds

Figure 4.  Mean reading time in seconds


 

The percentage of times each font was chosen as the 1st or 2nd preference choice

Figure 5. The percentage of times each font was chosen as the 1st or 2nd preference choice. Both 12-point Georgia and Times were not selected as a 1st or 2nd choice. 

 
There is evidence that children prefer sans serif fonts (Arial & Comic) over serif fonts.
For instance, Bernard and Mills (Winter/2001) found that fourth and fifth graders (mean age of 10) significantly preferred the 14-point Arial and the 12-point Comic Sans MS font over font over the 12-point Times New Roman and Courier New fonts. Examining participants' 1st and 2nd preference choice further shows the popularity of the Comic font (see Figure 6 below). No difference in reading speed or accuracy between the font types were found, however. This may be due to the fact that 12-point font sizes and above tend to produce the same level of performance, as long as the font types are designed for legibility.

The percentage of times each font was chosen as the 1st or 2nd preference choice.

Figure 6.  The percentage of times each font was chosen as the 1st or 2nd preference choice.

 
The optimal text line length is dependent upon several factors.
It is commonly recommended that shorter line lengths (about 11 words) should be used in place of longer, full-screen lengths. This is because longer line lengths require greater lateral eye movements, which make it more likely to loose one's place within the text (Horton, 1989; Mills & Weldon, 1987). It also has been pointed out by Horton (1989) that longer line lengths are more tiring to read. Horton recommends that lines should be limited to lengths of around 40 to 60 characters, which is approximately 11 words per line.
A study by Huey (1968) tends to support this in his finding that shorter line lengths or approximately 4" (10 cm) are more accurate on the return sweep than longer line lengths. Moreover, Gregory and Pouton (1970) state that people with poor reading ability performed better when the line length was approximately seven words. This suggests that young readers who have not mastered reading online, as well as readers who have vision deficits, may be most benefited by having shorter line lengths. 

As far as reading time, a study by Youngman and Scharff (1999) found that with 0.5 inch margins, the fastest reaction times were for the shorter, 4-inch (10 cm) lengths over the 6- and 8-inch lengths (15 and 20 cm, respectively). The 4-inch lengths were also preferred over the other lengths. However with no margin widths, the 8-inch line lengths had the fastest overall reaction times. A study Duchnicky and Kolers (1983), found that full screen lengths resulted in 28% faster reading times over lengths of 1/3 of a screen. It was also found that full and 2/3 screen lengths were read significantly faster than the 1/3 screen lengths.

These results suggest a trade-off between faster reading times of the longer lengths and a more preferred reading arrangement of the shorter lengths. Possibly the best arrangement is somewhere between the two. More research needs to be done, however. 

Background textures and colors can affect the readability of text. For example, Hill and Scharff (1999) found that plain backgrounds produce faster search times than medium textured backgrounds. An important determinant, though, is the contrast between the text and the background -- the more textured the background, the greater the contrast should be between them.

Moreover, textured backgrounds that are subtle at true-color (24-bit) settings, often become very noticeable at lower-color settings (i.e., 8-bit), thereby reducing the contrast between the text and the background even further. Thus, if one is to use a textured background, it is recommended to be very careful by testing it in different color settings.

As for color, as long as there is sufficient contrast between the text and the background, many color combinations are possible. However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background. Moreover, a survey by Scharff, et al. (1996) revealed that the color combination perceived as being most readable is the traditional black text on white background. However, it is common for websites (such as this one) have an off-white background in order to reduce the flicker and glare associated with white backgrounds. 

In the Scharff et al. (1996) study, other color combinations that ranked high were white on dark blue and red on yellow. However, one should be cautious in using colors such as red on yellow that are pure or 'saturated.' Saturated colors create visual fatigue and make it difficult to focus on the text. It is best to de-saturate colors by adding white or combining them with other colors. 

The least readable combination were green on yellow, white on fuchsia, red on green, and fuchsia on blue. Also, for all combinations, the lighter backgrounds with darker text was considered to be more readable than darker backgrounds with lighter text.

Approximately 8% of males and a little less than 0.5% of females have a color deficit of some kind. In fact, one study found that around 4% of Internet users are visually impaired in some way (GVU, 1998). Thus, it is important to note that different font sizes and font color combinations can have a dramatic effect on the readability of a site. 

For text colors, it is important to have a good contrast difference between colors that need to be distinguished. Some color combinations generally frustrate users and make it virtually unreadable for color deficit or "colorblind" users (Nielsen, 1996). That is for many color deficit users, red, green, brown, or purple may look the same if these colors have the same contrast. Since color deficit users cannot distinguish between a large spectrum of colors, it is therefore advised to strongly contrast the colors (make sure one color is darker than the other) between the foreground and background, as well as between other colors that need to be distinguished (see Wolfmaier, 1999, for a good description of the proper font-color mixture).

References

To top of page

Software Usability Research Lab
Dept of Psychology
Wichita State University
Wichita, KS 67260-0034

Home |Usability News | HCI Lab | WSU Human Factors | WSU Psychology


Contact: Michael Bernard with questions regarding this site.
Last update: September 30, 2001
URL: http://www.optimalweb.org
Disclaimer and terms of use