Category list

Chapter 1. Flexible Text

Size text using keywords and percentages to allow user control and maximum flexibility.

Few Web design topics are as storied and controversial as sizing text for the Web. Historically, it's been known to confuse beginners , fuel arguments, and divide nations. Well, perhaps that's exaggerating things a bit, but it truly can be a sticky subject for many.

While I'm in no position to rid the world of its war on text sizing, in this chapter I share a single strategy for sizing text on the Web that is both flexible and easy to implementand at the same time allows you to maintain as much design control as possible.

The allowance for flexibility in sizing text is one of the keys that drive the rest of the examples in this bookthat by giving the user the ability to control the size of text on the page, we're increasing its readability for all the Web's citizens . The real challenge lies in enabling that flexibility, while still having the ingenuity to craft interesting design around it. And by the end of this book, you'll be well on your way to meeting that challenge, with a solid foundation of examples to guide you.

To understand how best to be flexible when sizing text, let's first look at a common example and why it's not flexible.

A Common Approach

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.

Flylib.com

Category list

Similar pages

Chapter 1. Flexible Text