EM vs REM in CSS: Which One Should You Use and When?

The Core Difference

EM is relative to the parent element's font size. REM is relative to the root element's font size. That single difference has major practical implications for how your layouts behave.

With em, if you nest elements that each set their font size in em, the sizes compound. With rem, every element references the same base value regardless of nesting depth.

Visual Example of Compounding

<div style="font-size: 1.5em">  <!-- 24px -->
  Parent text
  <div style="font-size: 1.5em">  <!-- 36px (1.5 x 24) -->
    Child text
    <div style="font-size: 1.5em">  <!-- 54px (1.5 x 36) -->
      Grandchild text (getting huge!)
    </div>
  </div>
</div>

<!-- With rem, all three would be 24px (1.5 x 16) -->

When to Use REM

• Font sizes on any element. REM gives predictable, accessible sizing.
• Global spacing (page-level margins and paddings).
• Container widths and max-widths.
• Any value that should scale uniformly with the user's font preference.

When to Use EM

• Button padding. If you increase a button's font size, em-based padding grows proportionally.
• Icon sizes that should match adjacent text size.
• Component-internal spacing that should scale with the component's own font size.
• Media queries in some methodologies (though this is debatable).

The Practical Rule

Use rem for everything by default. Only switch to em when you specifically need a value to scale relative to its element's font size rather than the root font size. In practice, this means rem covers 90% of use cases, and em is used for the remaining 10% in component-level styling.

Convert Between Units