Lengths and Units
The value type for many CSS properties is specified as
length is a measurement comprising a numeric value
and a unit only—whitespace can’t appear between the number and the
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.
||the current font size|
||the x-height of the current font|
depend on the font size that’s applied to the element.
1em is defined as being equal to the font size,
however that may be defined. When we specify a font size in
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.
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
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.
px units must not be used
tty media type (for instance, character-grid
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.
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.
- 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.