Web fonts: Size (and Color) Does Matter

We're talking fonts here

From the Software Usability Research Lab, Dept of Psychology, Wichita State University:

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.
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.

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.

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. 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.

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.

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.

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 conditions—presumably 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.

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.

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.

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.

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

Like it? Share it. (Go ahead, we don’t mind.)