Recipe 2.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 by using the font-size property:

p {  font-size: 0.9em; }

Discussion

The font-size property can take on different values and use several units. In the solution, em units were used. There are other units like percentages.

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

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.

Relative units

Relative units set the length of a property based on the value of another length property. Relative length units include the following:

Em
X-height (ex)
Pixels (px)

Em units refer to the default font size set in the preference of the user's browser, while x-height (ex) refers to the height of the lowercase letter x in the font.

Pixels are the smallest dot that can be made on a computer screen.

Setting the size of fonts to zero or a negative value

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 example, such text isn't visible in the Firefox or Mozilla browser. In Internet Explorer for Macintosh and Safari, the text isn't hidden, but, rather, is displayed at the default value of the font size. The Opera browser displays the text at a smaller, but still legible, size. And Internet Explorer for Windows sets the type size to a small, illegible, but still visible line of text that appears to be equal to the size of 0.1em, as you can see in Figure 2-4.

Figure 2-4. Internet Explorer for Windows showing illegible type when the font size is set to zero

If you want to make text invisible, use the CSS properties visibility or display instead of setting the size of fonts to zero.

p {  display: none; }

A negative value for length, such as -25cm, for the font-size property isn't allowed.