What is REM in CSS? A Practical Guide with Examples

REM Stands for Root EM

The rem unit in CSS stands for root em. It works like the em unit, but instead of being relative to the parent element's font size, it is always relative to the root element's font size. The root element is the html element, and browsers set its default font size to 16px.

This means 1rem is always 16px (assuming no overrides), regardless of where it is used in the document tree. Unlike em, rem does not compound when nested. A deeply nested element with 1.5rem font size will always render at 24px, no matter how many parents it has.

REM vs PX: Why REM Wins for Font Sizes

When you set font-size: 16px in CSS, the text will always be 16 pixels tall on screen. If a user with low vision goes to their browser settings and increases the default font size to 24px, your text stays at 16px. Their preference is ignored.

When you set font-size: 1rem, the text will be whatever the user's default font size is. For most users, that is 16px. For users who need larger text, it could be 20px, 24px, or more. Your layout adapts automatically.

REM vs EM: Why REM is Safer

The em unit is relative to the parent element's font size. This means em values compound when elements are nested. If a parent has font-size: 1.2em and a child also has font-size: 1.2em, the child's actual font size is 1.44em relative to the root.

REM avoids this compounding entirely. Whether an element is at the top of the DOM or nested 10 levels deep, 1rem always equals the root font size. This predictability makes rem the safer choice for most situations.

/* EM compounding problem */
.parent { font-size: 1.2em; }  /* 19.2px */
.child  { font-size: 1.2em; }  /* 23px (1.2 x 1.2 x 16) */
.grandchild { font-size: 1.2em; }  /* 27.6px (keeps growing!) */

/* REM stays consistent */
.parent { font-size: 1.2rem; }  /* 19.2px */
.child  { font-size: 1.2rem; }  /* 19.2px (always same) */
.grandchild { font-size: 1.2rem; }  /* 19.2px (always same) */

Practical REM Usage

:root {
  font-size: 16px; /* Browser default */
}

body {
  font-size: 1rem;     /* 16px */
  line-height: 1.75;   /* Unitless is best for line-height */
}

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */
h4 { font-size: 1.25rem; }  /* 20px */

.container {
  max-width: 75rem;    /* 1200px */
  padding: 0 1.5rem;   /* 0 24px */
}

.card {
  padding: 2rem;       /* 32px */
  margin-bottom: 1.5rem; /* 24px */
  border-radius: 0.5rem; /* 8px */
}

Browser Support

REM is supported in every modern browser and has been since 2012. Internet Explorer 9 and above support rem. There is no reason to avoid rem units in any project being built today.

Convert PX to REM Instantly

The formula is simple: divide pixels by 16. But doing it repeatedly for every value in a design file gets tedious. Use our free converter to do it instantly.