How this tool works
First express the entered length in CSS pixels using its own reference. Divide that pixel value by the root font size for rem and by the chosen context font size for em. Separate references matter inside nested components whose text size differs from the document root.
px = rem × root font px; px = em × context font pxA worked example
With a 16px root and 20px em reference, 32px is 2rem but 1.6em. Entering 2rem with the same references reconstructs 32px and 1.6em.
Good to know
CSS reference pixels, not device pixels or physical inches. This does not read the computed styles of your website. For font-size the em reference is the parent font; for many other properties it is the element’s own font size. Property-specific restrictions still apply.
Reference: MDN: CSS relative length units (opens in a new tab) ↗
rem and em can use different font references
A rem length follows the document root’s font size. An em length follows a font context whose meaning depends on the property. For font-size it uses the parent’s font size; for many other properties it uses the element’s computed font size. Two separate references avoid the common mistake of assuming every em equals one rem.
With a sixteen-pixel root and a twenty-pixel context, thirty-two CSS pixels equals two rem but 1.6 em. The percentage calculator can help examine a proportional font change, but a percentage alone does not tell you which CSS reference box or font context a property uses.
CSS pixels are reference units rather than device pixels
A high-density screen can map one CSS pixel to several device pixels, and browser zoom changes the physical appearance without rewriting the declared CSS value. This converter operates in CSS reference pixels and does not infer screen density or physical size.
The tool accepts signed lengths so it can support contexts such as offsets. Whether a negative result is valid depends on the CSS property; negative font sizes are invalid, for example. Inspect the computed styles in your target layout, including inherited font sizes, rather than assuming these numeric conversions alone prove the design will look right.
A few questions, answered
Why can 2rem and 2em differ?
Their font-size references may differ. Enter the actual root and context references separately.
Does this read my website’s computed styles?
No. It calculates from the reference sizes you enter.