Design Theory Site Design Page Design Screen Design Research: Font Selection & Leading MultiMedia Teacher Resources Table of Contents Home Page Copyright © 1999 by Bonnie Skaalid

Researchers who conducted research on the optimal font size for CBI using a Macintosh Centris, 14 inch monitor and Times Truetype font discovered a preference for 14 to 16 point font over 10 to 12 point font. As this contravenes many findings from print-based research, they concluded "font size recommendations based on print media are inadequate" [1, p. 143]. Other researchers [2] offer the following guidelines for font selection: For body text on-screen, you would do well to choose a font with these characteristics: minimum 12- or 14-point size (if the font has relatively small characters compared to other fonts of that size (e.g., Times), choose 14; if the characters are relatively large (e.g., Bookman), you can choose 12) plain (roman) style, rather than bold, italic, outline, shadow, or other style sans-serif or with serifs that are not too fine to render well on-screen bitmap font rather than outline font proportional font (unless it is necessary to choose a non-proportional font for some reason) not anti-aliased system-resident font (preferred but not mandatory) For headings and titles on-screen, you should generally choose a font with these characteristics: 18-36 point size (assuming 12- or 14-point body text) plain (roman) or bold style is acceptable; italics may be used if the font size is large enough to render well on-screen either sans-serif or serif font is acceptable (it often works well to have the opposite of body text--i.e., if body text is sans-serif, make titles/headings serif, and vice versa) due to the size of titles/headings, outline fonts may render well enough on-screen to be usable proportional font anti-aliased titles/headings generally look more pleasing system-resident font (preferred but not mandatory) Misanchuk, et al. (in press) Misanchuk [3] conducted research which seemed to indicate that subjects preferred Geneva font on a Macintosh. However, he also cautions against taking these previous results too seriously, as many variables were not controlled. They further suggest: "rapid advances in technology (new fonts; higher-resolution displays) may make the generalizability of the existing research questionable." Indeed, there are typefaces being designed specifically for web use which are completely designed to be used on a computer. Web Fonts Microsoft's home page includes a section on "Typography on the Web" which includes several of these fonts which are freely distributed. With the advent of Cascading Style Sheets, designers can specify that these fonts be used on web pages to increase readability [6] Below are examples of fonts recommended for use on web pages: This is an example of Verdana and smaller This is an example of Georgia This is an example of Minion Web (installed with Internet Explorer) This is the font used in this site. This is an example of @Home (installed with Shaw @Home browser) These fonts are specifically designed to be legible in both small and large font sizes on the screen. (you will not see these fonts unless they are installed in your system - you can download Verdana and Georgia from the following address: Microsoft Typography) Text Justification Typographic convention in magazines and newspapers usually requires that text be full justified; however, research indicates that ragged right text justification is the easiest to read [4]. Full justification requires that both margins be aligned - methods to accomplish this alignment include leaving spaces between letters or words, or hyphenating words. Hyphenation of words makes decoding more difficult. For comprehension purposes, don't use full justification of text on the screen. History of Fonts Are you interested in the differences between fonts and some information about font development? If you are, here's a site which presents information of fonts in a very interesting way: typographic [1] Chen, M., Jackson, W., Parson, C., Sindt, K., Summerville, J., Tharp, D., Ullrich, R., & Caffarella, E. (1996) The Effects of Font Size in a Hypertext Computer Based Instruction Environment. (ERIC Document Reproduction Service No. ED 397 784) [2] Misanchuk, E., Schwier, R. & Boling, E. (in press). Visual design for instructional multimedia. [3] Misanchuk, E. R. (1989). Learner/user preferences for fonts in microcomputer screen displays. Canadian Journal of Educational Communication, 18 , 193-205. [4] Muncer, S. J., Gorman, B. S., Gorman, S., and Bibel, D. ,1986; Trollip, S. R., & Sales, G., 1986, as cited in Schwier and Misanchuk, 1993. [5] Schwier, R., & Misanchuk, E. (1993) Interactive multimedia instruction . Englewood Cliffs, NJ: Educational Technology Publications, Inc. [6] Veen, J. (1998). Big minds on web design. [Online]. Available: http://www.hotwired.com/webmonkey/templates/print_template.htmit?meta=/webmonkey/98/13/index0a_meta.html Screen Research: [Screen Grid and Layout [ [Line Length] [Screen Density] [Font Selection & Leading] [Icons, Buttons, & Menus][Color] Page Design:[Multimedia & Web Page Design Principles] [Screen Design Research] [Screen Resolution & Size] [Writing Style] Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]