11:8 Use at Least 12-Point Font


3 out of 5
4 out of 5
Topic: Text and Styles
Guideline: Use at least a 12-point font (e.g., typeface) on all Web pages.
Comments: Research has shown that fonts smaller than 12 points elicit slower reading performance from users. For users over age 65, it may be better to use at least fourteen-point fonts. Never use less than nine-point font on a Web site.

Traditional paper-based font sizes do not translate well to Web site design. For instance, Windows Web browsers display type two to three points larger than the same font displayed on a Macintosh. User-defined browser settings may enlarge or shrink designer-defined font sizes. Defining text size using pixels will result in differently-sized characters depending upon the physical size of the monitors pixels and its set resolution, and presents accessibility issues to those individuals who must specify large font settings.
Sources:
  • Bailey, R.W. (2001). Reading from small point sizes. User Interface Update-2001.
  • Bernard, M. & Mills, M. (2000). So, what size and type of font should I use on my Web site? Usability News, 2.2. Retrieved November 2005, from http://psychology.wichita.edu/surl/usabilitynews/2S/font.htm.
  • Bernard, M., Liao, C., & Mills, M. (2001a). Determining the best online font for older adults. Usability News, 3.1. Retrieved November 2005, from http://psychology.wichita.edu/surl/usabilitynews/3W/fontSR.htm.
  • Bernard, M., Liao, C.H., & Mills, M. (2001b). The effects of font type and size on the legibility and reading time of online text by older adults. Proceedings of CHI 2002, 175-176. Retrieved November 2005, from http://psychology.wichita.edu/hci/projects/elderly.pdf.
  • Bernard, M., Lida, B., Riley, S., Hackler, T., & Janzen, K. (2002). A comparison of popular online fonts: Which size and type is best? Usability News, 4.1. Retrieved November 2005, from http://psychology.wichita.edu/surl/usabilitynews/41/onlinetext.htm.
  • Ellis, R.D. & Kurniawan, S.H. (2000). Increasing the usability of online information for older users: A case study of participatory design. International Journal of Human-Computer Interaction, 12(2), 263-276.
  • Galitz, W.O. (2002). The Essential Guide to User Interface Design. New York: John Wiley & Sons.
  • Ivory, M.Y. & Hearst, M.A. (2002). Statistical profiles of highly-rated web site interfaces. Proceedings of CHI 2002, 367-374.
  • Tinker, M.A. (1963). Legibility of print. Ames: Iowa State University Press.
  • Tullis, T.S. (2001). Web usability lessons learned. Fidelity Center for Applied Technology Technical Report. Fidelity Investments.
  • Tullis, T.S., Boynton, J.L., & Hersh, H. (1995). Readability of fonts in the windows environment. Proceedings of CHI’95, 127-128.

Good Example:
Examples of cross-platform text-size differences generated on a variety of browsers and platforms by using HTML text in a one-cell table with a width of 100 pixels.

11_08_good_example

Related Usability Guidelines: