gizmobench

EM to PX Converter

Convert em units using the parent font size you provide. The calculation is shown beside the result so you can check responsive CSS values quickly.

PX24 px24 px · the same length is 1.5em against a 16 px parent
px
rem
em
Parent (px)
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. Exact arithmetic on the context you type: rem divides by the root font size in the box, em divides by the parent font size in the box. Both boxes are yours and neither is read from your browser, so a visitor who has changed their default text size will get a different px value than the one on screen. Media queries are not applied. A percentage here is a font-size percentage, a share of the same parent em uses, and vw and vh are measured against the viewport boxes above rather than the window you are reading this in.

Common questions

Does this run in my browser?
Yes. The page performs the core transformation in your browser and explains the result before you copy or download it.

Exact arithmetic on the context you type: rem divides by the root font size in the box, em divides by the parent font size in the box. Both boxes are yours and neither is read from your browser, so a visitor who has changed their default text size will get a different px value than the one on screen. Media queries are not applied.