Setting text using keywords and percentages

A combination of keywords and percentages became fairly popular for a while on the
Web. Available keyword values are xx-small, x-small, small, medium, large, x-large, and
xx-large. A keyword is used to set the base value, using a body selector in CSS, and percentages
are then used to set sizes for specific elements, such as headings, paragraphs, and
lists. Here’s an example:
body {
font-size: small;
}
p {
font-size: 93%;
}

**Keyword values don’t compound, and most modern browsers set a lower limit, even
on xx-small, so text tends never to enter the realm of the illegible.

Although Internet Explorer for Windows can resize text set with keywords (as can all other
browsers), this method has several disadvantages. The most problematic from a design
perspective is that percentage values aren’t particularly consistent across browsers and
platforms. Scaling tends to “jump” at fairly arbitrary percentage sizes, so while 93% may
look the same in all browsers (using default font-size settings, at least), 94% may look like
100% in one and 93% in another. Also, it’s often tricky to equate percentages with the pixel
(or point) sizes typically used in mock-ups.
Also, browsers have historically dealt with keywords badly. Early versions of Netscape 4
ignored keywords entirely, and later releases followed the original specification to the
letter, which was updated accordingly when it was discovered that anything smaller than
medium looked like an ink-footed ant had taken a stroll across your monitor. Not to be outdone,
Internet Explorer 4 and 5 welded CSS keywords to Netscape font size tags, resulting
in the browser displaying everything at the next size down. (You can use conditional
comments to set a different font-size value for Internet Explorer 5—see Chapter 9 for
more on this method.)
In more modern versions of Internet Explorer, fonts that are set to Small in the View ä Text
Size menu can make keyword-set CSS text hard to read, but users can increase the text
size by using a more sensible setting. Also, it’s worth noting that this is up to user choice,
and having a tiny minority of users screwing up their own settings and potentially ending
up with unreadable text is better than the vast majority not being able to resize the text
because its size is defined in pixels. Still, there’s a better method for achieving this, as we
shall see.