A Common Approach | Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

To illustrate a common method for text sizing, let's take a look at eyeglasses.comsurely its sight-impaired visitors would benefit from a Web site that values readability and user control (Figure 1.1).

Figure 1.1. To demonstrate a common method for text sizing, we'll use the Web site eyeglasses.com (shown here as it appeared in December 2004).

Eyeglasses.com makes good use of CSS for all of its design details and, like scores of other nicely designed sites on the Web, it uses the font-size property on the <body> element to declare a base size for the entire page in pixel units:

^note

It's important to point out that we're not scorning the designers of eyeglasses.com. In fact, it's a very nicely designed site, built with structured markup and CSS for its designprecisely why I've chosen it. Bravo for that. We're just in need of an excuse to talk about text sizing and the pros and cons associated with the most common method of all.

 body {   font-size: 11px;   }

By setting a size (11px in this case) for text on the <body> element, the designers ensure that the entire page (unless overridden by a subsequent rule) will display text at 11 pixels. The upside to using pixel units is that they stand the best chance of looking the same in size, regardless of what browser or device is reading the text. It's because of this consistent, predictable size that using pixel units has become a rather popular choice for designers. Those who desire pixel-perfect precision over the size at which type appears on a Web page choose pixel units over all other options. There is, however, one little problem.

WHY IT'S NOT BULLETPROOF

Sizing text with pixels gives the designer control over the size of type, yet poses a problem for users of the most popular Web browser out there (at the time of this writing): Internet Explorer for Windows (IE/Win).

Browsers typically provide the user with a means to control the size of text on the page, overriding the size that is specified by the designer. This is great, and extremely useful for someone who is visually impaired. To increase readability, a user with poor vision can choose a larger font size via a browser menu (Figure 1.2).

Figure 1.2. The Text Size menu in IE6/Win allows the user to adjust the size of text on the page in either direction.

Sounds perfect, doesn't it? But there's a catch. Internet Explorer users on Windows won't be able to override the size of text specified by the designer when pixel units are used. So while using pixel units gives the designer the greatest precision in determining font size, it also eliminates the possibility for IE/Win users to adjust that size if they so desire. Ouch. Users of other browsers can safely adjust font size no matter how the fonts are specified.

The ability to adjust text size is essential for people with poor vision, and those users who want to increase readability on Web pages that feature small text by default appreciate the option. As designers, it's our nature to want complete control over the appearance of an entire Web page. But in giving up just a smidgeon of that control related to text sizing, we're improving the experience and accessibility for everyone.

^note

Technically, a pixel is a relative unit of measurement, relative to the resolution of the device that is displaying or printing it. For example, a pixel's actual size differs depending on whether it's being displayed on a small computer screen or printed on a page with other elements. (For more on this, check out www.w3.org/TR/REC-CSS2/syndata.html#pixel-units.)

As for IE/Win's reluctance to resize text set with pixel units, perhaps the developers stuck to the idea that a pixel is a pixelan infallible unit that should never change, even if users wish to supersede (which they should have every right to do). Regardless, all other browsers got it right, allowing text sized with pixel units to be overridden by user-defined controls.

Life would be simple if designers could choose to declare a font size in pixels, and users could adjust however they wished, but because of the inability to scale that text in IE/Win, that's not optimal. So let's explore alternate methods for sizing text. Eventually, we'll settle on a strategy where we give up that exact precision that using pixel units offers but gain the important advantage of scalability in all browsers.