About HFI   Certification   Tools   Services   Training   Free Resources   Media Room  
               
 Site MapWe help make companies user-centric   
Human Factors International Home Page Human Factors International Home Page
Free Resources

UI Design Newsletter – February, 2002

In This Issue

More About Fonts

Bob Bailey, Ph.D.,
Chief Scientist for HFI, asks the question – What is the best font size and font style for Web sites?

The Pragmatic Ergonomist

Dr. Eric Schaffer, Ph.D., CUA, CPE, Founder and CEO of HFI offers practical advice.

HFI's Typography Expert

Dr. Dick Rubinstein, Ph.D.,
Managing Director of HFI gives his perspective.

More About Fonts

Bernard, M. and Mills, M. (2000), So what size and type of font should I use on my Web site? Usability News, July, 2(2).

Bernard, M., Mills, M., Peterson, M. and Storrer, K. (2001a), A comparison of popular online fonts: Which is best and when? Usability News, July, 3(2).

Bernard, M., Liao, C. and Mills, M. (2001b), Determining the best online font for older adults, Usability News, January, 3(1).

Bernard, M., Lida, B., Riley, S., Hackler, T. and Janzen, K. (2002), A comparison of popular online fonts: Which size and type is best? Usability News, January, 4(1).

Boyarski, D., Neuwirth, C., Forlizzi, J., and Regli, S.H. (1998), A study of fonts designed for screen display, CHI'98 Conference Proceedings, 87-94.

Tullis, T.S., Boynton, J.L. and Hersh, H. (1995), Readability of fonts in the windows environment, CHI'95 Conference Proceedings - Extended Abstracts, 127-128.

Tom Tullis and his colleagues (1995) used a proofreading task to evaluate the differences in reading rate between type styles and sizes. They had subjects use Arial, MS Sans Serif, MS Serif and Small Font type styles all at 6, 7, 8, 9 and 10 points. The reading material in this and all of the following studies used a black font on a white background. There was no difference between serif and sans serif fonts; however, the 9-point and 10-point fonts elicited reliably faster performance than the smaller sizes. Subjects preferred the 10-point Arial and MS Sans Serif fonts rather than the MS Serif fonts.

Boyarski, et.al. (1998) at Carnegie Mellon University evaluated the reading speed of people using Georgia (serif), Times New Roman (serif) and Verdana (sans serif) fonts. Georgia and Verdana were specifically designed for reading from a computer monitor. All text was set at 10 points. They used a comprehension task (Tinker Reading Speed Test) rather than a proofreading task. Participants included faculty, staff and graduate students who ranged in age from 20 to 53. The subjects read the text on a 17-inch screen with a resolution of 640x480 pixels. They reported no reliable performance differences in reading speed.

Over the past couple of years, Michael Bernard, Melissa Mills and their colleagues at Wichita State University have conducted a series of studies on font sizes and styles. In their first study (Bernard and Mills, 2000) they evaluated 10-point and 12-point Arial and Times New Roman fonts. They had participants read Encarta passages. The words were presented on 17-inch monitors with a resolution of 1024x768 pixels. The test subjects were asked to read each passage "as accurately and as quickly as possible." As they read, they were to find some randomly placed "substitution words" in each passage (e.g., "fun" replaced "sun"). The researchers reported no reliable differences among the passages in reading speed or in the detection of word errors. However, the 12-point fonts were reliably preferred over the 10-point fonts.

In a second study (Bernard, et.al., 2001a) they used a similar procedure to evaluate three different font sizes (10, 12 and 14-points) used with eight different fonts types:

Serif fonts

  • Century Schoolbook
  • Courier New
  • Georgia
  • Times New Roman

Sans serif fonts

  • Arial
  • Comic Sans
  • Tahoma
  • Verdana

They found that Arial and Times New Roman were read reliably faster than Courier, Schoolbook and Georgia, and that the 12-point fonts were read reliably faster than the 10-point fonts. All of the fonts except Century Schoolbook were reliably preferred over Times New Roman.

In a more recent study (Bernard, et.al., 2002) they used only 12-point fonts, but extended the number of font styles by adding Goudy Old Style (a serif font) and Agency (a sans serif font) to their original eight font styles. Like in previous studies, participants read 2 to 3 page passages located at a fixed distance from their screens. They found no reliable differences between the major fonts in reading efficiency; however, Arial, Verdana and Comic Sans were reliably preferred.

The studies just discussed used participants that were young or middle-aged. Bernard and his colleagues (2001b) examined font characteristics that could assist older adults when reading from the Web. The older users had an average age of 70, with a range of 62 to 83 years. The study used 15-inch monitors that had a resolution of 800x600 pixels. Again, all of the readers were required to remain 22 inches (56 cm) from the screen. They evaluated 12-point and 14-point versions of Times New Roman, Georgia, Arial and Verdana. All the 14-point fonts produced reliably better reading efficiency, and both of the 14-point san serif fonts were reliably preferred over all four 12-point fonts.

What can we conclude from these studies?

  • No Web page fonts should be less than 10-points,
  • Optimal reading speed for most adults will be elicited with 12-point fonts (size=3)
  • There is probably no reliable difference in reading speed for most adults when viewing common font styles (Arial, Verdana, Georgia, Times New Roman),
  • Most users tend to prefer sans serif fonts (Arial, Verdana), and
  • Older users will benefit from type sizes that are at least 14-points.

Coming from a DTP and WP background, I have become interested in the use of typefaces and have done some work on students' preferences – mostly on paper rather than on screen. Given the choice, there seems to be a wide range of fonts and sizes students say they find easiest to read – some due to real visual problems, but not all. In a recent series of tests Arial 12 gave better comprehension results than TNR or the dreaded Comic Sans. Next step is to test Arial against Verdana and Georgia. I have not been looking at speed of reading though – only at comprehension.

Ann Shaw

Although your research above found reading efficiency better with 14 font, and the conclusion said older users would benefit from 14 font, do adults who are not 'older' prefer 14 font to 12 font?

Jeannie Lewis

Reader comments on this and other articles.
The Pragmatic Ergonomist, Dr. Eric Schaffer
Eric

It is good to see that fonts and monitor quality are getting good enough to give designers a pretty safe set of choices. BUT, I have some bad news. When we set a font to 10 point in typesetting it is 10/72 inch high. In the Web... we have no clue. The ACTUAL font seen will change with resolution and monitor size! We don't really know what people will see.

What we are in fact doing is setting the minimum HTML font to "10 point". We then have the users adjust their font size by self selecting resolutions and monitors. If that fails they will lean in and squint. So as a designer in typical Web pages can indeed just set fonts at least at 10 points.

If you have a special situation (like a handheld or projection device) you need to make sure people can read the text. To do this measure the distance between the back of the user's eyeball (the fovea) and the display. Divide that distance by 200. That is the minimum character height for good legibility. (In technical jargon, the font should subtend 17 minutes of arc at the fovea.) For example, a distance of 30 inches from the display would require a minimum of 10.8 points. A distance of 20 inches from the eye to a small hand held display would need at least a 7.2 point size.

 HFI's Typography Expert
 

There are studies that compare legibility of fonts on screens, and make recommendations based on the results. Dr. Bailey and Dr. Schaffer are right to draw only minimal practical conclusions from the studies. Here's why.
First, the conditions of any given test are guaranteed to be different from the conditions your users will encounter. Font size is not an absolute. Think of it as just a label, much the same as "bold" or "Garamond." This is because:

  1. Selecting a font size determines the number of pixels at a specified pixel resolution, but the CRT or LCD may be any size. 10 points on a 17" monitor set for 1024 x 768 will be much smaller than 10 points on the same monitor set for 800 x 600 or at 640 x 480 (as in the Carnegie Mellon tests Bob described).
  2. What does matter is the subtended angle of something you're trying to see. People put their displays at differing distances, depending on the physical setup of their desks, the size of the screen, and what they're doing. In general, the larger the physical display, the farther away people put it. That makes type that would look too big on paper at 12 points look too small on a big CRT.
  3. Point size is not comparable between fonts. Different typefaces may have very different size letters at the same point size. Originally point size was just the height of the metal body of the cast letters (see figures). The point size more directly describes to the normal minimum spacing between lines than to the size of the letters.

A piece of type

Various typefaces

The second problem with these experiments is that it's extremely difficult to evaluate any single parameter, because type is a complex, multiple-variable world. For example, if you try to compare the reading speed of 9-point type with that of 10-point type of the same typeface, you will be unable to make everything else be equal. You can decide to hold the number of letters in each line constant, but then the lines will have different lengths, and thus different subtended angles. The eye will have to travel over a wider or narrower line width to read the lines. You could hold the line width constant, but then the number of lines of text required to read the same number of words will be different. Thus, you will be unable to fix the number of eye motions needed to read the text.

Another parameter is leading (space between lines). The optimal leading, needed to optimize reading rate, varies with line length and the size of the type. In your experiment, you have to decide whether to use the optimal leading for the different point sizes.

These problems of confounding parameters appear constantly in trying to determine the legibility of type. Elaborate experiments are necessary to tease out the differences. Tinker and others have done careful work with printed type, and found that there are only small legibility differences between serif and sans serif, but a large penalty for fixed-pitch (typewriter) typefaces. [Tinker, M.A., (1963), Legibility of Print, Ames, Iowa, The Iowa State University Press.]

As to the minimum sizes for text on Web pages, you need to test your results. Fortunately, browsers give users the ability to enlarge (or shrink) fonts to meet their situation. But the browsers and HTML are not very helpful in ensuring that the size you choose will be a good one. This is especially true across platforms: Text that is large enough in IE on a PC may be too small to read in IE on a Macintosh.

I recommend using different fonts, both serif and sans serif, freely to create effective communication. The legibility differences are the smallest effect you have to worry about! Navigation, the quality of what is being read, and page layout matter much more to the effectiveness of software systems. For example, I have done many designs in which I use a sans serif for field labels, and a serif for all variable data. This provides a valuable cue to "parsing" the page, but has an immeasurable effect on legibility. The result is a better design.

Figures © Richard Rubinstein, 2002, reprinted by permission. Dr. Rubinstein is the author of Digital Typography: An Introduction to Type and Composition for Computer System Design, Addison-Wesley, 1988.




Leave a comment here

© 1996-2014 Human Factors International, Inc. All rights reserved  |  Privacy Policy  |   Follow us: