Web Typography

rem

루트 요소의 폰트 크기(보통 16px)를 기준으로 하는 CSS 단위로, em보다 예측 가능하여 일관된 크기 설정에 적합하다.

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.

Related Terms

em

Related Tools

Px-Converter
Try this tool →

Fonts That Illustrate This Concept

Roboto
Sans Serif · #1
Inter
Sans Serif · #5

Learn More

CSS Typography
Fluid Typography with CSS clamp(): No Media Queries Needed

Build responsive typography that scales smoothly between viewport sizes using CSS clamp(). No breakpoints, no media queries, one line of CSS.

 CSS Typography
px vs rem vs em: When to Use Which CSS Unit

The eternal CSS unit question, answered clearly. When to use px, rem, and em for font sizes, spacing, and responsive design.

 CSS Typography
Type Scale with CSS Custom Properties: A Practical Guide

Build a harmonious type scale using CSS custom properties — modular ratios, responsive scaling, and design token integration.

 Accessibility
Font Size Accessibility: Why You Should Never Use px for Font Sizes

Using px for font sizes breaks browser zoom for visually impaired users. Here's why rem is essential and how to implement it correctly.
Back to Glossary