Episode 1 — Fundamentals / 1.6 — CSS Core Fundamentals

1.6.e — CSS Units (px, rem, em, %, vw, vh)

In one sentence: CSS units fall into absolute (fixed physical/screen size) and relative (scaled to context) categories — choosing the right unit determines whether your design scales gracefully across devices, zoom levels, and user preferences.

Navigation: ← 1.6.d — Box Model · 1.6.f — Modern CSS Functions →

1. Absolute vs relative

CategoryScales withExamples
AbsoluteNothing — fixed sizepx, cm, mm, in, pt
RelativeSome context (parent, root, viewport)em, rem, %, vw, vh, vmin, vmax, ch, ex

2. Unit-by-unit breakdown

px — CSS pixel

PropertyDetail
TypeAbsolute
Relative toDevice pixel ratio (1 CSS px = 1/96th of an inch, but DPR adjusts)
Good forBorders, shadows, thin lines — anything that should stay visually constant
PitfallDoes not scale with user's font-size preference; avoid for typography and spacing

rem — root em

PropertyDetail
TypeRelative
Relative to:root (usually <html>) font-size
Good forTypography, spacing, layout widths — scales with user preference
Why it mattersIf a user sets their browser font-size to 20px, 1rem = 20px — your layout respects that
html { font-size: 16px; }    /* default in most browsers */
h1   { font-size: 2rem; }    /* = 32px */
p    { font-size: 1rem; }    /* = 16px */

em — parent em

PropertyDetail
TypeRelative
Relative toThe element's own computed font-size (for most properties) or parent's font-size (when used on font-size itself)
Good forComponent-internal spacing that should scale with the component's text size
PitfallCompounding — nested em values multiply: 1.2em inside 1.2em = 1.44× root

% — percentage

PropertyDetail
TypeRelative
Relative toParent's corresponding dimension (width: 50% = half of parent's width)
Good forFluid widths, responsive layouts
Pitfallheight: 50% only works if the parent has a defined height

vw / vh — viewport units

UnitRelative to
vw1% of viewport width
vh1% of viewport height
vmin1% of the smaller dimension
vmax1% of the larger dimension

Good for: full-bleed sections (height: 100vh), responsive typography scaling.

Pitfall — mobile vh: on mobile browsers, 100vh may exceed the visible viewport because of the address bar. Use the newer dynamic viewport units where supported:

UnitMeaning
dvhDynamic viewport height (adjusts with address bar)
svhSmall viewport height (always the smallest possible)
lvhLarge viewport height (always the largest possible)

ch — character width

1ch = width of the 0 glyph in the current font. Useful for constraining text measure:

.prose { max-width: 70ch; }   /* ~70 characters per line — optimal readability */

3. Which unit when?

Use caseRecommended unitWhy
Font sizesremRespects user preference; scales globally
Spacing / paddingrem or emScales with text; consistent rhythm
Component-internal spacingemScales with the component's own font size
Borders, shadowspxThin visual details should stay crisp
Fluid widths% or vwResponsive to container/viewport
Full-screen sectionsdvh / vhViewport-relative height
Line width (measure)chContent-aware readability
Media queriesem (or rem)Scales with user zoom; px media queries don't

4. The rem vs em decision

remem
ReferenceRoot font-size (stable, global)Element's own font-size (local, contextual)
CompoundingNever — always based on rootYes — nested em values multiply
Best forGlobal spacing, layout, typographyPadding/margins that should scale with the component's text

Common pattern: use rem for everything by default; use em only for component padding/margins where you want spacing to grow/shrink with the component's font-size.

5. Accessibility and units

User font-size preferences (set in browser settings) adjust the :root font-size. If you use px for text, those preferences are ignored — the text stays fixed. Using rem (or em) respects the user's choice.

WCAG Success Criterion 1.4.4: Text must be resizable up to 200% without loss of content or functionality. Using relative units is the primary way to meet this.

6. Key takeaways

  1. rem is the go-to for typography and spacing — scales with user preference.
  2. em is useful inside components — but beware compounding.
  3. px for borders, shadows, and thin details — avoid for text.
  4. % and vw/vh for fluid layouts — use dvh on mobile for viewport height.
  5. ch for readable line widths — max-width: 70ch is a readability best practice.
  6. Choosing the right unit is an accessibility decision — not just a design preference.

Explain-It Challenge

Explain without notes:

  1. Why rem respects user font-size preferences but px does not.
  2. What em compounding is and how it can cause unexpected font sizes in nested elements.
  3. Why 100vh on mobile might not mean "the visible screen height" and what dvh fixes.

Navigation: ← 1.6.d — Box Model · 1.6.f — Modern CSS Functions →