CSS — Units

Two families

Absolute units are fixed physical-ish sizes; relative units scale from something else. Relative units make designs adaptive — modern CSS leans on them heavily.

px — the precise pixel

border: 1px solid #ddd;
font-size: 14px;

Predictable everywhere. Best for hairlines, shadows, icons, small details — not for typography or layout at large (accessibility cost).

% — percent of the parent

.child { width: 50%; }    /* half of parent's width */

Context-dependent: width % → parent width; height % needs a sized parent; padding % is relative to width even for top/bottom (quirk!).

em — relative to MY font-size

h2 { font-size: 1.5em; }        /* 1.5 × PARENT font size */
h2 span { font-size: 1.5em; }   /* compounds! 1.5 × 1.5 */

em cascades multiplicatively inside nested elements — powerful for component-internal spacing that scales with local text:

.btn { padding: 0.6em 1.4em; }  /* grows with the button's own text size */

rem — relative to ROOT font-size

html { font-size: 100%; }        /* user's setting, usually 16px */
h1   { font-size: 2.25rem; }     /* always 2.25 × root — no compounding */
p    { font-size: 1rem; margin-bottom: 1rem; }

The workhorse unit:

rem	Typical px	Use
0.875	14	small print
1	16	body
1.125–1.25	18–20	lede
1.5–3	24–48+	headings

Because it multiplies the user's browser font setting, resizing text in browser settings rescales your whole design — the accessibility win that px can't offer.

Viewport units — sized by the screen

.hero { height: 100vh; }              /* full screen height */
.sidebar { width: 25vw; }             /* quarter of viewport width */
h1 { font-size: clamp(2rem, 5vw, 4rem); }   /* fluid headline */

vw/vh = 1% of viewport width/height. clamp(min, ideal, max) keeps fluid values within sane bounds.

Mobile caveat: 100vh can overflow under dynamic toolbars — prefer 100dvh where supported.

ch & ex — character-based

article { max-width: 70ch; }   /* ~45–75 chars/line readability rule */

fr — grid's fraction

grid-template-columns: 1fr 2fr;   /* second column twice the first */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

fr divides leftover space after fixed tracks — grid-only.

Choosing cheat sheet

Job	Unit
Borders, shadows, tiny details	px
Typography & spacing scale	rem
Component-internal scaling with its text	em
Fluid columns / full-screen sections	% / vh / clamp
Readable line length	ch
Grid track sizing	fr

The classic migration

/* before */
.card { width: 320px; padding: 16px; font-size: 15px; }

/* after */
.card { max-width: 20rem; padding: 1rem; font-size: 0.9375rem; }

Now the whole card scales if a user enlarges root font size.

Mini Practice

1. Convert an all-px stylesheet to rem (divide by 16).
2. Demonstrate em compounding through three nested spans.
3. Build a clamp() headline; drag window and watch it breathe.
4. Compare 100vh vs 100dvh on a phone emulator.
5. Set article to 70ch; count characters per line.
6. Prove padding-% uses width even vertically.

Next: gradients →