I would like to thank everyone who responded to my query and offered citations and research suggestions. Following Ken's request, I'd like to share the report I compiled on the legibility of onscreen type. Because the report was for a general audience (managers and executives at my company), I kept the report brief, and, unfortunately, was unable to include all the references I received. This report is part of a larger effort to identify research-based design standards, and I would welcome discussions about that topic.
Best,
Leigh
Leigh George, Ph.D.
Coordinator
Graphics Arts Department
Westat
1630 Research Blvd., RE 219
Rockville, MD 20850
P 240.453.2624
F 301.294.3855
Brief Overview on the Legibility of Onscreen Type
The readability of online text is affected by a variety of factors including font design and size, line length, layout, color contrast between the text and background, as well as user platform and browser.
Unlike printed text in which ink is applied to paper, onscreen text must conform to the square pixel grid of monitors. For type to be legible onscreen, letter shapes, heights and the spacing between letters (kerning) must be designed to fit the pixel grid. To fit the square pixel grid without looking distorted, typefaces should have wider letters, increased x-height (the height of the letter x in any typeface), and generous letter spacing.
Although I found no research that supports the use of one typeface over another, there are general research-based guidelines for the use of onscreen fonts. The guidelines presented below are drawn from the National Cancer Institute’s usability.gov web site and IBM’s Ease of Use Group’s guidelines and are based on research documented in the bibliography.
• Use fonts designed for screen reading sized to at least 10-point. Such fonts are wide with a large counter (the open space in a letter), have generous kerning and a large x-height.
• Do not mix serif and sans serif fonts within the text.
• Avoid the overuse of bold.
• Avoid italics.
• Avoid setting type in all capitals.
• Create strong contrast between the text and background.
• Pale colors and colors which are close in tone should be avoided. Since color appearance varies between different monitor types, readability should be tested using a variety of monitors.
• Avoid background patterns.
• Keep line length short.
• To ensure web pages are legible to the maximum number of users, test all pages on Windows and the Macintosh, and check pages in the Netscape and Internet Explorer browsers. The appearance of text onscreen differs between Mac and PC monitors because each define how many pixels equals one inch differently. On a Mac, an inch on the screen measures one inch. On a PC, an inch on screen measures 1.3 inches approximately. Also keep in mind that the Web is inherently a flexible environment. The user’s browser and settings impact how text flows on a page, even text in tables, as well as what font and size of font is used to display a web page.
Selected Bibliography
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.
Sanders, M.S. and McCormick, E.J. (1993). Human Factors in engineering and design. 7th ed. New York: Mc Graw-Hill.
Tullis, T.S., Boynton, J.L. and Hersh, H. (1995). “Readability of fonts in the windows environment.” Proceedings of CHI'95, 127-128.
Williams, T. R. (2000). “Guidelines for Designing and Evaluating the Display of Information on the Web.” Technical Communication Online.
47, no. 3.
|