It is easy to overlook text legibility in web design.

The Web is becoming the research tool of choice for consumers. And, to complicate matters a bit, smartphones are becoming the most commonly used mobile device for reading online content. Mobile-friendly smartphone content must be legible on a wide range of mobile devices. Therefore, it is critical to your web site's success that all text is both legible and readable on any device.

legibility web design

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 general guidelines that will insure that your website content will be well read:

text legibility web designAs a general guide, 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 used online. One exception to this rule is the font Georgia, a serif font made especially for online viewing. For a time, some web designers insisted on creating paragraphs of copy that used type sizes that were simply too small for online legibility. However, that fad is becoming a thing of the past as the availability of better quality fonts in a wider range of choices make it easier to create typographically elegant pages that are legible as well.

You want readers to focus on the message, not on the style of lettering used to convey the it.

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, 10 to 16 points for sans serif fonts and 12 to 16 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.

A sample of my web design demonstrating the use of clean legible text is shown above. 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 mobile-friendly, more inviting, and easier to read on any device. That's good for business! -Don Peterson



Text Legibility in Web Design