CalculateY CalculateY

EM to PX Converter

The CSS em unit is relative to the parent element's font size, so em x parent font size = px, and px / parent font size = em. With a 16px parent, 1.5em equals 24px, and 20px equals 1.25em. Unlike rem (which is relative to the root element), em compounds when nested, making the parent context critical. Enter an em or pixel value below to convert instantly, with support for any parent font size.

Quick Answer

At a 16px parent font size, 1.5em equals 24px. To convert: 1.5 x 16 = 24. In reverse, 20px equals 1.25em because 20 / 16 = 1.25.

Parent Font Size

EM to PX

PX to EM

Common Examples

Input Result
1em (parent 16px) 16px
2.5em (parent 16px) 40px
24px (parent 16px) 1.5em
1.5em (parent 20px) 30px
14px (parent 10px) 1.4em

How It Works

The CSS em unit is relative to the parent element’s font size. If an element’s parent has a font size of 16px, then 1em within that element equals 16px.

EM to PX: px = em x parent font size

PX to EM: em = px / parent font size

How em Differs from rem

The rem unit is always relative to the root (<html>) font size, making it consistent throughout the document. The em unit is relative to the parent element’s font size, which means it compounds in nested elements.

For example, if the root font size is 16px and a <div> is set to font-size: 1.5em (24px), a <span> inside that div with font-size: 1.5em computes to 1.5 x 24 = 36px, not 1.5 x 16 = 24px. This compounding behavior is why many developers prefer rem for font sizes but use em for spacing and padding that should scale proportionally with the element’s own text size.

When to Use em

The em unit is particularly useful for:

  • Component-relative sizing: Padding and margins set in em scale with the element’s font size. A button with padding: 0.5em 1em maintains proportional spacing regardless of font size.
  • Responsive typography: Media query adjustments to a parent’s font size cascade naturally to all em-based child sizes.
  • Inline spacing: Letter-spacing, word-spacing, and text-indent are often best expressed in em because they should relate to the current text size.

Common em-to-px conversions at 16px parent:

  • 0.5em = 8px
  • 0.75em = 12px
  • 1em = 16px
  • 1.25em = 20px
  • 1.5em = 24px
  • 2em = 32px
  • 3em = 48px

Worked Example

To convert 2.5em to px with a 20px parent font size: 2.5 x 20 = 50px. To convert 36px to em with a 24px parent font size: 36 / 24 = 1.5em. If you then nest another element inside and set it to 1.5em, the computed size becomes 1.5 x 36 = 54px, illustrating the compounding effect.

Related Calculators

PX to REM Converter

Convert between pixel (px) and rem CSS units based on any root font size.

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing between two viewport widths.

Frequently Asked Questions

What is the default parent font size in browsers?
The default font size in all major browsers is 16px. Unless a parent element has an explicit font-size set via CSS, 1em equals 16px. This is the same default used for the root font size (and therefore for rem).
What is the difference between em and rem?
The em unit is relative to the parent element's font size and compounds in nested elements. The rem unit is always relative to the root (html) font size and stays consistent regardless of nesting. Use rem for global sizing consistency and em for component-relative scaling.
Why does em compound in nested elements?
Each em value is calculated relative to its direct parent's computed font size. If a parent is 1.5em (24px at a 16px root), a child set to 1.5em calculates from the parent's 24px, yielding 36px. This cascading multiplication is called compounding. To avoid it, use rem instead.
When should I use em instead of rem?
Use em when you want spacing or sizing to scale with the element's own font size. For example, padding on a button in em keeps the button proportional at any font size. Use rem for consistent global sizing that should not compound.
Can I mix em and rem in the same project?
Yes, mixing units is common in modern CSS. A typical approach is to use rem for font sizes (to avoid compounding) and em for padding, margins, and other spacing within components (so they scale proportionally with the component's text size).