gizmobench

PX to EM Converter

Enter a pixel value and parent font size to calculate em units. The formula stays visible and no CSS or input leaves your device.

EM1.5em24 px against a 16 px parent · the same length is 1.5rem at a 16 px root
px
rem
em
Parent (px)
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. 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.