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 10-, 12-, and 14-point size. Comparing four sans serif fonts (Arial, Comic Sans MS, Tahoma, and Verdana) and four serif fonts (Courier New, Georgia, Century Schoolbook, Times New Roman) at a resolution of 1024 x 768 revealed no difference in effective reading (font accuracy/speed of reading) between font types (Bernard, Lida, Riley, Hackler, & Janzen, 2002). This finding is supported by Bernard, Mills, Frank, and McKown (2001), 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.

Significant differences in reading time were found in that Times New Roman and Arial were read faster than Courier New, Century Schoolbook, and Georgia. Fonts at the 10-point size were read more slowly than fonts at the 12-point size (see Figure 1). The average difference between the fastest and slowest read font was 99.4 seconds.

Reading time in seconds

Figure 1.  Reading time in seconds (longer bars indicated longer reading times)

Ten-point Tahoma was perceived as more legible than 12-point schoolbook. In addition, 12-point Verdana and Courier were significantly perceived as being more legible than 10-point Comic, Schoolbook and Verdana. Also, 12-point Courier was perceived as more legible than 12-point Schoolbook and Tahoma, as well as 14-point Comic. Interestingly, 10-point Georgia had a significantly higher perception of legibility than 12-point Tahoma and Schoolbook. Fourteen-point Arial was perceived as being more legible than14-point Comic, and 10-point Arial was perceived as more legible than 12-point Tahoma. Moreover at the 14-point size, only Arial was significantly perceived as being more legible than fonts at other sizes (10-point Schoolbook and Comic). Overall, Arial and Courier were considered the most legible fonts, whereas Comic was perceived as the most illegible font (see Figure 2). 

Perceived font legibility

Figure 2.  Perceived font legibility (1 = “Not at all” and 6 = “Completely”)

Overall analysis of the participants’ font preference revealed that Times was significantly less preferred to all fonts except Schoolbook. Schoolbook was significantly less preferred to Verdana. Overall, Verdana was the most preferred font, while Times was the least preferred font (see Figure 4).

Font preference

Figure 4.  Font preference (longer bars indicates more preferred font 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, 2000). The 10-point Times New Roman 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. 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 GIF, 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. 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 (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 6). Examining participants' 1st and 2nd preference choice further shows the popularity of the 14-point size (see Figure 7). 

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 a sans serif font similar to Arial, compared to Century Schoolbook, which is a serif font. 

Mean reading time in seconds

Figure 6.  Mean reading time in seconds


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

Figure 7. 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 (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 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 8 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 8.  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 by 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.

In a recent study by Bernard, Fernandez, and Hull (2002) that compared three links lengths (24.5, 14.5, and 8.5 cm, respectively) for both children and adults supported the finding that shorter line lengths are preferred more than full-screen line lengths. As far as the perception of reading efficiency, the results were mixed. For adults, the Full-length condition was perceived as providing the optimal amount of scrolling in comparison to the two other conditionspresumably because this condition required the least amount of scrolling. The Narrow-length condition was perceived as promoting the highest amount of concentration, while the Medium-length condition was considered to be the most optimally presented length for reading.

Overall 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) to 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).


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: February 08, 2003
Disclaimer and terms of use