PX vs REM in CSS: when to use each unit
A practical guide to pixels and rem in CSS, why rem scales with the root font-size, and how to choose the right unit for type and spacing.
How the browser defines a rem
The rem unit is short for root em, and it is anchored to the font-size of the root html element rather than any local element. Browsers ship with that root at 16px, so by default 1rem resolves to 16px throughout the document. Change the root font-size once, in a single rule on html, and every rem based measurement across the page rescales in lockstep. That one-knob behavior is the entire appeal of rem for building consistent, resizable interfaces.
Why px alone can hurt accessibility
A font-size declared in pixels is fixed and ignores the base font-size a reader may have chosen in their browser settings. Someone who bumps their default up to 20px for easier reading gets no benefit from text hard coded at 14px. When the same text is written in rem, it grows with the user's base size automatically, keeping the layout usable for people who rely on larger type. Reserve pixels for details that genuinely should not scale, such as hairline borders and shadow offsets.
The 62.5% root trick
A long-standing shortcut is to set the root font-size to 62.5%, which turns the default 16px into 10px. After that, 1rem equals 10px and conversions become effortless: 18px is 1.8rem, 24px is 2.4rem, and so on. This calculator reproduces the same math when you set the root field to 10, so you can preview the tidy values before committing to the trick. The tradeoff is that you must remember the root is scaled, so set component font sizes deliberately.
Mixing rem, em and px on purpose
Real stylesheets rarely use one unit for everything. A common pattern is rem for font sizes and outer spacing so the layout scales globally, em for padding inside a button so it grows with that button's own text, and px for a crisp one pixel divider. Understanding what each unit is relative to lets you pick intentionally instead of guessing. When you do need a hard number, converting with a fixed root keeps your rem values honest and reproducible.