EM to PX Converter
Convert em units back to exact pixel values. Essential for debugging CSS, matching design specs, and working with pixel-based APIs.
Formula
px = em × parent font size
Quick Reference Table
Why Convert EM Back to Pixels?
Em units are great for building scalable components, but there are plenty of situations where you need the actual pixel number. Debugging layouts, matching Figma designs, setting up canvas elements, or passing dimensions to a JavaScript library that only accepts pixels. Here is what each scenario looks like in practice.
Pixel-Perfect Design Review
When a designer hands you a Figma file, every measurement is in pixels. To verify your CSS matches the design, you need to know what your em values translate to. If the spec says 24px padding and your CSS says 1.5em, you need to confirm 1.5 times the parent font size actually equals 24.
JavaScript and Canvas APIs
The HTML Canvas API, WebGL, and many charting libraries like Chart.js or D3 work exclusively in pixels. If your layout dimensions are in em, you need to convert them before passing values to these APIs.
Debugging Unexpected Sizes
When an element looks too big or too small, the first step is checking its computed pixel value. If the em calculation is compounding across nested elements, knowing the pixel output at each level helps you find exactly where the problem starts.
How Browsers Calculate EM to Pixels
Browsers resolve em values in two different ways depending on which CSS property uses them. This is a detail that catches a lot of people off guard.
For font-size
When you write font-size: 1.5em, the browser looks at the parent element's computed font size.
Parent: 16px
1.5em = 1.5 x 16 = 24px
For other properties
When you write padding: 1.5em, the browser looks at the element's own computed font size.
Element: font-size 20px
1.5em = 1.5 x 20 = 30px
This means the same em value can produce different pixel results on the same element depending on which property it is applied to. An element with font-size: 1.5em and padding: 1.5em will have a font size based on the parent (say 24px) and padding based on its own font size (1.5 x 24 = 36px). Always be clear about which reference point is being used.
Converting EM to PX in Code
function getPixelValue(element, property) {
const computed = getComputedStyle(element);
return parseFloat(computed[property]);
}
const heading = document.querySelector('h1');
const size = getPixelValue(heading, 'fontSize');
console.log(size); // e.g., 32 (always in pixels)/* Root: 16px */
.card { font-size: 1.125em; }
/* Card font: 16 x 1.125 = 18px */
.card .title { font-size: 1.5em; }
/* Title font: 18 x 1.5 = 27px (not 24px!) */
.card .title { padding: 0.5em; }
/* Title padding: 27 x 0.5 = 13.5px */
/* Padding uses element's own font-size, not parent */// When a library needs pixel values
const parentFontSize = 16; // or read from DOM
function emToPx(em, parent = parentFontSize) {
return em * parent;
}
// Use in a chart config
const chartConfig = {
fontSize: emToPx(1.25), // 20px
padding: emToPx(0.75), // 12px
lineHeight: emToPx(1.5), // 24px
};Quick Decision Guide
Not sure when to use em, rem, or px? Here is a straightforward guide based on what the property is and what behavior you want:
Frequently Asked Questions
How do I convert em to px?
Multiply the em value by the parent element's font size. If the parent is 16px and you have 1.5em, the result is 1.5 times 16 = 24px.
What is 2em in pixels?
It depends on context. If the parent font-size is 16px, then 2em = 32px. If the parent is 20px, then 2em = 40px. Always check the parent's computed font size first.
Are em and rem the same?
No. Em references the parent element's font size. Rem always references the root html element. In deeply nested layouts, em values compound while rem stays constant.
Why does em give different pixel values in nested elements?
Em compounds at each nesting level. A 1.5em inside a 1.5em parent means 1.5 times 1.5 = 2.25 times the original size. This is called the cascade effect and is the main reason many developers prefer rem.
How do I find the actual pixel value of an em in DevTools?
Open Chrome DevTools, right-click the element, select Inspect, then check the Computed tab. The font-size value shown there is in pixels, even if your CSS uses em.
When is em-to-px conversion useful?
It is useful when debugging CSS layouts, matching design specs that use pixels, working with JavaScript APIs that need pixel values, or setting up canvas drawings where coordinates are in pixels.
Does em affect padding differently than font-size?
Yes. When em is used for padding or margin, it is relative to the element's own computed font-size, not the parent's. For font-size declarations, em refers to the parent. This distinction trips up many developers.
What is the default em value in browsers?
If no font-size is set anywhere in the chain, the browser default of 16px applies. So 1em = 16px out of the box.
Can I use em for width and height?
Yes. Em works for any CSS property that accepts a length value, including width, height, max-width, gap, top, left, and many others. It will always be relative to the element's font size for those properties.
How does em work inside a CSS calc() function?
Em inside calc() resolves to its pixel equivalent first, then the calculation happens. For example, calc(2em + 10px) with a 16px parent becomes calc(32px + 10px) = 42px.
Should I convert all my em values to px?
No. Em is useful for component-level scaling. Only convert to px when you need exact pixel values for debugging, design review, or working with APIs that require pixel input.
How do screen readers handle em vs px?
Screen readers do not read CSS values directly. However, using em (and rem) for font sizes means your text respects the user's browser font size preferences, which improves accessibility for everyone.
Disclaimer: This tool provides approximate conversions for reference purposes. Results may vary slightly depending on browser rendering, root font size, and viewport settings. Always verify values in your specific development environment.