The CSS unit rem, short for root em, is a relative length unit tied to the document’s root font size, commonly set on the html element. Unlike em, which scales relative to its parent font size, rem values are always calculated from the root, making layout and type more predictable. This guide explains how rem works, when to prefer it over other units, implementation patterns, and what to watch for regarding accessibility and browser behavior.
Definition and core concept
In CSS, rem stands for root em and is defined as the computed font-size of the root element (typically the html element). When the root font size is 16px (common browser default), 1rem equals 16px. Because rem is always relative to the root, it provides a stable and consistent reference that avoids unintended compounding that can occur with em in nested components.
How rem differs from em and other units
rem compared to em
While em is relative to the font size of the element’s parent, rem is strictly relative to the root element. This distinction matters in components with nested text or dynamic type, where em can scale unpredictably. Using rem offers more predictable sizing, especially for spacing, borders, and typography that should remain tied to the base size rather than compounding through a component tree.
rem compared to px, vw, and em
- px (absolute): Generally fixed and does not scale with user preferences; less accessible for users who need larger default text.
- vw (viewport width): Scales with viewport width; useful for fluid type but can become too large or small on extreme screens.
- em: Context-dependent on the immediate parent; can cause compounding effects in nested components.
- rem: Root-relative; predictable scaling while still respecting user font-size preferences when used with relative root settings.
Practical usage patterns
Use rem for margins, padding, borders, and many layout measurements where you want consistency relative to the base font size. Use em for values that should mirror local context, such as icon sizing within a component whose text size changes. Define a clear root font-size strategy, typically by setting base font size in percentage or rem on html, and use rem for most design tokens to maintain coherence across components.
Accessibility considerations
Because rem is based on the root font size, it can respect users’ browser text-size settings when the root uses relative units like percentages. Avoid locking the root font size to a fixed px value, as this can prevent users from zooming text as needed. Maintain adequate contrast and use a reasonable base size so that rem-based layouts remain readable and usable for people with low vision.
Browser and implementation notes
All modern browsers support rem consistently when the root font-size is explicitly set. In some edge cases, browser extensions or user agent styles may interact differently depending on whether the root uses px, rem, or percentages. For maximum compatibility, prefer rem for design systems and use responsive techniques, such as clamp, fluid type scales, or container queries, when appropriate for the project.