What is REM in CSS? A Practical Guide with Examples
Understand the rem unit in CSS and why it matters for responsive, accessible web design. Practical examples, browser support, and conversion tips included.
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.
Free PX to REM Converter
Convert pixels to rem units instantly. Adjustable base font size.
Try it freeRelated Articles
CSS Units Explained: PX vs REM vs EM vs VW vs VH in 2026
A complete guide to CSS units. Learn when to use pixels, rem, em, vw, and vh with practical examples and conversion tips for responsive web design.
CSSPX to REM Conversion: Why You Should Stop Using Pixels in CSS
Learn why rem units are better than pixels for accessible, responsive web design. Includes conversion formula, examples, and a free PX to REM converter tool.
CSSCSS to Tailwind Migration: A Complete Step-by-Step Guide
Migrate your CSS codebase to Tailwind CSS with this practical guide. Covers class mapping, responsive design conversion, and a free automated converter tool.