REM to EM Converter

How to convert root ems to ems

First convert rem to pixels using the root font size, then divide by the relevant element font size. The units are equal only when both font sizes are equal.

Convert 1.5 rem to em

Apply the conversion rule to 1.5 root ems. Using the default settings, the result is 1.5 em.

Default context: root font size 16px, element font size 16px.

rem to em conversion table

These pre-calculated values use the same formula and default settings as the converter above.

Code and calculation snippets

Reuse the same conversion in a stylesheet or application. Keep contextual font sizes configurable when working with relative CSS units.

html { font-size: 16px; }
.component { font-size: 20px; }
/* 1rem equals 0.8em here */

const em = (rem * rootFontSize) / elementFontSize;

@use "sass:math";
@function rem-to-em($rem, $root: 16, $context: 16) {
  @return math.div($rem * $root, $context) * 1em;
}

Using the result accurately

This conversion is useful when moving a document-level token into a component that scales locally. Enter the computed root and component font sizes from the same rendered state.

Reference: W3C CSS Values and Units: font-relative lengths.