Report Tool or Give Us Suggestions

EM to PX Converter

Convert CSS em values into pixels, plus percent, rem, and points using a configurable parent font size.

L ading . . .

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.

logo OnlineMiniTools

OnlineMiniTools.com is your ultimate destination for a wide range of web-based tools, all available for free.

Feel free to reach out with any suggestions or improvements for any tool at admin@onlineminitools.com. We value your feedback and are continuously striving to enhance the tool's functionality.

© 2026 OnlineMiniTools . All rights reserved.

Hosted on Hostinger

v1.10.0