EM to PX Converter

Convert em values back to pixels. Adjust the parent font size to match your element's context.

Parent font-size

em Relative to parent

px Absolute pixels

px = em × 16

EM to PX Conversion Table

Complete reference: em 1–100 converted to pixels.

em	px

How to Convert EM to PX

To convert em to pixels, multiply the em value by the parent element's font size:

px = em × parent-font-size

The key word is "parent." Unlike rem-to-px conversion where you always use the root font size, em-to-px conversion depends on the specific context of the element. An element with font-size: 1.5em inside a parent with font-size: 20px computes to 30px.

When the parent font size is the browser default of 16px, the math is simple: 0.5em = 8px, 1em = 16px, 2em = 32px. But always verify the actual parent font size in DevTools before converting.

When to Convert EM Back to Pixels

Converting em to pixels is essential in several workflows:

DevTools debugging: When inspecting elements, the computed tab shows pixel values. Knowing that your 0.875em text computes to 14px (at 16px parent) helps you verify the layout matches the design.
Canvas and SVG: The Canvas API and many SVG attributes require pixel values. If your design system uses em tokens, you'll need to convert them for canvas drawing operations.
JavaScript calculations: Functions like getBoundingClientRect() return pixels. Comparing these with your em-based CSS requires knowing the pixel equivalents.
Cross-unit consistency: When mixing em with rem or vw units, converting to a common pixel baseline helps verify alignment.

Avoiding EM Pitfalls

The biggest issue with em is the compounding problem. Consider this HTML:

<div style="font-size: 1.2em">     <!-- 19.2px -->
  <div style="font-size: 1.2em">   <!-- 23.04px -->
    <div style="font-size: 1.2em"> <!-- 27.65px -->
      Text keeps growing!
    </div>
  </div>
</div>

Each nested level multiplies 1.2 by the previous computed size, causing text to grow uncontrollably. This is why rem units are preferred for font sizes in most cases — they always reference the same root value.

If you need component-relative scaling, use em for properties like padding and margin within a component, but set the component's font-size in rem to anchor it to the root.

Frequently Asked Questions

How do I find the parent font size for em conversion?

In browser DevTools, select the parent element and check the "Computed" tab for the font-size property. This is the value you multiply by the em value to get pixels.

Is 1em the same as 100%?

For font-size, yes — 1em and 100% are functionally identical. Both reference the parent element's font size. For other properties like width, the percentage base differs (it references the parent's width, not font-size).

Why does my em-based layout look different in nested components?

Em values compound. If a parent sets font-size: 1.2em and a child also uses font-size: 1.2em, the child's actual size is 1.44× the grandparent's size. Use rem to avoid this issue.

Can I use em for media queries?

Yes, and some consider it best practice. Em-based media queries respond to the user's font-size preference. For example, @media (min-width: 48em) equals 768px at the default 16px base.