📏 PX to EM Converter for CSS

What is the PX to EM Converter?

An em is a relative CSS length unit. One em equals the computed font size of the element it applies to, so when you write font-size: 1.5em the browser multiplies the inherited font size by 1.5. Because the base font size in every major browser defaults to 16px, the everyday conversion most developers need is simply px divided by 16. That is why 12px is 0.75em, 20px is 1.25em, and 32px is 2em. Change the base and every result changes with it: at a 10px base, 24px becomes 2.4em rather than 1.5em.

The one detail that trips people up is what em is relative to. For most properties (padding, margin, width, gap, border-radius) an em is relative to the element's own font-size. But for the font-size property itself, an em is relative to the parent element's font-size, because the element has not computed its own size yet. This is why ems can compound: a list nested three levels deep, each set to 1.2em, ends up much larger than 1.2 times the root. rem (root em) was created to avoid exactly this compounding, since it is always relative to the root html element and never to the parent.

This tool assumes the common case where you are converting against the root font size, which is why the em and rem outputs are identical here. That matches how most teams work today: set html { font-size: 16px } (or leave the browser default), then express component sizes as em or rem multiples of 16. If a specific element has a non-default font-size and you are sizing its padding or margin in em, plug that element's own font-size into the base field to get the correct local value.

Working in relative units instead of fixed pixels makes a layout respond to user preferences. A reader who bumps their browser font size up for accessibility, or a design that scales type at different breakpoints, will see em and rem based spacing scale in proportion, while hard-coded pixels stay frozen. That is the practical reason style guides push you to convert px mockup values into em or rem before they reach production CSS.

When to use it

• Turning pixel values from a Figma or Sketch mockup into em units for responsive CSS.
• Converting a fixed font-size such as 18px into 1.125em so text scales with user settings.
• Checking em to px the other way when you inherit a stylesheet written entirely in ems.
• Sizing padding, margins, and gaps in em relative to a component with a custom font-size.
• Comparing em and rem for the same value to decide which relative unit a rule should use.
• Building an accessible design where spacing and type respond to the browser default of 16px.

How to use the PX to EM Converter

1. Pick a direction: PX to EM (the default) or EM to PX.
2. Type the value you want to convert into the first field.
3. Set the base font size, or leave it at 16 to match the browser default.
4. Read the em result and the matching rem value in the result cards.
5. Click Copy to grab the value with its unit, or check the 16px reference table for common sizes.

Formula & method

Worked examples

Common pixel values converted to em and rem at a 16px base

How the same 24px value converts under different base font sizes

Common mistakes to avoid

• Assuming the base is always 16. 16px is the browser default, but a stylesheet can override html { font-size }, and any element with its own font-size changes what an em means locally. If your numbers look off, confirm the real base before converting.
• Forgetting that em on font-size is relative to the parent. For most properties an em is relative to the element itself, but for the font-size property it is relative to the parent. Nesting elements that each set font-size in em causes the sizes to compound and grow unexpectedly.
• Treating em and rem as interchangeable in every case. They give the same number when both are measured against the root font size, but em inherits and compounds while rem is always fixed to the root. Choose rem when you want a value that ignores nesting.
• Rounding em values too aggressively. Cutting 0.875em down to 0.9em to look tidy shifts a 14px target to about 14.4px. Keep enough decimal places, or let the tool do the division, so the pixel intent is preserved.

Glossary

px (pixel)

An absolute CSS length unit. In CSS a px is a fixed reference size and does not scale with the parent font size.

em

A relative unit equal to the computed font size of the current element, or the parent font size when used on the font-size property itself.

rem

Root em, a relative unit always equal to the root html font size, so it never compounds through nesting.

Base font size

The font size a relative unit is measured against. The browser default is 16px unless CSS changes it.

Computed value

The final pixel value the browser resolves a relative unit to after applying all inherited and cascaded font sizes.

Root element

The html element at the top of the document, whose font size defines what 1rem equals.

Frequently asked questions