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 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.
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).
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
Absolute Units identifies the five absolute units that are available to us.
| 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.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
