rem (CSS unit)
The rem is a CSS unit relative to the root font size, the size set on the html element. Since browsers default that to 16 pixels, 1rem usually equals 16px, 1.5rem equals 24px, and so on. Because every rem value scales from one root, it keeps type and spacing consistent and respects the user's own font-size setting, which makes it a cornerstone of accessible, responsive design.
How rem is calculated
A rem is always the root font size multiplied by the number. If the html element is 16px, then 2rem is 32px. Change the root once and everything sized in rem scales with it.
html { font-size: 16px; }means1rem = 16px.font-size: 1.25rem;resolves to 20px.- Setting
html { font-size: 100%; }keeps the browser default and honours the user's preference.
rem versus em versus px
Choosing the right unit comes down to what it is relative to.
| Unit | Relative to | Scales with user font size | Best for |
|---|---|---|---|
| px | Nothing (fixed) | No | Borders, fine details |
| em | Current element font size | Yes, but compounds | Spacing tied to local text |
| rem | Root font size | Yes | Type scale, global spacing |
Why rem helps accessibility
When a user raises the default text size in their browser, everything sized in rem grows with it, because it all derives from the root. Sizing in fixed pixels ignores that choice and can make a site unreadable for people who need larger text, which is also a WCAG concern. rem is the simplest way to honour the user's preference site-wide.
Building a scale with rem
rem is the go-to unit for font sizes and for a consistent spacing scale. A common pattern is a small, repeatable set (0.5rem, 1rem, 1.5rem, 2rem, 3rem) used for margins, padding and gaps, which keeps rhythm harmonious and easy to reason about across a whole design system.
Common pitfalls
Avoid the old font-size: 62.5% trick that forces 1rem = 10px: it makes maths easier but can clash with user settings and third-party styles. Keep px for hairline borders where scaling is unwanted, and reach for em when spacing should follow a component's own font size rather than the root.
rem at BeBranded
At BeBranded we size type and spacing in rem so a site scales cleanly and stays accessible when users adjust their text size. It is part of the accessible, systematic front-end in our design work.
FAQ
What is a rem in CSS?
What is the difference between rem and em?
What is the difference between rem and px?
How many pixels is 1rem?
Why use rem for accessibility?
Does Webflow support rem?
Linked tools
