PX to EM Converter

What is an em in CSS?

An em is a length relative to a font size. For most properties — padding, margin, width, border-radius, letter-spacing — 1em equals the computed font size of the element itself. For the font-size property, 1em equals the font size of the parent, because the element’s own size is what is being calculated. The conversion is em = px ÷ context font size.

That makes em ideal for components that should scale as a unit. Give a button padding: 0.75em 1.25em and its padding grows automatically when you set a larger font-size on a "large" variant — no separate padding values needed. Icons sized in em match the text next to them, and media queries written in em respond to the user’s default font size.

The catch is compounding. Because each element’s em is based on its parent, nested elements that all use font-size: 1.2em get 1.2 × 1.2 × 1.2… larger at every level. Rem avoids this by always using the root. The demo in the tool shows the difference for any factor you choose.

How to use the PX to EM Converter

1. Enter the parent font size — the computed font size of the element the em will be relative to (for padding and margin, the element’s own font size).
2. Type a pixel value to get em, or type in the EM field to get pixels back. Space-separated values like 12 24 convert together.
3. Look up common sizes in the chart and copy any result with one click.
4. Use the compounding demo to check how nested em font sizes grow, and paste CSS into the bulk converter to switch a component from px to em.

Example

Nested lists where each level sets font-size: 1.25em, inside a 16px parent:

.list { font-size: 1.25em; }

<ul class="list">          <!-- 16 × 1.25 = 20px -->
  <li><ul class="list">    <!-- 20 × 1.25 = 25px -->
    <li><ul class="list">  <!-- 25 × 1.25 = 31.25px -->

/* With font-size: 1.25rem every level is 20px. */

EM vs REM: which one to use

• Font sizes: prefer rem. It never compounds, so a component looks the same wherever it is placed. Convert with the PX to REM Converter.
• Padding, gaps and icon sizes inside components: em is often better because spacing then scales with the component’s own text size — great for buttons with small, medium and large variants.
• Media queries: em and rem behave identically there — both use the browser default font size — and both respect a user’s larger default text.
• Line height: use a unitless number such as 1.5 instead of em. Unitless values are inherited as a ratio, while em values are inherited as a fixed computed length.