WEB DESIGN -- Page Readability

How easy is it for your site visitor to "read" and "grasp" the information on your webpage?

Tests have shown that reading performance is 40% better on paper compared to the same text on a display screen. Publishers put a high priority on making sure their text is easy to read. We need to pay attention to what they have learned, especially considering the 40% handicap.

SMOG Index

It is recommended that you aim for a reading level of sixth grade or less. The SMOG Index uses formulas that estimate readability. It is based on the premise that short words, fewer syllables per word and shorter sentences will tend to equate to a lower grade school level. Saying the same thing in a succinct shorter sentence is a good thing.

White Space

Having enough white space is very important to readability. Nobody would want to read your material if all the words flowed together without spaces. White space is also important between paragraphs. Shorter paragraphs break up the flow of text and make it more comfortable to read.

It is also important that you allow adequate white space on each side of your text. This paragraph codes an indent into the HTML code. You can accomplish the same indentation by padding HTML tables.

Too much white space makes the page look empty and results in additional scrolling.

Columns

Wide expanses of text are a challenge to read. Breaking the same large body of text into columns will greatly improve readability.

Font Size

Larger fonts are easier to read. Especially for larger bodies of text, don't go smaller than 7.5 for a web optimized font such as Arial or a 9 point font if it is not a web optimized.

Serif vs San Serif

Serifs are the extra detail incorporated into a font design. San serif fonts are, by comparison, plain looking fonts. Serif fonts are clearly the better fonts for published material using high resolution printers. San serif (with out the decorations) is the better choice for very low quality displays (something to worry about several years ago). Times Roman is an example of a serif font optimized for lower quality displays.

Web Safe Fonts

Arial, for a sans serif font and  Times New Roman, with its serifs, are designed to work well with computer screens. The best two fonts for low resolution screens are Verdana (sans-serif and similar to Arial) and Georgia (similar to Times Roman). Experts will differ in their choice of which fonts are best.

Bold Text

Text in bold, as illustrated in the left margin of this page, or embedded in the text, will improve the average time visitors spend on your web pages.

Contrast Ratio

Black on white is clearly the best choice especially for large bodies of text, which should be given the highest priority for readability. We all like to add color to our websites, which is a good idea as long as we achieve a good contrast ratio, for the shorter strings and bodies of text. For every pair of colors tested, the darker against the lighter was the better choice in terms of easy reading and accuracy. Blue is the second best background color after white. Blue becomes an appropriate foreground text color the closer to black it gets. Be careful with navigation systems that change color or graphics as you mouse over them. All of these scenarios need to exhibit an acceptably high contrast ratio.

Printers

Browsers will typically ignore color settings for the background while rendering the specified color for the text. White text on a black background is printed as white on white.

Spelling and Grammar

Correct spelling, punctuation, grammar and avoiding unfamiliar words will help to make the reading of your web pages a more pleasant experience.

Animation

Distracting animation can't help but slow down your visitor's ability to read and enjoy the content on your web page. Peripheral vision is much more sensitive to motion which is all too often where that annoying animation is located. If you feel compelled to feature some animation on your site, have the animation stop after a few seconds. Better still, don't animate, and that goes for text that scrolls horizontally or vertically.

Author: David Buxton