CSS rem units: Syntax, Usage, and Examples

The rem unit is a CSS length unit that scales based on the root font size of the page, usually the font-size set on the html element. Use it to create spacing and typography that stays consistent and easy to resize across a whole site.

How to Use the rem unit

rem means “root em.” One rem equals the computed font-size of the root element (html). If the root font size is 16px, then 1rem equals 16px, 2rem equals 32px, and so on.

Here is a simple setup:

html {
font-size:16px;
}

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

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

.card {
padding:1.5rem;/* 24px */
}

Changing the root font size changes all rem-based sizes

If you change the root font size, every value written in rem scales with it.

html {
font-size:18px;
}

/* Now 1rem = 18px */

That is why rem is popular for responsive design and accessibility. When people change their default font size in the browser, rem values follow along.

A common pattern: set a “base scale” for easier math

Some teams like to set the root font size to make rem math feel cleaner. For example, 62.5% makes 1rem equal 10px when the browser default is 16px.

html {
font-size:62.5%;
}

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

h2 {
font-size:2.4rem;/* 24px */
}

This approach can be convenient, but it also changes the meaning of “default” text size. Many developers prefer leaving the root at the browser default and using rem anyway. Both can work, but consistency matters more than the specific choice.

rem vs px in plain terms

• px is fixed. It does not scale with font size settings.
• rem scales with the root font size.

If your goal is “let text and spacing scale together,” rem is usually the friendlier option.

When to Use the rem unit

The rem unit helps most when you want a consistent scale that responds to font size changes without rewriting a lot of CSS.

1) Typography that stays proportional

Headings, body text, and small captions can follow a simple scale, like 1rem, 1.25rem, 1.5rem, 2rem. Changing the root size adjusts the whole system.

2) Spacing that matches text size

Padding, margins, and gaps often look better when they scale with text. A button with 0.75rem padding tends to stay “right sized” when text gets bigger.

3) Components that remain readable with user settings

Some people bump up their browser font size for comfort. Using rem makes layouts adapt without breaking as easily, especially when you avoid hard-coded heights.

4) Design systems and reusable components

If you build a set of components, rem helps you keep a predictable spacing rhythm. You can share one “base size” and let everything inherit the scale.

5) Responsive sizing without a pile of breakpoints

With rem, you can change the root font size at a breakpoint and let many values scale automatically. It is not magic, but it reduces repetition.

Examples of the rem unit

1) Building a simple type scale

This creates a clear hierarchy without guessing pixel values.

html {
font-size:16px;
}

body {
font-size:1rem;
line-height:1.6;
}

h1 {
font-size:2.25rem;/* 36px */
margin-bottom:1rem;
}

h2 {
font-size:1.75rem;/* 28px */
margin-top:2rem;
margin-bottom:0.75rem;
}

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

If the root font size changes, the whole scale adjusts while keeping the same proportions.

2) Spacing that stays consistent across components

This example uses rem for padding, margin, border radius, and gap.

.card {
padding:1.5rem;
border-radius:0.75rem;
border:1px solid#ddd;
}

.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap:1rem;
margin-bottom:1rem;
}

.card-actionsbutton {
padding:0.5rem0.75rem;
border-radius:0.5rem;
}

Notice the pattern. Values repeat in a small set, which makes the design feel more “on grid.”

3) A responsive approach using root font size

Instead of changing every single value at a breakpoint, adjust the root font size once. All rem-based values scale.

html {
font-size:16px;
}

@media (min-width:900px) {
html {
font-size:18px;
  }
}

.page {
padding:1.5rem;
}

.hero-title {
font-size:2.5rem;
}

On larger screens, the spacing and text grow together. That can feel more natural than “big text, tiny padding.”

4) Buttons that remain comfortable with larger text

People often set a bigger font size and suddenly buttons feel cramped. Rem-based padding helps.

<buttonclass="primary">Send message</button>
<buttonclass="secondary">Save draft</button>

.primary,
.secondary {
font-size:1rem;
padding:0.75rem1.25rem;
border-radius:0.75rem;
border:1px solid#ccc;
}

.primary {
background:#222;
color: white;
}

.secondary {
background: white;
color:#222;
}

If the root font size increases, the button text and the padding scale together, so the button still feels “clickable.”

5) A layout that uses rem for gaps and max-width

Rem is not only for font sizes. Using it for layout can keep proportions steady.

.container {
max-width:70rem;/* scales with root size */
margin:0 auto;
padding:2rem1.5rem;
}

.grid {
display: grid;
gap:1.25rem;
grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}

This is a solid setup for cards or blog posts that should not stretch too wide.

Learn More About the rem unit

rem vs em

em is based on the font size of the element itself (or its parent, depending on the property). That makes it powerful, but it can also create “compounding” effects in nested components.

Example:

.card {
font-size:1.25em;
}

.cardh2 {
font-size:2em;
}

If the card’s font size changes, the heading changes again because it is relative to the card. Sometimes that is exactly what you want. Sometimes it becomes a surprise.

rem avoids that compounding because it always points back to the root size. For many design systems, that predictability is the main selling point.

rem for media queries

Media queries usually do not scale when users change font size, because they are based on viewport size, not font size. Still, some developers use em or rem in media queries so breakpoints respond to zoom or default font adjustments in certain browsers.

@media (min-width:60rem) {
/* layout changes */
}

This is not a universal behavior across every scenario, so test in your target browsers. Use it when you have a clear reason, not just because it looks fancy.

Using rem with CSS variables

CSS variables pair well with rem because you can define a spacing scale once.

:root {
--space-1:0.5rem;
--space-2:1rem;
--space-3:1.5rem;
--radius:0.75rem;
}

.panel {
padding:var(--space-3);
border-radius:var(--radius);
display: grid;
gap:var(--space-2);
}

This makes it easier to stay consistent when many people work in the same codebase.

Common mistakes with rem

A few issues show up a lot:

• Setting height in rem for components that contain text. Text scaling can overflow the fixed height. Prefer min-height or let content define height.
• Mixing rem and px randomly. A little mixing is fine, but too much makes the scale hard to reason about.
• Changing the root font size without checking form controls. Some browser default UI elements may look different when base font size changes.

Summary

The rem unit scales lengths based on the root font size, which makes it great for typography, spacing, and reusable components. Use it when you want predictable scaling across a page, especially when users adjust their font size settings. For nested scaling that depends on the component itself, em can make more sense, but rem is usually the safer default for a clean, consistent system.