Web Design in a Nutshell, 3rd Edition

Length Measurements

The final way that type size may be specified is in a specific number of units. Some units are absolute and some are relative.

The absolute length units are:

• pt (points, 1/72 of an inch in CSS 2.1)

• pc (picas, 1 pica is equal to 12 points)

• mm (millimeters)

• cm (centimeters)

• in (inches)

The relative length units are:

• em (distance from baseline to baseline with no extra line space),

• ex (approximately the height of the letter “x” in the font)

• px (pixels; in CSS, pixels are relative because their actual size can vary by display resolution when the resolution is very different from the typical 75-100 dpi, e.g., on 300 dpi printers)

Specifying a unit length with the font-size property is simple. Just be sure that the value is immediately followed by the unit abbreviation, with no extra space between, like this:

    p {font-size: 12px; }
    h1 {font-size: 1.6em; }

The tricky part comes in knowing which units are the most appropriate for the job. Some units are problematic in terms of accessibility while others are victims of browser inconsistencies.