 |
|
| |
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. |
