a style guide

Scalable text

You can make life easier for vision-impaired Web users by designing pages that allow users to enlarge text. To create scalable text, use values that size text relatively—preferably ems or percentages. Users cannot resize text that is set with absolute length units, like points and picas. (I describe the types of values used to size text and explain further why ems and percentages are preferable to other types for creating scalable text in Relative units and Keywords.)

Although ems are an excellent choice for creating scalable text, using ems presents a problem. Consider this style sheet:

body {
 font-size: 1em;
}

h1 {
 font-size: 1.25em;
}

p {
 font-size: .8em;
}

In this case, 1 em equals the user's default type size. Some Web designers, however, prefer a smaller size for the main text. In the style sheet above, I set the type size of the p element to .8em. But this raises a problem: If a user sets the Text Size setting in Internet Explorer's View menu to Smaller or Smallest, the text becomes too small to be readable. However, as Owen Briggs discovered, setting the initial text size to a percentage solves the problem:

body {
 font-size: 100%;
}

h1 {
 font-size: 1.25em;
}

p {
 font-size: .8em;
}

For more information about making your Web sites more accessible, see the Web Content Accessibility Guidelines, developed by the World Wide Web Consortium's Web Accessibility Initiative.