Camp 2 · Step 6 of 13
Units: px, rem, %, and friends
What CSS units really measure — and a simple rule for choosing the right one.
Every size in CSS carries a unit, and choosing well is the difference between a design that adapts and one that shatters. Four units cover nearly everything.
The big four
| Unit | Relative to | Feels like |
|---|---|---|
px | nothing (fixed) | "exactly this many dots" |
rem | the root font size (16px by default) | "sized relative to the user's setting" |
em | the current element's font size | "sized relative to my own text" |
% | the parent element | "a share of my container" |
Why rem beats px for text
Users can raise their browser's base font size (or use tools like our
accessibility toolbox!). Text set in rem scales with that choice;
text nailed down in px ignores it. Accessibility, in one unit choice.
A practical starter rule:
- Text and spacing →
rem - Widths of flexible things →
%(or none at all) - Borders and tiny details →
px
em: the local relative
em looks like rem but references the current font size — useful for
things that should scale with their own text, like padding inside a button:
.button {
font-size: 1.25rem;
padding: 0.5em 1em; /* grows if the button text grows */
}Nested ems compound (1.2em inside 1.2em is 1.44×), which surprises
people — when in doubt, rem is the calmer choice.
If the root font size is 16px, how big is 1.5rem?
Why is rem preferred over px for font sizes?