Bert Bos, style activity leadCopyright © 1994–2025 W3C® Privacy policy
Created 12 Jan 2010;
Last updated Sun 16 Feb 2025 05:40:53 AM UTC
em, px, pt, cm, in…CSS offers a number of different units for expressing length. Some
have their history in typography, such as point (pt)
and pica (pc), others are known from everyday use, such
as centimeter (cm) and inch (in). And
there is also a “magic” unit that was invented specifically for CSS:
the px. Does that mean different properties need
different units?
No, the units have nothing to do with the properties, but everything with the output media: screen or paper.
There is no restriction on which units can be used where. If a
property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin:
1.2in; margin: 0.5cm) and vice-versa.
But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:
| Recommended | Occasional use | Not recommended | |
|---|---|---|---|
| Screen | em, px, % | ex | pt, cm, mm, in, pc |
| em, cm, mm, in, pt, pc, % | px, ex |
The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc
If you have a ruler handy you can check how precise your device
is: here is a box of 1in (2.54cm) high: ↑
72pt
↓
The so-called absolute units (cm, mm, in, pt and pc)
mean the same in CSS as everywhere else, but only if your output
device has a high enough resolution. On a laser printer, 1cm
should be exactly 1 centimeter. But on low-resolution devices, such
as computer screens, CSS doesn't require that. And indeed, the
result tends to be different from one device to another and from one
CSS implementation to another. It's better to reserve these units
for high-resolution devices and in particular for printed output. On
computer screens and handheld devices, you'll probably not get what
you expect.
In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.
CSS doesn't define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.
There is another reason to avoid absolute units for other uses
than print: You look at different screens from different distances.
1cm on a desktop screen looks small. But the same on a mobile phone
directly in front of your eyes looks big. It's better to use
relative units, such as em, instead.
The em and ex units depend on the font
and may be different for each element in the document. The em is simply the font size. In an element with a 2in font,
1em thus means 2in. Expressing sizes, such as margins and paddings,
in em means they are related to the font size, and if
the user has a big font (e.g., on a big screen) or a small font
(e.g., on a handheld device), the sizes will be in proportion.
Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS.
The ex unit is rarely used. Its purpose is to express
sizes that must be related to the x-height of a font. The x-height
is, roughly, the height of lowercase letters such as a, c,
m, or o. Fonts that have the same size (and thus the
same em) may vary wildly in the size of their lowercase
letters, and when it is important that some image, e.g., matches the
x-height, the ex unit is available.
The px unit is the magic unit of CSS. It is not
related to the current font and usually not related to physical
centimeters or inches either. The px unit is defined to
be small but visible, and such that a horizontal 1px wide line can
be displayed with sharp edges (no anti-aliasing). What is sharp,
small and visible depends on the device and the way it is used: do
you hold it close to your eyes, like a mobile phone, at arms length,
like a computer monitor, or somewhere in between, like an e-book
reader? The px is thus not defined as a constant
length, but as something that depends on the type of device and its
typical use.
To get an idea of the appearance of a px, imagine a
CRT computer monitor from the 1990s: the smallest dot it can display
measures about 1/100th of an inch (0.25mm) or a little more. The
px unit got its name from those screen pixels.
Nowadays there are devices that could in principle display smaller
sharp dots (although you might need a magnifier to see them). But
documents from the last century that used px in CSS
still look the same, no matter what the device. Printers,
especially, can display sharp lines with much smaller details than
1px, but even on printers, a 1px line looks very much the same as it
would look on a computer monitor. Devices change, but the px always has the same visual appearance.
In fact, CSS requires that 1px must be exactly
1/96th of an inch in all printed output. CSS considers that
printers, unlike screens, do not need to have different sizes for
px in order to print sharp lines. In print media, a px
thus not only has the same visual appearance from one device to
another, but indeed it is measurably the same.
CSS also defines that raster images (such as photos) are, by
default, displayed with one image pixel mapping to 1px. A photo with
a 600 by 400 resolution will be 600px wide and 400px high. The
pixels in the photo thus do not map to pixels of the display device
(which may be very small), but map to px units. That
makes it possible to exactly align images to other elements of a
document, as long as you use px units in your style
sheet, and not pt, cm, etc.
em or px for font sizesCSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and
similar units in preference to cm or in.
In CSS there is no reason to use pt, use whichever unit
you prefer. But there is a good reason to use neither
pt nor any other absolute unit and only use em and px.
Here are a few lines of different thickness. Some or all of them may look sharp, but at least the 1px and 2px lines should be sharp and visible:
0.5pt, 1px, 1pt, 1.5px, 2px
If the first four lines all look the same (or if the 0.5pt line is missing), you are probably looking at a computer monitor that cannot display dots smaller than 1px. If the lines appear to increase in thickness, you are probably looking at this page on a high-quality computer screen or on paper. And if 1pt looks thicker than 1.5px, you probably have a handheld screen.
The magic unit of CSS, the px, is a often a good unit
to use, especially if the style requires alignment of text to
images, or simply because anything that is 1px wide or a multiple of
1px is guaranteed to look sharp.
But for font sizes it is even better to use em. The
idea is (1) to not set the font size of the BODY element (in HTML),
but use the default size of the device, because that is a size that
the reader can comfortably read; and (2) express font sizes of other
elements in em: H1 {font-size: 2.5em} to
make the H1 2½ times as big as the normal, body font.
The only place where you could use pt (or cm or in) for setting a font size is in style
sheets for print, if you need to be sure the printed font is exactly
a certain size. But even there using the default font size is
usually better.
The px unit thus shields you from having to know the
resolution of the device. Whether the output is 96 dpi, 100 dpi,
220 dpi or 1800 dpi, a length expressed as a whole number of px always looks good and very similar across all devices.
But what if you do want to know the resolution of the
device, e.g., to know if it is safe to use a 0.5px
line? The answer is to check the resolution via Media Queries. Explaining
Media Queries is out of scope for this article, but here is a small
example:
div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
/* Media with 2 or more dots per px */
div.mybox { border: 1.5px solid }
}
To make it even easier to write style rules that depend only on
the default font size, CSS has since 2013 a new unit: the rem. The rem (for “root em”) is the font size
of the root element of the document. Unlike the em,
which may be different for each element, the rem is
constant throughout the document. E.g., to give P and H1 elements
the same left margin, compare this pre-2013 style sheet:
p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }
with the new version:
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }
Other new units make it possible to specify sizes relative to the
reader's window. These are the vw and vh.
The vw is 1/100th of the window's width and the vh is 1/100th of the window's height. There is also vmin, which stands for whichever is the smallest of vw and vh. And vmax. (You can
guess what it does.)
Because they are so new, they don't work everywhere yet. But, as of early 2015, several browsers support them.
Bert Bos, style activity leadCreated 12 Jan 2010;
Last updated Sun 16 Feb 2025 05:40:53 AM UTC