How do I convert px to em?

Divide the px length by its font reference. For font-size this is the parent font size. At 16 px, 24 px is 1.5em. For letter-spacing or line-height, select the property and use the element's own font size; Copy CSS then names that property.

PX to EM Converter

Enter a pixel length and the parent font size for font-size in em. The opening example is 24 px against a 16 px parent, giving 1.5em. Select letter-spacing or line-height to use the element font size instead.

EM1.5em24 px against a 16 px parent · the same length is 1.5rem at a 16 px root

px

rem

em

Parent (px)

CSS property

Answer in

Root (px)

24px / 16 px parent = 1.5em. em is measured against the 16 px parent font size in the box, which is the size text inherits where the rule applies.

font-size: 1.5em; /* 24px against a 16 px parent */

Preview at 24 px

The quick brown fox jumps over the lazy dog

Three conversions, with their context

Each row states the size it was measured against, because the answer changes when that size does. Copy gives you the CSS value.

24 px, root 16 pxto rem
1.5rem
1.5rem, root 16 pxto px
24 px
24 px, parent 20 pxto em
1.2em

Accuracy. Arithmetic on the sizes you type: px to rem divides by the root font size in the box; px to em divides by the parent font size in the box for font-size, or by the element font size for spacing and line height. Displayed decimals can be rounded. Media queries are not applied. A percentage uses the font reference in the box for font-size or line-height; letter-spacing does not accept percentages. Viewport units use the sizes you supply. Negative results are arithmetic values; font-size and line-height declarations require nonnegative values.

Common questions

How do I convert px to em?: Divide the px length by its font reference. For font-size this is the parent font size. At 16 px, 24 px is 1.5em. For letter-spacing or line-height, select the property and use the element's own font size; Copy CSS then names that property.

Arithmetic on the sizes you type: px to rem divides by the root font size in the box; px to em divides by the parent font size in the box for font-size, or by the element font size for spacing and line height. Displayed decimals can be rounded. Media queries are not applied.