It is easy to overlook text legibility in web design. However, the Web
is becoming the research tool of choice in making purchasing decisions.
Therefore, it is critical to your web site's success that all text is
both legible and readable.
Readability is how easy it is to read words, phrases, blocks of copy
such as a book, a web page or an article. Legibility is a measure of how
easy it is to distinguish one letter from another in a particular typeface.
Both are desirable characteristics when choosing typefaces for paragraphs
of text online. Hear are a few overall tips that will insure that your
website content will be well read:
- Use sans serif fonts rather than serif fonts in body text (ie: Helvetica,
Arial and Lucida are sans serif fonts, Times Roman is a serif font).
Serifs are the tiny structural details added to the shapes of letters
by the designer (see illustration). Sans serif typefaces do not have
these structural details and therefore appear simpler. Sans serif fonts
tend to be easier for the eye to follow in small sizes typically online.
One exception to this rule is the font Georgia, a serif font made especially
for online viewing.
- Avoid ornamental fonts in body text. Keeping it simple keeps it legible
and readable. There is a good reason why all body copy seems to use
the same basic (boring) typefaces (or fonts) over and over again. You
want readers to focus on the message, not on the style of lettering
used to convey the it. When ornate typefaces are used for body copy,
they distract from the readability of the message. Simple, commonly
used typefaces become 'invisible' allowing the reader to focus on the
message.
- Roman characters are more legible than italic on the Web. Therefore,
avoid paragraphs of text set in an italic font.
- Medium-sized fonts, 9 to 11 points for sans serif fonts and 11 to
12 points for serif fonts often work well for body text.
- Avoid using all capital letters for sentences in paragraphs of text.
- Using generous margins (white space) around paragraphs of text contribute
to legibility.
- High contrast between text and background colors increase legibility.
Here is a sample of our web design demonstrating the use of clean legible
text. The typeface chosen is simple, readable and legible, and uses generous
white space (or leading) between lines of text. The text appears uncrowded,
and invites the eye to read.

By the wise use of these guidelines, you make your website more inviting,
and easier to read. That can be a competitive advantage!
Donald Peterson