Pixels to em

Pixels to em and back for a given parent size, with the compounding shown.

pixelsem

24px ÷ 16 = 1.5em (16px parent size)

Parent font sizepxem is relative to this.

The same value in every unit

points
18pt
24px ÷ 1.3333 = 18pt (96 px per inch ÷ 72)
inches
0.25in
24px ÷ 96 = 0.25in (96 px per inch)
centimetres
0.635cm
24px ÷ 37.7953 = 0.635cm (96 px per inch ÷ 2.54)
millimetres
6.35mm
24px ÷ 3.7795 = 6.35mm (96 px per inch ÷ 25.4)
picas
1.5pc
24px ÷ 16 = 1.5pc (96 px per inch ÷ 6)

In short

Divide pixels by the parent element's font size to get em: 24px is 1.5em inside a 16px parent and 1.2em inside a 20px one. Multiply em by the parent size to get pixels. The parent size is the part people forget, and the reason em can surprise you.

The formula

em = px ÷ parent font size
px = em × parent font size
nested: size = base × em × em × …

Reference tables

Computed by the same code as the converter above.

Pixels to em
pixels	Parent 14px	Parent 16px	Parent 20px
8px	0.5714em	0.5em	0.4em
10px	0.7143em	0.625em	0.5em
12px	0.8571em	0.75em	0.6em
14px	1em	0.875em	0.7em
16px	1.1429em	1em	0.8em
18px	1.2857em	1.125em	0.9em
20px	1.4286em	1.25em	1em
24px	1.7143em	1.5em	1.2em
28px	2em	1.75em	1.4em
32px	2.2857em	2em	1.6em
40px	2.8571em	2.5em	2em
48px	3.4286em	3em	2.4em

Em to pixels
em	Parent 14px	Parent 16px	Parent 20px
0.5em	7px	8px	10px
0.75em	10.5px	12px	15px
0.875em	12.25px	14px	17.5px
1em	14px	16px	20px
1.125em	15.75px	18px	22.5px
1.25em	17.5px	20px	25px
1.5em	21px	24px	30px
2em	28px	32px	40px
3em	42px	48px	60px

Em compounds, and that is both its use and its trap

An em is the font size of the element it is used on, and for font-size itself that means the parent's. Nest three lists that each set font-size: 1.2em and the innermost text is 16 × 1.2 × 1.2 × 1.2 = 27.648px, not 19.2px. That is the classic em bug, and it is why rem was added to CSS.

The same behaviour is what makes em right for some jobs. Padding in em on a button grows with the button's own text, so a large button and a small one keep the same proportions from one rule. An icon sized at 1em matches whatever text it sits beside. Use em when something should scale with its own text, and rem when it should scale with the page.

A converter can only answer for a stated parent size, so this one asks for it. If you do not know the parent size, inspect the element in your browser's developer tools: the computed font-size of the parent is the number to use.

Worked examples

Real sizes, with the sums.

Nested lists at 1.2em

You give it

Three levels of ul { font-size: 1.2em } on a 16px page.

You get

19.2px, then 23.04px, then 27.648px. With 1.2rem instead, every level stays at 19.2px.

Button padding that scales with its label

You give it

A 14px label with 10px vertical and 16px horizontal padding.

You get

10 ÷ 14 = 0.7143em and 16 ÷ 14 = 1.1429em. Set the label to 18px and the padding becomes 12.86px and 20.57px without another rule.

Questions people ask

Straight answers. Each one links directly: copy the address after opening it.

How many pixels is 1em?

The font size of the parent element: 16px if nothing on the page changes it, but any ancestor that sets a font size changes the answer.

Why is my em size bigger than I expected?

Because em compounds. If a parent is already 1.2em of its parent, 1.2em inside it is 1.44 times the base. Switch to rem for sizes that should not compound.

When should I use em instead of rem?

For spacing and icons that should scale with their own text, such as button padding or an icon beside a label. For type sizes across a page, rem.