Web Design in a Nutshell, 3rd Edition

Absolute Size Keywords

Absolute sizes are descriptive terms that reference a table of sizes kept by the browser. There are seven absolute size keywords in CSS: xx-small, x-small, small, medium, large, x-large, and xx-large. The keywords do not correspond to a particular measurement, but rather are scaled consistently in relation to one another. The default size is medium in current standards-conformant browsers.

Figure 18-3 shows how the following examples of text sized with absolute keywords look in Firefox 1.0.

    <span style="font-size: xx-small">xx-small</span>
    <span style="font-size: x-small">x-small</span>
    <span style="font-size: small">small</span>
    <span style="font-size: medium">medium</span>
    <span style="font-size: large">large</span>
    <span style="font-size: x-large">x-large</span>
    <span style="font-size: xx-large">xx-large </span>

A Word About Ems

In traditional typography, the em has been a measurement of width approximately equal to the width of the capital letter M for the given typeface. Using that measurement, you arrive at the width of an em-space or an em-dash.

As typography has adapted to digital media, the em has become a measure of width and height, or often height alone. For purposes of CSS, the em is calculated as the distance between the baselines when the font is set without any additional interlinear space , also called leading (extra space added between lines of text for legibility).

This distance forms the basis of an implied em-square measurement based on the ...