CSS Cookbook

1.2. Specifying Font Measurements and Sizes

Problem

You want to set the size of type used on a web page.

Solution

Set the values of fonts using the font-size property:

P {
 font-size: 0.9em;
}

Discussion

Setting the size of the font with percentages causes the browser to calculate the size of the font based on the size of the parent element. For example, if the font size for the body is set to 12 pixels and the font size for p element is set to 125%, the font size for the text in paragraphs is 15 pixels.

You can use percentages, length units, and font-size keywords to set type size. Length units fall into two categories: absolute and relative. Absolute length units include the following:

• Inches (in)

• Centimeters (cm)

• Millimeters (mm)

• Points (pt)

• Picas (pc)

A point, in terms of the CSS specification, is equal to 1/72nd of an inch and a pica is equal to 12 points.

Because browser displays vary due to different operating systems and video settings, setting type in a fixed (or absolute) value doesn’t make much sense. In fact, it’s best to avoid absolute measurements for web documents, unless you’re styling documents for fixed output. For example, when you create a style sheet to print a web document, absolute length units are preferred. For more on creating style sheets for printing, see Chapter 9.

The CSS specification doesn’t dictate how browser vendors should treat text when the font-size property is set to a value of zero. Therefore different browsers interpret the value unpredictably. For ...