Lengths and Units

The value type for many CSS properties is specified as <length>. A length is a measurement comprising a numeric value and a unit only—whitespace can’t appear between the number and the unit.

The numeric value can be either an integer or a real number. If the numeric value is 0, the unit can be omitted (after all, zero pixels is the same measurement as zero millimeters).1 But if the value isn’t zero, the unit must be specified.2

The units in which length is measured can be either relative or absolute, but an absolute unit is useful only if the physical properties of the output medium are known.

Relative Units Explained

The three possible relative units are listed in Table 1.

Table 1. Relative Units
Unit Description
em the current font size
ex the x-height of the current font
px pixels

The em and ex units depend on the font size that’s applied to the element.

A measurement of 1em is defined as being equal to the font size, however that may be defined. When we specify a font size in em, 1em is equal to the inherited font size—that is, the size the text would have had if we hadn’t changed it. As such, font-size:1.2em; makes the text 1.2 times larger than the parent element’s text.

This unit’s name is a centuries-old legacy from the typographic world, where an M-square or “mutton square” was a blank, square type whose sides’ length was equal to the width of an uppercase M—usually the widest character—in that font.

The ex unit is equal to the x-height of the current font, which is normally the height of a lowercase x, as depicted in Figure 1. Interestingly, an x-height is defined even for fonts that don’t include a lowercase x.

Figure 1. Font size and x-height An image showing the text "The quick brown fox" illustrating
          the difference between line font size and x-height. The font size
          extends from the top of the tallest letter to the bottom of the tail
          on the q. The x-height is the height of the lowercase letter
          x.

In CSS, pixels are considered to be a relative unit because they don’t correspond to a fixed physical measure. The CSS2.1 specification provides a lengthy definition of pixel measurements, but the bottom line is that a pixel is relative to the viewing distance. A standard pixel is 0.26mm (1/96 inch) square.

On an LCD computer monitor, or similar device, a pixel is usually the smallest area that can be rendered. On high-resolution output devices, such as laser printers or photosetters, pixels must be rescaled by the user agent so that, for example, a one-pixel border is approximately as wide on paper as it is on a computer screen. As such, pixel measurements are relative to the device on which the document is reproduced.

Note that px units must not be used for a tty media type (for instance, character-grid devices).

Note: Pixels and Accessibility

The classification of pixels as relative units has nothing to do with the concept of relative units as it’s defined in the Web Content Accessibility Guidelines (WCAG) 1.0, where “relative” means that web page elements can scale easily to meet the needs of the user—for example, changing the text size in the browser, or changing the size of the browser window. In WCAG terms, pixels are absolute, as you can’t change the size of a pixel from within your browser.

Absolute Units Explained

Table 2 identifies the five absolute units that are available to us.

Table 2. Absolute Units
Unit Description
mm millimeters
cm centimeters
in inches
pt points
pc picas

Millimeters and centimeters are defined in the SI standard. Inch measurements are now used mainly in the United States. One inch measures 25.4mm.

A point is an old typographic measurement, but multiple standards were used for points in print, and the Didot point used in continental Europe was slightly larger than the point used in Britain and America. In CSS, one point is defined as 1/72 inch (0.353mm), just as it is in PostScript.

A pica is equal to 12 points, just as it is in typography, which translates into 1/6 inch or 4.23mm in CSS.

Physical (absolute) units shouldn’t normally be used for on-screen display. A font size specified as 7pt may be readable (albeit barely) at nine pixels on a 96dpi Windows system, but it will display at an illegible seven pixels on an older 72dpi Mac system.

In a similar vein, pixels shouldn’t usually be used when you’re specifying styles for print media. Although user agents are expected to rescale pixels if necessary, pixels don’t make sense on high-resolution devices.

Footnotes

1 It could even be argued that the unit should be omitted if the number is 0.

2 The line-height property can take a non-zero, unit-less value, but it’s not a value of the type <length>.

User-contributed notes

ID:
#1
Contributed:
by Eberhard Speer
Date:
Fri, 09 Jul 2010 05:37:57 GMT

Pls review the statement "A pixel is 0.26mm square". It is confusing. I think it should read "A pixel is a square with sides of approx. 0.26mm. One might think that is pixel = 0.26<sup>2</sup>mm.

Related Products