PX to EM Converter (Pixels to EM)

Pixels to EM

Pixels (px) to em (em) at any parent font size.

Value

Convert to

1.5em

Parent font size (px, for em)

Precision (significant figures)

Formula

em = px ÷ parent size

1 px = 0.0625 em with a 16 px parent font size

Px to em chart

Values in em for common parent font sizes. em compounds when nested.

Pixels (px)	14 pxem, 14 px parent	16 pxem, 16 px parent	18 pxem, 18 px parent	20 pxem, 20 px parent
1	0.0714286	0.0625	0.0555556	0.05
2	0.142857	0.125	0.111111	0.1
4	0.285714	0.25	0.222222	0.2
8	0.571429	0.5	0.444444	0.4
10	0.714286	0.625	0.555556	0.5
12	0.857143	0.75	0.666667	0.6
14	1	0.875	0.777778	0.7
16	1.14286	1	0.888889	0.8
18	1.28571	1.125	1	0.9
20	1.42857	1.25	1.11111	1
24	1.71429	1.5	1.33333	1.2
28	2	1.75	1.55556	1.4
32	2.28571	2	1.77778	1.6
40	2.85714	2.5	2.22222	2
48	3.42857	3	2.66667	2.4
64	4.57143	4	3.55556	3.2

When you need this conversion

You have pixel values from a design and want them to scale with the text they sit next to. Button padding, the gap between an icon and its label, and the margin under a heading all look best when they grow with the font size. Writing them in em does exactly that.

How em is resolved

The browser takes the element’s computed font size and multiplies. For font-size itself, em refers to the parent font size; for every other property (padding, margin, width), it refers to the element’s own font size. That’s why this converter asks for a parent size: it’s the number that matters.

8 px of padding on a 16 px button: 0.5em
24 px heading inside 16 px body text: 1.5em
12 px caption inside 16 px text: 0.75em

Common mistakes

Nesting em font sizes. Each level multiplies the one above it. Three nested elements at 1.2em end up at 1.728 times the base. If that’s not what you want, use rem for font sizes and keep em for spacing.

Assuming 1 em is always 16 px. It is only 16 px when the parent is 16 px. Inside a 20 px heading, 1 em is 20 px.

For sizes that shouldn’t compound, see pixels to rem. For the reverse, use em to pixels.

Questions

How many em is 16 px?

1 em when the parent font size is 16 px, which is the browser default for body text.

What is the difference between em and rem?

em is relative to the parent element's font size; rem is relative to the root (html) font size. em compounds when elements are nested, rem does not.

Why did my em sizes get bigger than expected?

Because em compounds. A list set to 1.2em inside another 1.2em list is 1.44 times the base size. Use rem for font sizes if you don't want that.

When should I use em?

For spacing that should scale with an element's own text, like button padding or icon size next to a label.