CSS-eenheden splitsen zich in absolute (vast) en relatieve (schaal met iets). Goed kiezen is essentieel voor responsieve, toegankelijke lay-outs.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Gebruik voor dingen die niet moeten schalen (randen, kleine vaste details).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em samengesteld door nesting (een kind van een kind vermenigvuldigt), wat onverwacht kan spiraliseren. rem verwijst altijd naar root, dus het is voorspelbaar — standaard voor lettergroottes en afstand. Gebruik em wanneer je wilt dat sizing relatief is ten opzichte van het lokale lettertype (bijv. padding op een knop die schaalt met de tekst).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Het gebruik van rem voor type respecteert gebruikers die een grotere standaardlettergrootte instellen — een echte toegankelijkheidsvooruitgang die px breekt.
De juiste eenheid maakt lay-outs responsief en toegankelijk: rem voor type/afstand (voorspelbaar + respecteert gebruikersinstellingen), %/vw/vh voor vloeiende lay-out, px voor vaste details, en em voor lokaal-relatieve sizing.
Nieuwere viewport-eenheden (dvh, svh) verhelpen ook problemen met de hoogte van de mobiele adresbalk.