Typography - Pro CSS Techniques - page 204

Using Percentages and Ems to Size Text
It is also common to size text using percentages or ems as the unit of measurement specified
in your CSS. This approach works in a similar fashion as relative-size keywords in that it's based
on the inherited font-size value of the parent element. Consider the following example:
p {
font-size: 120%;
}
If we assume a default size of 16 pixels, this creates an em square of 19.2 pixels (note that some
browsers may round these values to the nearest whole number).
Similarly, you can use the em CSS unit for sizing fonts relative to the inherited value. CSS
defines that 1 em is equivalent to 100 percent when sizing fonts. Because of this, the following
would result in the same 19.2-pixel rendered size as our 120 percent example earlier:
p {
font-size: 1.2em;
}
This method is a favorite among standards-oriented web developers, and part of the reason
is the so-called “62.5 percent hack.”
Richard Rutter's 62.5 Percent Hack
Richard Rutter, proprietor of the popular web design blog Clagnut ( www.clagnut.com/ ), wrote
a seminal piece in web typography back in May 2004. Titled “How to size text using ems,”
Rutter's blog post ( www.clagnut.com/blog/348/ ) outlined a simple method that allows for the
inheritance and resizability of percentages and keywords (even in Internet Explorer), and the
precision of pixels.
The key to Richard's method is one simple line of CSS:
body {
font-size:62.5%;
}
Why 62.5 percent? Recall that nearly all modern web browsers default their text size to 16 pixels.
Because 62.5 percent of 16 pixels is 10 pixels, any element that is a sibling of the body element
has now been reset to display type based on a 10-pixel em square. Now, remember that
100 percent is equal to 1 em. Now that 1 em is 10 pixels, our math becomes very easy: 1 em is
10 pixels, .8 em is 8 pixels, 1.4 em is 14 pixels, and so on.
This is probably the single most popular type sizing method among standards-oriented
designers today, and can definitely be described as a best practice.
Font Styles
CSS provides the font-style property for choosing between normal , italic , and oblique text.
It is as simple as naming the appropriate keyword: