Body Text: The Ten-Point Rule

Is bigger better? There isn't a single text size or typeface that appeals to all audiences or fits all situations. Some people simply prefer small fonts to large fonts and can read the text in both equally well. For people with diminished eyesight, however, large text is a necessity.

A small font size is not a solution for fitting more content on a page. More text often means less reading. Dense text drives people away.

When choosing font sizes, it's best to go larger to avoid alienating some of your readers. At a minimum, make sure that body text is at least ten points. Smaller text quickly diminishes readability because smaller letters simply don't look as distinct, even for people with normal vision. Minuscule characters tend to lose their characteristic shapes on the screen, especially when bolded or italicized.

Recommended Text Sizes

Audience Type	Point Size
General audience	10 - 12
Senior citizens & people with visual impairments	12 - 14
Young children and other beginning readers	12 - 14
Teenagers/young adults	10 - 12

A small font size is not a solution for fitting more content on a page. And having more content doesn't mean that people will read more. In fact, they will probably read less. Dense text drives people away. This is a true example of the "more is less" dictum for design: More text often means less reading.

It's better to choose your content wisely than to cram everything on one page. If your Web site is truly hurting for space, it's fine to bend the rules a bit and use smaller text in areas most people don't care about, such as terms of use, affiliate network, copyright, and legal notices. Otherwise, stick to text sizes that people can read comfortably.

When faced with space issues, first try to cut the text. If this is not possible, put the least important text on secondary pages that can be accessed through hyperlinks. Focus the initial page on the information that everybody needs and there's a chance that they may actually read it.

Tip: Avoid Anti-Aliasing

Anti-aliasing is an action that smoothes jagged edges of vector-based shapes and text. Designers often use anti-aliasing to make objects appear more polished and refined, but this can create new problems such as blurred text. Avoid anti-aliasing for text sized smaller than 12 points. Otherwise use it sparingly, as it bloats the size of image files and increases downloading time, irritating users.

Compare the difference in readability between these two examples. Notice that the text in the first example appears crisper than the text in the second example. This is because the first screen shot is the alias version and the second has been anti-aliased.

www.philipmorrisusa.com

Age Is Not the Issue

Small, faint text is not only a problem for middle-age people and senior citizens. In a recent study conducted with teenagers, we found that they don't like inconspicuous text any more than their aging parents do. Teenagers scan quickly and want important elements to grab their attention. Even with perfect vision, they prefer to skim a page without having to strain.

Glasses, contact lenses, and environmental factors such as illumination levels can affect people's ability to read text, regardless of age or visual level. Having text that is legible under various environmental and physical conditions ensures that your audience can comfortably use your interface in the way you intended.

Can you read this? Even teenagers with perfect vision had difficulty reading the tiny text on this site. The italicized light blue text blends with the background, making it difficult to make out the words.

www.pg.com

Young people complained about the tiny font sizes on this site. One user in particular explained that being seen squinting at small fonts tarnished her image: It's cool to lean back in your chair and use the Web, but uncool if it looks like you're straining.

"You look at this stuff and it's hard to see. You have to squint. These are really small and you can't see. It needs to be a little bigger."

"The writing is kind of small."

www.mtv.com

Tip: When the Same Size Appears Smaller

Test different typefaces and make sure to account for size differences. The same size font may appear smaller or larger depending on the typeface. For example, the same text in 12-point font appears larger in Georgia than in Times New Roman.

This is how text appears in 12-point Georgia.

This is how text appears in 12-point Times New Roman.

Planning for Differences in Hardware

Typography decisions should allow for a wide range of computer systems, from top-of-the-line to very old. Web sites appear differently onscreen depending on the hardware. Text that appears reasonably crisp on new, fancy monitors can look fuzzy on outdated ones, especially in small sizes.

Unless you're designing for high-end users, assume that a significant percentage of your audience is using old machines with poor monitors.

Just because you can see text well on your screen doesn't mean that your audience can on theirs. People who work in the computer technology industry tend to have the most up-to-date systems. Web sites are often created and tested on powerful machines with big monitors and high resolution, making it easy to forget that the rest of the world doesn't have the same equipment.

Unless you're designing for high-end users, assume that a significant percentage of your audience is using old machines with poor monitors. Senior citizens, teenagers, and young kids often use donated or hand-me-down equipment and low-performance monitors. People in offices work on laptops with small displays and on surprisingly old computers. If you know that a significant portion of your audience uses older equipment, it is worth the effort to use crisp font styles and larger font sizes so that they can easily make out the words.

Common Screen Resolutions

Current statistics show that most people's computers have screen resolutions of 800 by 600 pixels or 1024 by 768 pixels. The larger screen size is the most popular, and trends indicate that 1024 by 768 will be the smallest common screen in the future.

The chart on the next page shows the trend in monitor sizes used by a broad sample of users during a seven-year period. While the use of small monitors has been declining rapidly, big monitors have still not seen explosive growth. But monitors with screen resolutions of 1600 by 1200 pixels or greater are already in common use in high-end businesses. Large monitors will gradually become more common for home users as well because they allow for much more efficient use of both the Web and many common applications.

Trends in Screen Resolution

Note: The figures for 1999 to 2005 are empirical data while those for 2006 to 2009 are estimates. (Source data: TheCounter.com (1999-2001), OneStat.com (2002-2005), and W3Schools.com (2002-2005). All sites sampled a wide range of users.)

Remember, it pays to know your audience. These general trends may not accurately reflect your readership. While it's impossible to know exactly what equipment most of your audience is using, you should have a good idea. If your design is rigid and requires a specific screen resolution setting, some viewers might not be able to use your Web site.

Accessibility Affects All of Us

Interface design can either cripple or empower users. People with normal capabilities can be hobbled by cumbersome interfaces just as those with disabilities can be liberated by well-designed sites. To be accessible, a site must be approachable by audiences with varying levels of abilities.

An accessible site is one that removes obstacles that get in people's way; removing the obstacle overcomes the disability. For example, allowing visually impaired people to resize text results in better readability, thereby eliminating the visual impairment even though the person's sight remains the same.

Don't assume that all people who are visually impaired use assistive technology. Visual impairments run a wide gamut, from diminished vision to no perception of light. Users on the milder end of the spectrum might not require assistive technology but need resizing capabilities to read. Even people with good eyesight sometimes need to boost up the text size, especially when using displays with low-resolution settings.

The severity and level of visual impairments generally increase with age. As our population ages, this will become a more common issue in Web design. All of us at some point in our lives will have some degree of visual impairment.