EM to REM Converter

Convert parent-relative EM units to root-relative REM units

EM to REM Calculator

About EM to REM Conversion:

To convert EM to REM units, you need to know both the root font size and the parent element's font size. The formula is: REM = EM × (Parent Font Size ÷ Root Font Size).

px
Browser default is 16px
px
Font size of parent element
em
The EM value to convert
Conversion Result
1rem
1em = 1rem
Root: 16px | Parent: 16px

Current Unit Comparison

See how different units compare with your current settings:

Unit Type Value Equivalent in Pixels Description

Batch Converter

Convert multiple EM values at once. Enter values separated by spaces, commas, or new lines.

Batch Results
EM REM CSS Code

Common EM to REM Conversions

When root and parent font sizes are the same (16px), EM and REM values are equal. Here's how that changes with different parent font sizes:

EM Value 14px Parent 16px Parent 18px Parent 20px Parent 24px Parent
0.5em 0.44rem 0.5rem 0.56rem 0.63rem 0.75rem
0.75em 0.66rem 0.75rem 0.84rem 0.94rem 1.13rem
1em 0.88rem 1rem 1.13rem 1.25rem 1.5rem
1.25em 1.09rem 1.25rem 1.41rem 1.56rem 1.88rem
1.5em 1.31rem 1.5rem 1.69rem 1.88rem 2.25rem
2em 1.75rem 2rem 2.25rem 2.5rem 3rem
3em 2.63rem 3rem 3.38rem 3.75rem 4.5rem

All values above assume a root font size of 16px. The formula used is: REM = EM x (Parent Font Size ÷ Root Font Size)

Frequently Asked Questions

Converting from EM to REM units can be useful in several situations:

  • Standardizing Units - When you want to convert your codebase to use consistent REM units throughout instead of a mix of EMs and REMs.
  • Avoiding Compounding Issues - Converting from EM to REM helps eliminate the compounding effect of nested EM values, making sizing more predictable.
  • Legacy Code Updates - When updating older designs that use EM units to a more modern approach with REM units.
  • Design System Integration - When combining components from different systems that use different unit types.
  • Simplifying Maintenance - REM units are typically easier to maintain across a large project since they all reference a single root value.

Converting to REM units makes your designs more predictable and easier to scale globally by changing just the root font size, rather than managing different EM values at various nesting levels.

REM units offer several advantages over EM units in certain scenarios:

Advantages of REM units:
  • Predictability - All REM values reference the same root element, making them more predictable across your entire project.
  • No Compounding - REM units don't compound in nested elements like EM units do, avoiding unexpected sizing issues.
  • Centralized Control - Changing just the root font size scales all REM-based measurements throughout the site proportionally.
  • Global Consistency - Easier to maintain consistent spacing and sizing relationships throughout a project.
  • Accessibility - When users change their browser's default font size, REM-based layouts scale appropriately.
When to stick with EM units:
  • Component-Specific Scaling - When you want elements to scale specifically with their parent, not the root.
  • Typography Hierarchy - For maintaining proportional relationships within specific components.
  • Button Padding - Where spacing should scale proportionally with the button's text size.
  • Self-Contained Components - For components that need to adapt to wherever they're placed.

Many modern design systems use REM for most measurements but reserve EM for specific cases where component-relative scaling is desirable. Converting between them helps you leverage the strengths of each unit type.

To manually convert EM values to REM, follow these steps:

REM = EM x (Parent Font Size ÷ Root Font Size)

For example, if you have:

  • Root font size = 16px
  • Parent element font size = 20px
  • Value to convert = 1.2em

The calculation would be:

REM = 1.2em x (20px ÷ 16px) = 1.2 x 1.25 = 1.5rem

Some common conversion scenarios (assuming 16px root):

  • With parent font size = 16px: 1em = 1rem (values are equal)
  • With parent font size = 20px: 1em = 1.25rem (larger REM value)
  • With parent font size = 14px: 1em = 0.875rem (smaller REM value)

This conversion can be particularly useful when you need to understand how component-specific EM values translate to global REM values in your design system.

Converting nested EM values to REM requires special consideration due to the compounding nature of EM units:

  1. Understand the Full Inheritance Chain - For deeply nested elements, you need to consider the entire chain of parent elements to get the correct conversion:
    /* Original nested EM structure */ body { font-size: 16px; } .parent { font-size: 1.25em; } /* 20px */ .parent .child { font-size: 0.8em; } /* 16px (0.8 x 20px) */ .parent .child .grandchild { font-size: 1.2em; } /* 19.2px (1.2 x 16px) */
  2. Calculate the Absolute Pixel Value First - Determine what each EM value actually represents in pixels, then convert to REM:
    /* Converting to REM (with 16px root) */ body { font-size: 16px; } .parent { font-size: 1.25rem; } /* 20px ÷ 16px = 1.25rem */ .parent .child { font-size: 1rem; } /* 16px ÷ 16px = 1rem */ .parent .child .grandchild { font-size: 1.2rem; } /* 19.2px ÷ 16px = 1.2rem */
  3. Simplify Your Approach - When converting a complex system, consider setting consistent REM values at each level rather than maintaining exact equivalence to complex EM relationships.

Be careful with direct one-to-one conversion in complex nested structures. Sometimes it's better to simplify and establish a new, more predictable sizing system rather than maintaining all the original relationships.

About EM & REM Units

Both EM and REM are relative CSS units essential for responsive design, but they have key differences that make them suitable for different scenarios.

EM Units
  • Parent-Relative: Based on parent element's font size
  • Component-Specific: Scales with immediate container
REM Units
  • Root-Relative: Based on root element's font size
  • Global Consistency: Same reference point throughout document

Converting from EM to REM typically makes your design more predictable and easier to maintain at a global level.

Code Comparison Example

See how EM and REM behave differently:

/* Setup */
:root {
  font-size: 16px; /* Root font size */
}

/* EM Example */
.card-em {
  font-size: 1.25em; /* = 20px (if parent is 16px) */
  padding: 1em; /* = 20px (relative to .card-em) */
}
.card-em .title {
  font-size: 1.5em; /* = 30px (relative to .card-em) */
  margin-bottom: 0.5em; /* = 15px (relative to .title) */
}

/* REM Example */
.card-rem {
  font-size: 1.25rem; /* = 20px (always) */
  padding: 1rem; /* = 16px (always) */
}
.card-rem .title {
  font-size: 1.5rem; /* = 24px (always) */
  margin-bottom: 0.5rem; /* = 8px (always) */
}

/* Converted Example */
.card-converted {
  font-size: 1.25rem; /* = 20px */
  padding: 1.25rem; /* = 20px (converted from 1em) */
}
.card-converted .title {
  font-size: 1.875rem; /* = 30px (converted from 1.5em) */
  margin-bottom: 0.938rem; /* = 15px (converted from 0.5em) */
}

Converting EM to REM values gives you predictable, root-relative sizing that remains consistent regardless of nesting level.

Visual Comparison

See how EM and REM units scale with different contexts:

Root Element (16px)
1rem = 16px
Parent Element (1.25em = 20px)
1em = 20px (parent-relative)
1.25rem = 20px (root-relative)
Nested Element (1.5em = 30px)
1em = 30px (parent-relative)
1.875rem = 30px (root-relative)

Converting to REM eliminates the compounding behavior of EM units, making your sizing more predictable across all nesting levels.

Related Converters

REM to EM Converter PX to REM Converter PX to EM Converter EM to PX Converter All CSS Unit Converters