EM to PX Converter
Convert CSS em values into pixels, plus percent, rem, and points using a configurable parent font size.
EM to PX Converter turns CSS em font sizes into absolute pixel values and shows the matching
%, rem, and pt equivalents next to them. EM is a relative unit, so the
tool needs a parent font size in pixels to compute pixels accurately. Change the parent value if your component
inherits anything other than the default 16 px and the rest of the outputs update in real time.
The math behind em → px
For an em value \( E \) and a parent font size in pixels \( P \), the pixel result is:
$$ \text{px} = E \times P $$
Because percent and em express the same ratio relative to the parent font size, percent is just \( E \times 100
\). REM equals EM when the parent and the root <html> font sizes are identical. Points come
from the CSS rule that 96 px equals 1 inch and 72 pt equals 1 inch:
$$ \text{pt} = \text{px} \times \frac{72}{96} $$
When EM to PX conversion is helpful
- Design hand-off: Translate em-based design tokens to pixel sizes for screenshots, mocks, or documentation.
- Component sandbox: Verify how a component that ships in em renders inside a parent whose font size is not the default 16 px.
- Email + print: Generate the equivalent points for environments that prefer absolute units.
- Accessibility review: Confirm minimum touch / typography sizes in pixels for WCAG checks.
Common em ⇄ px values (parent = 16 px)
- 0.75 em → 12 px → 9 pt → 75%
- 1 em → 16 px → 12 pt → 100%
- 1.5 em → 24 px → 18 pt → 150%
- 2 em → 32 px → 24 pt → 200%
Frequently Asked Questions
Why does 1 em sometimes look different on two pages?
Because em is inherited from the parent element. Changing the parent's font-size scales every em child along with it. Always check the parent value when sizes drift unexpectedly.
Is em the same as rem?
Only when the parent element shares its font-size with the document root. EM cascades from the
nearest parent, while REM always references the <html> element.
How precise is the converter?
The math runs in double-precision JavaScript floats and outputs values trimmed to 12 significant digits, which is far more than CSS rendering will use.
Does it work offline?
Yes. After the page loads no network calls are made. Conversions happen entirely on your device.
Related tools
Your recent visits