EM units are relative by design: 1em equals the font size of the parent element, so the same EM value means different pixel sizes in different contexts. That relativity is powerful for scalable design — and confusing when you need a concrete number for a mockup, an image, or a debugging session. This converter resolves it: enter an EM value and the parent font size in pixels, and it returns the exact pixel size, plus the reverse direction for checking. It is the companion to the REM converter on this site, with one crucial difference: REM is relative to the root element, while EM is relative to the immediate parent, which is why nested EM values compound. Enter your numbers, read the pixels, and stop guessing what an EM is worth in a given context.
Quick Answer: Enter an EM value and the parent font size in pixels, and get the exact pixel size — with the reverse conversion included.
Free Online Tool
EM to PX Converter
How to Use the EM to PX Converter
- Enter the EM value you want to convert.
- Enter the parent element font size in pixels.
- Read the resulting pixel size instantly.
- Use the reverse result to check a pixel size back in EM.
- Copy the value you need into your stylesheet or design file.
Key Features
- Instant EM to pixel conversion
- Adjustable parent font size for any context
- Reverse conversion: pixels back to EM
- Clear formula shown for verification
- Free, instant and entirely in your browser
Best Practices and Tips
- Remember the compounding trap: nested elements with EM sizes multiply, so 1.2em inside 1.2em is 1.44em of the root, not 1.2em.
- For predictable sizing across a whole page, REM is usually safer; use EM where deliberate parent-relative scaling is wanted.
- When debugging, check the computed parent font size in browser developer tools — assumed sizes are often wrong.
- For text, EM is ideal: text set in EM scales with user font preferences, which fixed pixels override.
- State the parent size alongside any EM-to-pixel conversion in a handoff, or the number is meaningless.
Common Mistakes to Avoid
- Confusing EM with REM: EM uses the parent size, REM uses the root size, and the results differ in nested layouts.
- Forgetting compounding in nested EM sizing, which inflates text far beyond intention.
- Using the browser default 16px as the parent size when the actual parent sets something else.
- Hard-coding converted pixels back into the stylesheet, losing the scalability EM was chosen for.
Frequently Asked Questions
What is 1em in pixels?
It depends on the parent font size: 1em equals the parent element font size, so with a 16px parent, 1em is 16px, and with a 20px parent, 1em is 20px. There is no universal EM-to-pixel value.
How do I convert EM to pixels?
Multiply the EM value by the parent font size: pixels = EM × parent font size. This tool does that instantly, and also converts back from pixels to EM.
What is the difference between EM and REM?
EM is relative to the font size of the immediate parent element, while REM is relative to the font size of the root (html) element. REM stays consistent across nesting; EM compounds through nested elements.
Why use EM at all if pixels are simpler?
Because EM scales: when users change their browser font size, or a parent size changes, EM-based layouts adapt automatically. Pixels are fixed and ignore those preferences.
Is the EM to PX converter free?
Yes — free, unlimited and no sign-up required.