Setting text using percentages and ems

As mentioned, the problem with sizing text in pixels is that the text is not resizable in
Internet Explorer. The main problem with using keywords and percentages is that the text
size isn’t consistent across platforms or that easy to define—at least in terms of hitting a
specific target size. This third method—and the one I typically use for websites I design—
enables you to create font sizes that are targeted at a pixel size, but are also resizable in
Internet Explorer, since the measurements are relative units.
The system works by first setting a base font size of 62.5% using a body selector:
body {
font-size: 62.5%;
}
Since most browsers have a default font size of 16 pixels, the previous rule then sets the
default size to 62.5% of that value—in other words, 10 pixels. From here, ems can be used
to define font sizes of specific elements, using values that are one-tenth of the target pixel
size:
h1 {
font-size: 2.0em; /* will be the equivalent of 20px */
}
p {
font-size: 1.2em; /* will be the equivalent of 12px */
}The system isn’t perfect—relative values defined in ems can be inherited, so if a list item is
within another list item, the size of the nested item(s) may increase or decrease, depending
on the value assigned to the parent. However, override rules can easily get around this
problem (see “Dealing with font-size inheritance” in the “Working with lists” section later
in the chapter), and the method generally leads to more satisfactory results from a design,
control, and user point of view than either of the other two methods mentioned. It is
worth noting, however, that this method is somewhat reliant on the user—if someone has
changed the default font size in their browser, your design may not look as intended on
their browser, since the value defined for body may be 62.5% of something other than
16 pixels. Still, few people muck around with their browser settings, and the general consensus
in the industry is that the 62.5% method is the one to go for.

**If using this method, ensure that the font-size setting of all text-oriented elements
you use on the site is adjusted, otherwise you’ll end up with some illegible text set at
62.5% of the default font size. Also ensure you test your work at a range of text sizes
in various browsers, to ensure things still look OK if the text is zoomed in or out.

There is one other thing to bear in mind, though: Internet Explorer (again). Although the
majority of browser-specific issues are left until Chapter 9 of this book, we’ll make an
exception now. Internet Explorer has problems with text-zooming when the font size is set
below 100%, so an additional rule is required:
html {
font-size: 100%;
}
This doesn’t adversely affect other browsers, so you’ll find this rule in the boilerplate documents
from the download files, even thought it should technically be in the conditional
comments documents.