EM to PX Converter
Result: 16px
Calculation based on a root font-size of 16 pixel.
How to Use the converter?
Type an EM value to get pixels
Or type in the Pixels field to convert PX to EM
Set the parent font size if it isn't 16px
EM to PX: How the Conversion Works
EM is a relative CSS unit based on the font-size of the current element, not the root <html> element like REM. This means the pixel value of 1em depends on where it's used: at the document root with the default 16px font-size, 1em equals 16px, but inside a nested element with its own font-size, 1em is relative to that parent's computed size instead.
This compounding behavior is what distinguishes EM from REM: nested EM values multiply through the DOM tree, which can be powerful for building self-contained, proportionally scaling components, but can also cause unexpected sizing if you're not tracking the inheritance chain.
Converting EM to PX is useful for auditing existing CSS, debugging unexpected element sizes, or translating a design spec (often given in px) into EM-based, context-aware component styles.
For most top-level conversions where no parent font-size has been overridden, the standard browser default of 16px root font-size applies, so 1em = 16px, 1.5em = 24px, and 2em = 32px.
Common EM to PX Conversions
0.5em
8px
0.75em
12px
1em
16px
1.25em
20px
1.375em
22px
1.5em
24px
2em
32px
8.25em
132px
Quick Conversion Tips
Converting EM to PX
Multiply the EM value by the font-size of the current element (16px by default). Example: 1.5em × 16px = 24px
Converting PX to EM
Divide the pixel value by the font-size of the current element (16px by default). Example: 24px ÷ 16px = 1.5em
Learn More About CSS Units
PX vs Inches, MM, and CM
Learn how pixels relate to inches, millimeters, and centimeters using the CSS 96 DPI standard, and avoid the most common print-design conversion mistake.
Read the guide →Frequently Asked Questions
How do I convert EM to PX?
Multiply the EM value by the font-size of the current element's context (16px by default at the document root). For example, 1.5em × 16px = 24px. Use the converter above for instant results.
Why isn't 1em always equal to 16px?
Because EM is relative to the font-size of the element it's used on, not the root. If a parent element has a different font-size, 1em on a child will resolve to a different pixel value than 16px.
What's the difference between EM and REM in practice?
REM always references the root font-size, giving predictable, non-compounding values. EM references the immediate parent's font-size, so it compounds through nested elements — useful for self-scaling components, but trickier to predict.
When should I use EM instead of REM?
Use EM when you want a component's internal spacing (like padding or icon size) to scale automatically with that component's own font-size, independent of the rest of the page.
Are EM units good for accessibility?
Yes, like REM, EM units scale with the user's browser font-size settings, making them more accessible than fixed PX values for users who increase their default font size.