Chapter 7. Typography: Readability Legibility

Chapter 7. Typography: Readability & Legibility

Tip: The Downside of Dummy Type
Four Top Guidelines for Type

221 Body Text: The Ten-Point Rule

Tip: Avoid Anti-Aliasing
Age Is Not the Issue
Tip: When the Same Size Appears Smaller
Planning for Differences in Hardware
Common Screen Resolutions
Accessibility Affects All of Us

227 Relative Specifications

The Rule of Relative Size
Designing for Vision-Impaired Users

232 Choosing Fonts

When in Doubt, Use Verdana
When Will Screens Read as Well as Print?

235 Mixing Fonts and Colors

The Case Against Caps
Text and Background Contrast
Two Ways to Make Colors Pop
Common Color Blindness

247 Text Images

249 Moving Text

More Information

Artistic elements such as typography and color schemes play an important part in making a good first impression with your Web site. Typography gives people a feeling for your company and conveys information about what they can do on your site. Different fonts can signify whimsy or gravity, and point size and color can emphasize content. Sustaining positive impressions throughout the site means choosing the type and colors that work best on the Web.

Sound rudimentary? It's not.

Legibility is still a problem on Web sites today. Regardless of how good your site looks, if people can't easily read the text, it's destined for failure. In our studies, we repeatedly saw people of all ages and visual capabilities strain to read text on the sites we showed them. Some people had to stop what they were doing to put on reading glasses while others needed to lean in close to the screen and squint. This is uncomfortable for users and should not be necessary.

The primary goal of communication design is to convey information. Choose typography that communicates.

The right typography and color schemes are essential components of good visual design, but we've seen decisions based solely on branding, personal preferences, aesthetics, or just pure egoat the expense of the users' needs. The results:

Text appears too small or fuzzy
Text is not easily resizable
Text color provides inadequate contrast with the background
Text is overshadowed by surrounding design elements

We want to say that it's not a pretty sight, but we have to admit that some of these sites are truly beautiful, created by very talented designers. If they were to be showcased as visual art, they would be lauded. But unlike masterpieces hung on museum walls, Web sites are to be used by large numbers of people. To be most effective, they must adhere to some practical guidelines.

Tip: The Downside of Dummy Type

Why do so many Web sites have illegible text? Didn't anybody read the text while designing the site?

The unfortunate answer is "no." It's quite common for Web sites to be designed without real content. Instead the designer fills the pages with dummy text that begins with "lorem ipsum." (Paradoxically this is known as "Greek text" even though the words and the character set are pseudo-Latin.)

It often makes sense for designers to use placeholder text while they work on visuals before the content is finalized. However, legibility problems can easily be underestimated when all you see is "lorem ipsum." When reviewing screens with nonsense text, you simply think to yourself, Text goes here. If you are not trying to read it, you won't notice if it's unintelligible.

Our guideline: If you don't have the final content available while designing a Web site, at least insert representative text from the current site instead of nonsense text.

People use print and Web media differently, and designers must adjust their Web sites accordingly. A billboard or magazine cover is static; a reader understands it simply by looking at it. But the Web, of course, is interactive: People need to do things on it, and typography can help or hinder this process. The primary goal of communication design is to convey information. Choose typography that communicates. The typfaces you select should be legible and reflect the character and tone of your site.

The nice font size and high contrast between the text and background colors on this Web site made reading comfortable for people of all ages in our testing:

"I find it easy to read. Even the print is big enough for me to read. In the past couple of years, I find that I do this more, more, and more [leaning back further from the screen]. I'm 43 and this is something new to me."

www.sandiego.gov

Four Top Guidelines for Type

Use common fonts sized at or above 10 points
Avoid busy backgrounds
Use black text on white backgrounds
Keep moving, all-cap, and graphical text to a minimum

The small white text on this page was difficult to read. Some people had to lean forward in their chairs to make out the words. The main problem is the small font size, but the low contrast between the text and the background compounds the problem.

"It's kind of hard to see, pretty small print."

www.pixar.com

Even younger audiences complained about the tiny text and lack of contrast on this site. Light blue on white is not a good color combination if you want people to actually read the text:

"It would help if all the words were bigger and not blue. It's like trying to read yellow."

www.hob.com

Cramming more content on a page by shrinking the text size backfires because it makes the page busy and difficult to read. Who wants to stay on a Web site that causes eyestrain when other sites with the same information don't?

"I don't like small writing. It bugs me. It gives me a headache after reading it for a while."

www.movies.com

Even though this site has good contrast overall, people still complained about the font size. They didn't understand why the page couldn't be expanded to increase the text size and felt that the white areas on each side of the page were wasted space. When viewing Web sites on a 1024-by-768-pixel monitor (the most common screen size and the one we used in our studies), the user can see about 570,000 pixels of information inside a browser window. On this page, only 119,000 pixels are dedicated to the main content in the description of the "spring break escape" package and the links to start booking it. In other words, only 21 percent of the visible space is utilized for the primary content, and 79 percent is used for filler images or left unused. This irritated some of our users:

"I wouldn't want the print to be smaller. It bugs me. I have average eyes, so this would be the minimum amount. There is quite a lot of wasted space here; I would have gone up a size or two. If it doesn't cost [the site] money, then it's good to do."

www.whistlerblackcomb.com

This Adobe PDF didn't display well onscreen. The text appeared jagged, making it difficult to read, even at 100 percent. The presentation looked unprofessional, which turned people off. In general, PDFs look bad on Web sites because the information is designed for the printed page and not for the screen.

"I'm thinking that it looks busy. A lot of little things. None of the fonts and script on this page is clear. It's blurred. I wouldn't use this site unless I had to, because it's difficult to make out."