JUST LIKE THE STORY OF GOLDILOCKS AND THE THREE BEARS, web text-design needs to be “just right” to be legible and readable. Legibility is how easily recognizable a few words are, and readability is how easy it is to read lots of text. Three considerations to guide web text-design for optimum legibility and readability are color, typography, and legibility.

Black text on a white background is usual for print materials, and high contrast combinations are most legible. Additionally, people who are color blind, or have other vision problems may have difficulty or be unable to read text if it is not in a high contrast setting. 

Mouse-over to see low contrast.

Web-based text legibility “depends on the contrast in luminance between the text and the background”(Winn,1993). Black text on a white background is easiest to read because the luminance from the screen comes around the letters instead of from the letters if there is a dark background. The effect of luminance on readability is most profound when there is lots of text. 

Mouse-over
for white on black

Warm colors pop, that is they almost seem to jump at the viewer, and cold colors seem to recede into the background. In general, warm colors are reds, oranges, and yellows. Cool colors are blues, purples, and greens. 

-------------------------------------------------------------------------------- 

Which of these quotes grabbed your attention
first? If you aren’t color blind, the red one probably did. How it
caught your eye is the “pop.”

Look at the following examples. Which are pleasing to read? Which are less legible? Mouse-over each quote for warm color text examples.

Typeface Tutelage
In general, a sans serif text is more legible on the computer screen. However, use serif typefaces for textually dense pages.

Fantastic Fonts
This list is fonts that many people have on their computers. These fonts will vary some in size and shape depending on monitor resolution and platform. 

Size Significance
If the font size is too large the text will look like it was meant for little children, or the visually impaired. If the font size is too small, it is hard to read. Try to make the font size “just right” so it is comfortable to read. 

Case Care
The ascenders and descenders of lower case letters facilitate legibility, by creating shapes for each word. When words are written in all capital letters the reader is forced to read each letter to understand what the word says, because the shape is always a rectangle. 

Content Configuration
People read differently and more slowly on the computer, than with printed text. So, break it up – anyway you can with: “white” space, numbering, bullets, tables, or horizontal lines. 

Marvelous Margins
Printed materials have margins. Text on the web should have margins too. Text is like a good wine, it needs to breathe. Providing a margin makes it easier to read. Besides, do you always scroll down the page to see what is there? I didn’t think so.

Conclusion & More Information
These principles are guidelines for creating both readable and legible text for most populations. For more information on text design read The Non-Designer’s Web Book, The Non-Designer’s Design Book, Chapter 2 in Instructional Message Design, or the EET articles on Text Design, or Typography. More research on web-based text readability.

Anne Paxton-Smith
SDSU Educational Technology
Graduate Student