How do I convert em to pixels?

Multiply em by its font reference. For font-size, use the parent font size: 1.5em at 16 px is 24 px. For letter-spacing or line-height, select the property and use the element's own font size. Copy CSS gives a declaration; this page has no download control.

EM to PX Converter

Enter an em value and the parent font size for font-size in pixels. The opening example is 1.5em against a 16 px parent, giving 24 px. Select another supported CSS property to use the element font size for its em length.

PX24 px24 px · the same length is 1.5em against a 16 px parent

px

rem

em

Parent (px)

CSS property

Answer in

Root (px)

1.5em x 16 px parent = 24px. 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: 24px; /* 1.5em 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 em to pixels?: Multiply em by its font reference. For font-size, use the parent font size: 1.5em at 16 px is 24 px. For letter-spacing or line-height, select the property and use the element's own font size. Copy CSS gives a declaration; this page has no download control.

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.