Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing Accessible Text—Part 2: Text Size

Last updated Oct 17, 2003.

Designing web text is fundamentally different from designing text in print. With printed documents, words are set in ink, meaning that designers must choose a text size that’s readable by most readers. People who cannot read text as printed use reading aids such as glasses or document enlargers, or alternate versions such as audio or large-print formats. In print, designers are responsible for setting text size, whereas on the Web, designing text is a collaboration between designer and user.

TIP

Read "Designing Accessible Text—Part 1: Structure" to learn how to use structural markup to design meaningful text.

Accessible designs anticipate and address different user needs. Designers make initial decisions about text size and page layout, but users can adapt those designs to make them readable. By partnering with users, designers are no longer in the role of finding that one miraculous size that will work for all people. Instead, the designer’s role is to code text that can resized by users, and to design page layouts that will adapt gracefully to various text sizes.

In the democratic environment of the Web, where designer and user both have a say in design, accessible designs are achievable, particularly when it comes to text. But designing for graceful transformation is more challenging than designing simple static pages—a fact that has led to many image-based layouts, such as those on the following sites.

Many sites adapt, but not gracefully. Take a look at the following pages with enlarged text and note which text resizes, and how resizing affects the layout:

Designs that ignore or attempt to overcome the flexibility of web pages undermine the universality of the medium. This article embraces flexibility and graceful transformation, with techniques for creating layouts that keep their integrity while honoring user-specified text size settings for pages that are accessible to more users.

NOTE

This article is about sizing text for maximum accessibility, which means that graphic text is not covered. All of the benefits of flexibility and scalability are lost when text is rendered as an image. Avoid using images for text.

Sizing Text

When it comes to text, size matters. Reading is text’s raison d’être, so text sized too small to be read has defeated its purpose. The "right" size for text is subject to the needs of the reader and his or her reading environment. One person’s "too small" is another’s "just right," and the right size in one context—say, reading in bed—is different from the right size in another context, such as when reading directions while driving. Fortunately, the Web doesn’t require a one-size-fits-all solution, because we can size text based on user-defined settings.

Respect User Settings

No one knows better than users what size is optimal for reading. To honor user defaults, we need to set the text size for the body (main) text and all size variations relative to the user-defined text size set in browser preferences. Most browsers come preloaded, with text set to display at 16 pixels. Most designers find this setting too large and promptly reduce the body text to 10–12 pixels or smaller for their designs. The result is pages sporting a wide range of text sizes, and users must adjust their text settings as they move from site to site. Take a look at the text size variations on these pages:

The CSS code in Listing 1 sets the overall text size to 100%, which is the browser setting, with 120% of leading (spacing between lines). With the browser defaults unchanged, text will display at 16 pixels with 19 pixels of leading. The font in this example is Georgia, a cross-platform serif font designed specifically for onscreen reading (see Example 1 and Figure 1).

Listing 1 CSS for user-defined body text.

body
{
  font: 100%/120% Georgia, "Times New Roman", serif;
}
Figure 1

Figure 1 Body text sized to user-specified setting.

Just imagine if all sites used this approach to size body text. Users could set their optimal text size once and have it apply across web pages. Ah, what a wonderful web it would be!

Use Relative Units

Variations in text size convey information visually about the structure of a document. For example, headings are normally larger than body text; supplementary text, such as footnotes and captions, is normally smaller. When designing text, such variations should be coded using relative units, such as percentages or ems, rather than fixed units, such as pixels. Relative units cause elements to size in relationship to the user-defined main text setting. In the example in Listing 2, with body text sized at 16 pixels, the level 1 headings would display at 18 pixels, the level 2 headings at 14 pixels, and the address at 13 pixels. The font used for the headings and address is Verdana—a sans-serif screen font (see Example 2 and Figure 2).

Listing 2 CSS for other text elements.

h1
{
  font: bold 110% Verdana, Arial, sans-serif;
}

h2
{
  font: bold 90% Verdana, Arial, sans-serif;
}

address
{
  font: 80% Verdana, Arial, sans-serif;
}
Figure 2

Figure 2 Other text elements sized relative to body text.

Developing Flexible Layouts

Designing a layout that remains attractive and usable at different text sizes is a challenge. Columns must be able to expand and collapse to accommodate text size changes. Text blocks must be able to wrap, and cannot require a set number of pixels in order to display properly. In general, layouts that require pixel-level precision don’t fare well with resizable text. A better approach is to anticipate text size variations and build layouts that adapt gracefully.

Design for Graceful Transformation

The Web is an unstable environment, with a multitude of variables that can affect the structure and integrity of a design. In large part, this is due to the fact that users have a great deal of control over their browsing environments—to the degree that they can choose to view pages without design by removing the styling, or can apply their own styling. With graceful transformation, designs keep their integrity regardless of the transformations applied by the user.

One problem layout area is horizontal text elements, such as the tabs on the Amazon site. With enlarged text, the tabs exceed the browser window width, meaning that users likely will need to use the horizontal scroll bar to see all the navigation options. Also, the tabs break apart as text exceeds the boundaries of the background graphics (see Figure 3).

Figure 3

Figure 3 Horizontal tabs on the Amazon.com web site break apart with enlarged text.

Fixed-width elements also cause problems. A fixed-width layout is designed by assigning pixel widths to different elements—for example, 200 pixels for the navigation column and 600 pixels for the content column. With a fixed-width column, text must reflow within the set width, which can result in narrow columns of text, or in text that exceeds the column width and overlays the content column, or both (see Figure 4).

Figure 4

Figure 4 Fixed-width columns on The New York Times site narrow and overlap with enlarged text.

For designs that adapt to text size changes, use a liquid layout to create pages that expand and collapse to fill the browser window, as shown in Listing 3. Use a one- or two-column page grid, with percentages to define column widths, leaving the overall page width equal to the width of the browser window (see Example 3 and Figure 5).

Listing 3 CSS for flexible columns.

#content
{
  width: 75%;
  float: left;
}

#navigation
{
  width: 25%;
  float: right;
}
Figure 5

Figure 5 Flexible column widths.

Avoid using horizontal elements that will spill beyond the window width when the text is enlarged. When using horizontal elements, such as tab navigation, keep the number of items to a minimum and allow them to wrap to the window width (see Example 4 and Figure 6).

Figure 6

Figure 6 Flexible horizontal navigation.

Resources

Graceful transformation is a challenging design goal, but a good and useful one. Make sure that the decisions you make about text size don’t get in the way of users who are trying to access your site.

To learn more, check out the following resources:

Save To Your Account