Rem: Definition & Examples

rem stands for "root em" — a CSS length unit defined relative to the font size of the root element (<html>), rather than the current element. This distinction from the regular em unit makes rem one of the most reliable and scalable units for typography on the web.

By default, browsers set the root font size to 16px. That means 1rem equals 16px, 1.5rem equals 24px, and 0.875rem equals 14px — unless the user or developer has changed the root font size.

/* Setting the typographic scale with rem */
html {
  font-size: 16px; /* 1rem baseline */
}

body {
  font-size: 1rem;      /* 16px */
}

h1 {
  font-size: 2.5rem;    /* 40px */
}

h2 {
  font-size: 2rem;      /* 32px */
}

p {
  font-size: 1rem;      /* 16px */
  line-height: 1.6;
}

small {
  font-size: 0.875rem;  /* 14px */
}

The critical advantage of rem over px is that it respects user browser font size preferences. When a user sets their browser default to 20px (common for users with low vision), everything sized in rem scales proportionally. Pixel values ignore this entirely — a significant accessibility problem.

A common pattern is to use a 62.5% base trick to make rem math easier:

html {
  font-size: 62.5%; /* 10px equivalent */
}

body {
  font-size: 1.6rem; /* 16px */
}

h1 {
  font-size: 4rem;   /* 40px */
}

This makes the math trivial — 1rem = 10px mentally. However, this approach requires remembering to reset font-size on body, and can cause issues if third-party components assume a 16px root.

The difference between rem and em matters most in nested contexts. em compounds — a 1.2em element inside another 1.2em element produces 1.44em relative to the root. rem always anchors to the root, making it far more predictable for building consistent type scales.

For spacing that should scale with text — margins, padding, line heights — rem is generally preferable to px. This keeps your layout proportionally harmonious even when users change their font size preferences. Fonts like Inter and Roboto, which have wide usage in UI contexts, are typically sized in rem in design systems for exactly this reason.

Modern CSS custom properties combined with rem give you a powerful system for responsive typography:

:root {
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
}

Using rem consistently throughout your codebase is one of the simplest changes you can make to dramatically improve accessibility and scalability.

展示此概念的字体

了解更多

无障碍设计

字号无障碍性：为何字号绝不应使用 px

使用 px 设置字号会破坏视障用户的浏览器缩放功能。这里介绍为何 rem 至关重要，以及如何正确实现。

CSS 排版

px、rem 与 em：何时使用哪个 CSS 单位

CSS 单位的永恒问题，清晰解答。何时使用 px、rem 和 em 来设置字号、间距和响应式设计。

CSS 排版

使用 CSS 自定义属性构建字号体系：实用指南

使用 CSS 自定义属性构建和谐的字号体系——模块化比例、响应式缩放，以及与设计令牌的集成。

CSS 排版

使用 CSS clamp() 实现流式排版：无需媒体查询

使用 CSS 的 clamp() 构建能在不同视口尺寸间平滑缩放的响应式排版。无需断点，无需媒体查询，一行 CSS 即可实现。

Rem

Embed This Widget

相关术语

相关工具

展示此概念的字体

了解更多