Pixels, rem, em, points and millimetres

CSS units, side by side

Web design mixes several units, and moving between them is a constant chore: a design hands you sizes in pixels, the stylesheet uses rem, a print stylesheet wants points or millimetres, and someone asks how big something is in centimetres. This converter shows any value in all of them at once, so you do not need to work out the conversion each time.

What each unit is

• px is the CSS pixel, a reference unit that is not the same as a physical screen dot. By definition, 96 CSS pixels make one inch.
• rem is relative to the root font size, the size set on the html element. With the browser default of 16 px, 1 rem is 16 px, so 24 px is 1.5 rem.
• em is relative to the font size of the element it is used on, or of its parent. When the parent uses the root size, em and rem give the same result; inside nested elements with different sizes they differ, which is why em compounds.
• pt is the point, 1/72 of an inch, common in print and word processors. 12 pt is 16 px.
• pc is the pica, 12 points or 16 px. mm, cm and in are physical lengths, fixed in CSS to 96 pixels per inch.

Why rem is worth using

Sizing text and spacing in rem lets your layout follow the reader's own font size setting. Someone who has increased the default text size in their browser gets a proportionally larger page, while sizes fixed in pixels ignore the preference. This is a real accessibility benefit. The root size field lets you convert for stylesheets that change the base, such as a 62.5% root that makes 1 rem equal to 10 px.

Print and screen

The conversions to points, millimetres and inches follow the CSS definition, in which an inch is 96 pixels. On a real screen the physical size of a pixel varies with the device, so a 96-pixel line is not always exactly one inch on screen. In print styles the conversion is exact, which is where these units are most useful.

What it does not do

It does not convert viewport units (vw, vh) or percentages, which depend on the size of the window or of the parent, and it does not know the device pixel ratio. To work out the shape of an image or a screen, use the aspect ratio calculator.