Chapter 7. Typography: Readability & Legibility
221 Body Text: The Ten-Point Rule
227 Relative Specifications
232 Choosing Fonts
235 Mixing Fonts and Colors
247 Text Images
249 Moving Text
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:
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.
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."
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."
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."
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."
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."
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."