Easy-to-Read Fonts Improve Site Visitors’ Experience

One of the big mistakes I see companies make with Web content is using the wrong font size and color.

I’m referring specifically to fonts that are small, a very light color, reversed out, or placed on a tinted background — as these screen shots show. (Note: I randomly chose these examples by doing a search for “mission statement customer service.”)

An example of small, gray type

An example of colored type on a tinted background

An example of reversed out type

What’s the problem with using these types of font sizes and colors?

They lower reader comprehension. In plain English, it means that people have a hard time reading your message.

The late Colin Wheildon did groundbreaking research into which typefaces and page layouts reduce or improve reader comprehension with regard to print. This research, which you can find in the book, Type and Layout: Are You Communicating or Just Making Pretty Shapes, also applies to the Web.

Wheildon proved, for example, that text printed in black received a 70% level of comprehension and that a muted color (such as grey) received only a 10% level of comprehension.

Wheildon also tested comprehension with regard to printing text on colored backgrounds. He ran a number of tests using different colors and tints, but generally, results proved that the lighter the background tint and the darker the type (e.g. black), the higher the level of comprehension.

As stated in the book, “designers often claim that reversed out type . . . grabs readers’ attention and forces them to read the text.” Wheildon’s research showed the exact opposite. “When type was reversed, comprehension levels plummeted.”

Text printed black on white had a 70% comprehension level. White text printed on black had a zero level of comprehension. In fact, 80% of study participants said that reversed out type “vibrated . . . which made the lines of type seem to move and merge into one another.” (Reminds me of motion sickness — ugh!)

What does all this research mean? It means that if people can’t read or comprehend your message, they won’t understand what you’re offering. In effect, you’re making it twice as hard for people to take the next step in the buying process.

I’m not saying that your Web pages should be devoid of graphical elements or that you should never use color or reversed out text. What I am saying is that you should consider formatting your pages to make them easy to read:

• Use white backgrounds and black text to significantly improve reader comprehension.
• Use a font size of 9 or above — Remember, not everyone knows how to adjust font size using browser tools.
• Increase “leading” — Leading refers to the space between lines of type. A little more leading makes things easier to read. As you can see right here, the leading in these bullet points is less than the leading in the paragraphs above. Which is a little easier to read?
• Avoid large blocks of text — Reading text online is exhausting and hard on the eyes. Make it easy for people to skim by breaking up large blocks of text into smaller chunks. Sub-heads, bullets, bolding and smaller paragraphs improve readability.

Edmond Arnold, the father of newspaper design, said to “start with good typography — the kind that best suits the reader.” What works best for print also works best for the Web.

What do you think? Do you agree or disagree and why?