Jerry Greenfield MAKING WEB PAGES LEGIBLE Summary of a Presentation at KOTESOL October 1, 2000 Well established standards for legibility of print typography are based largely on the research by Miles Tinker and his associates and students at the University of Minnesota and compiled in two important books by Tinker, The Legibility of Print (1963) and Bases of Effective Reading (1965). Standards for computer screen legibility have been researched less thoroughly, but the literature that is emerging on this subject (see the bibliography) acknowledges the print standards as the starting point. Results of experiments with text legibility on computer screens generally concur with the earlier print findings. Differences in results often seem to be attributable to difficulties in measurements in the new research. Clearly much research needs to be done to identify how typographic legibility variables are affected by delivery of text on computer screens The summary recommendations that follow are gleaned from Tinker and the emerging literature on computer screen text legibility. Note that some of these specific recommendations seem out-of-date in 2015. Fonts Font Face For normal text blocks use any standard font or one of the new screen-friendly fonts from Microsoft. For web pages, the best may be Georgia, Trebuchet MS, or Verdana for regular text. If you insist on using them at all, save Comic Sans and Impact for larger size titles. Upper-Case/Lower-Case For regular text blocks, use lower case. Use Upper case sparingly for headings and titles. Serif/Sans-serif For plain text use whichever you prefer. Italic/Roman Avoid italic except for large sizes with adequate contrast. Font Size Consider 12 point standard for running text. Use smaller sizes for details, captions, tabular data, and notes. Lines and Paragraphs Line Width (Length) For optimal 9-12 point fonts, a width of 3 to 5 inches is recommended, resulting in a maximum of about 10 to 12 words per line. Line Spacing (Leading) Netscape and Explorer will automatically display Microsoft web fonts with appropriate leading. For running text in other fonts to be displayed on screen in a word processing document (not html), lines of optimal font-size and length (10 or 12 point) need 2 points of leading. This will be supplied automatically for single-spaced Microsoft web fonts. Margins Technically, margins have little or no effect on legibility and can be adjusted freely on the basis of aesthetic preference and practical considerations. However, care should be taken to avoid excessively dense pages, allowing sufficient white space overall. This consideration together with optimal line width suggests allowing for generous margins even in web pages. Justification For running text use unjustified right margins. Centering should be used only for titles, headings, and some lists. Colors Light vs Dark background Dark text on a light background for running text. Use dropout (reversed) text sparingly and only for titles and headings in table cells or Color Use dark text on a light background. Black on white is clearly optimal for regular blocks of running text, but any color combination that affords sufficient contrast (i.e. at least 70%) is OK. Luminosity order of colors Light: white, yellow, cyan Dark: green, magenta, red, blue Relative legibility of color combinations (Tinker 1965; negative value indicates percentage decrease in legibility relative to black on white): black on white (0.0) green on white (-3.0) blue on white (-3.4) black on yellow (-3.8) red on yellow (-4.8) red on white (-8.9) green on red (-10.6) orange on black (-13.5) orange on white (-20.9) red on green (-39.5) black on purple (-51.5) Optimal Contrast 70-80% luminance contrast; chromatic contrast is less important. Text/background Saturation Use desaturated text on desaturated background/graphics. Structure Page Use short, concise, spacious design, with isolated heading, spaced paragraphs, directive cues, and graphic organizers such as text boxes and shading (background colors). Hypertext (scrolling-paging-hyperlinks) Hierarchical structure is more useable than linear, and heirarchical with scrolling better than heirarchical with paging. General Recommendations on Writing for the Web The following recommendations apply specifically to web pages but they are points to keep in mind generally for text to be read by EFL students: Write more concisely than you would for print. Avoid extra modifiers, especially overused words. Use inverted pyramid structure--main point first with clear informational headers supported by details. Write skimmable text using short, clear paragraphs with color-coded keywords, headings, and ordered or unordered lists. Support each link with a concise description of where it leads, if its name is not self-explanatory. Avoid close argument and fancy writing style. No fluff. Avoid all but the most common and well-known acronyms and jargon.

Jerry Greenfield

MAKING WEB PAGES LEGIBLE

Summary of a Presentation at KOTESOL

October 1, 2000

(Note: Some of these specific recommendations seem out-of-date today, fifteen years on.) Well established standards for legibility of print typography are based largely on the research by Miles Tinker and his associates and students at the University of Minnesota and compiled in two important books by Tinker, The Legibility of Print (1963) and Bases of Effective Reading (1965). Standards for computer screen legibility have been researched less thoroughly, but the literature that is emerging on this subject (see the bibliography) acknowledges the print standards as the starting point. Results of experiments with text legibility on computer screens generally concur with the earlier print findings. Differences in results often seem to be attributable to difficulties in measurements in the new research. Clearly much research needs to be done to identify how typographic legibility variables are affected by delivery of text on computer screens

The summary recommendations that follow are gleaned from Tinker and the emerging literature on computer screen text legibility.

Fonts

Font Face

For normal text blocks use any standard font or one of the new screen-friendly fonts from Microsoft. For web pages, the best may be Georgia, Trebuchet MS, or Verdana for regular text. Save Comic Sans and Impact for larger size titles.

Upper-Case/Lower-Case

For regular text blocks, use lower case. Use Upper case sparingly for headings and titles.

Serif/Sans-serif

For plain text use whichever you prefer.

Italic/Roman

Avoid italic except for large sizes with adequate contrast.

Font Size

Consider 12 point standard for running text. Use smaller sizes for details, captions, tabular data, and notes.

Lines and Paragraphs

Line Width (Length)

For optimal 9-12 point fonts, a width of 3 to 5 inches is recommended, resulting in a maximum of about 10 to 12 words per line.

Line Spacing (Leading)

Netscape and Explorer will automatically display Microsoft web fonts with appropriate leading. For running text in other fonts to be displayed on screen in a word processing document (not html), lines of optimal font-size and length (10 or 12 point) need 2 points of leading. This will be supplied automatically for single-spaced Microsoft web fonts.

Margins

Technically, margins have little or no effect on legibility and can be adjusted freely on the basis of aesthetic preference and practical considerations. However, care should be taken to avoid excessively dense pages, allowing sufficient white space overall. This consideration together with optimal line width suggests allowing for generous margins even in web pages.

Justification

For running text use unjustified right margins. Centering should be used only for titles, headings, and some lists.

Colors

Light vs Dark background

Dark text on a light background for running text. Use dropout (reversed) text for titles and headings in table cells or

Color

Use dark text on a light background. Black on white is clearly optimal for regular blocks of running text, but any color combination that affords sufficient contrast (i.e. at least 70%) is OK.

Luminosity order of colors

•Light: white, yellow, cyan
•Dark: green, magenta, red, blue

Relative legibility of color combinations (Tinker 1965; negative value indicates percentage decrease in legibility relative to black on white):

•black on white (0.0)
•green on white (-3.0)
•blue on white (-3.4)
•black on yellow (-3.8)
•red on yellow (-4.8)
•red on white (-8.9)
•green on red (-10.6)
•orange on black (-13.5)
•orange on white (-20.9)
•red on green (-39.5) black on purple (-51.5)

Optimal Contrast

70-80% luminance contrast; chromatic contrast is less important.

Text/background Saturation

Use desaturated text on desaturated background/graphics.

Structure

Page

Use short, concise, spacious design, with isolated heading, spaced paragraphs, directive cues, and graphic organizers such as text boxes and shading (background colors).

Hypertext (scrolling-paging-hyperlinks)

Hierarchical structure is more useable than linear, and heirarchical with scrolling better than heirarchical with paging.

General Recommendations on Writing for the Web

The following recommendations apply specifically to web pages but they are points to keep in mind generally for text to be read by EFL students:

•Write more concisely than you would for print. Avoid extra modifiers, especially overused words.
•Use inverted pyramid structure--main point first with clear informational headers supported by details.
•Write skimmable text using short, clear paragraphs with color-coded keywords, headings, and ordered or unordered lists.
•Support each link with a concise description of where it leads, if its name is not self-explanatory.
•Avoid close argument and fancy writing style. No fluff.
•Avoid all but the most common and well-known acronyms and jargon.

(Back to EFL Readability Page)