Legible Text In Web Design

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