by Larisa Thomason,
Senior Web Analyst,
How often have you visited a Web page and strained to read the text? Do visitors to your Web site have the same complaint? They may - unless you've selected fonts that are easiest for online reading.
The Web Is Not Print
A printed page always looks the same. You can read it in the library, in the bathtub, or on the deck chair of an ocean liner. No matter what your location, the type, size, and colors will always look the same.
But the print on a Web page is subject to many more variables:
- Screen resolution: A font face and size that looks great at 800x600 may be indecipherable at 1024x768. That's because you have a lot more pixels pushed into a smaller space. Although it seems backwards, the "bigger" the resolution numbers, the smaller the page elements appear.
- Screen size: Many schools and people with limited space (and money) are still using 15 inch or smaller monitors. Other visitors have 19 inch or larger monitors that look more like movie screens than computer monitors.
- Different platforms and browsers: PCs and Macintosh systems support different fonts and display them differently. There are even differences between how Netscape and Explorer display common fonts like Arial and Times New Roman.
In these cases, the only quick and reliable way to know how your page looks is to test it with Browser Photo. You'll see actual screen shots of your Web page in 16 different browser, operating system, and screen resolution combinations. You'll know in an instant if you've selected a problem font.
Selecting A "Good" Font
But if you've used a problem font, how can you find one that works for the majority of your visitors? Usability testing is vitally important, but it may not give you all the information you need about font selection. The problem is that usability tests usually involve just a small number of people and your personal PC.
That's why the studies done for the Software Usability Research Laboratory (SURL) at Wichita State University are such valuable resources. In January 2002, SURL published the results of a research study titled: "A Comparison of Popular Online Fonts: Which Size and Type is Best?."
It's helpful to read the entire study, but we're going to summarize some of the most important points here:
- Legibility: The most legible fonts were Arial, Courier, and Verdana. Comic Sans was found to be the most illegible of the eight fonts evaluated.
- Attractiveness: Study participants found Georgia and Times New Roman the most attractive fonts.
- Font size: At the 10 point size, participants preferred Verdana. Times New Roman was the least preferred. At the 12-point size, Arial was the most preferred and Times New Roman the least preferred. Overall, Verdana was the most preferred font and Times New Roman the least preferred.
Now, some of these results appear to conflict. How could Times New Roman be the most attractive font and at the same time be the least preferred - no matter what the size?
The study's authors speculate that most people are just more comfortable with Times New Roman because they see it a lot:
"It is possible that Georgia and Times were considered attractive because of their widespread use in both print and on computer screens (Times also serves as the primary default for Microsoft Office software suites) and, thus, participants were more familiar with this type of font."
Quicker Is Better Online
During the study, the researchers found "ůsignificant differences in reading time. Generally, Times and Arial were read faster than Courier, Schoolbook, and Georgia." They also note that overall
"...Verdana appears to be the best overall font choice. Besides being the most preferred, it was read fairly quickly and was perceived as being legible."
Remember that people read differently online than in print. They quickly scan and look for important points before they settle down and begin reading the content closely. So your font choice and size are important! Anything that makes the page harder to read makes visitors more likely to click away to another site.
But font choices aren't the only determining factor in page legibility. You have other options too:
- Header tags help define page structure for easy scanning. Keywords in header tags will also help boost your site in the search engine rankings.
- Descriptive link text gives important clues about the link's destination and content. Visitors are more likely to click when they know where they're going!
- Color choices give visitors visual clues about important content by drawing the eye towards highlighted sections. Just be sure you don't give important information using only color as a guide. That will lock out visitors using assistive technologies like screen readers.
- Contrast. Always make sure there's enough contrast between your text and page background color - particularly if you're using a background image on the page! You may find that you have to use a larger text size to compensate for the visual distraction from the background image.
All these are important components of page legibility and usability. Consider them all carefully: font, font size, page structure, links and navigation, color, and contrast. When they work together well, visitors see a well-designed, easy-to-read, and informative page. They're likely to stay for a while and make many return visits!