PX naar REM: De Gids voor Ontwikkelaars voor Schaalbare Typografie
Leer waarom rem-eenheden de toegankelijkheid verbeteren, hoe je ze berekent en best practices voor responsieve typografie in CSS.
De keuze tussen px en rem in CSS is niet slechts een stilistische voorkeur — het heeft directe gevolgen voor toegankelijkheid, gebruikerscontrole en responsief design. Miljoenen gebruikers stellen een aangepaste lettergrootte in hun browservoorkeuren in, en een stylesheet volledig in px geschreven negeert die instelling volledig.
Deze gids legt de werking van elke eenheid uit, de formule voor het converteren van px naar rem en de praktische regels voor wanneer je welke eenheid gebruikt in een echte CSS-codebase.
CSS-eenheden begrijpen (px, rem, em, vh)
CSS biedt meerdere lengte-eenheden voor verschillende toepassingen. px (pixels) is een absolute eenheid. rem (root em) is een relatieve eenheid gebaseerd op de font-size van het root-element (<html>). em is een relatieve eenheid gebaseerd op de font-size van het huidige element. vh en vw zijn viewport-relatief: 1vh = 1% van de viewporthoogte. Elke eenheid heeft geschikte en ongeschikte toepassingen.
Gratis Tool PX naar REM Converter Converteer direct pixelwaarden naar rem met elke basisgrootteWaarom px problematisch is voor toegankelijkheid
Browsers staan gebruikers toe een standaard lettergrootte in te stellen in de voorkeuren (standaard 16px, maar gebruikers kunnen 20px, 24px of groter instellen). Wanneer je font-size: 16px in CSS instelt, overschrijft dit de voorkeur van de gebruiker. Dit schendt WCAG 2.1 Succescriterium 1.4.4 (Tekst herschalen), dat vereist dat tekst tot 200% vergroot kan worden zonder verlies van inhoud of functionaliteit.
Hoe rem werkt (root font-size)
De rem-eenheid is altijd relatief ten opzichte van de font-size van het <html>-element. Standaard stellen browsers dit in op 16px. Als een gebruiker de browserlettergrootte verhoogt naar 20px, dan is 1rem = 20px — alle rem-gebaseerde waarden schalen evenredig. Stel nooit font-size in op <html> in pixels (bijv. html { font-size: 16px }) want dit maakt het doel ongedaan. Gebruik een percentage: html { font-size: 112.5% } stelt de basis in op 18px bij een standaard 16px browser.
Gratis Tool Kleurcontrast Checker Controleer WCAG 2.1 contrastverhoudingen samen met de toegankelijkheid van lettergroottePX naar REM formule
De formule is eenvoudig: rem = px / basislettergrootte. Met de standaard 16px basis: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 24px = 1.5rem, 32px = 2rem. In CSS-preprocessors (Sass, Less) kun je een functie definiëren. In modern CSS kunnen custom properties en calc() dit automatiseren zonder preprocessor.
/* Sass functie */
@function rem($px) {
@return #{$px / 16}rem;
}
/* Gebruik */
font-size: rem(18); /* → 1.125rem */
/* Puur CSS */
:root {
--base: 16;
}
.text {
font-size: calc(18 / var(--base) * 1rem);
}Wanneer rem vs em vs px gebruiken
Gebruik rem voor globale typografie (broodtekst, koppen, labels) en voor spatiëring die mee moet schalen met de lettergroottevoorkeur van de gebruiker. Gebruik em voor spatiëring op componentniveau die evenredig moet zijn aan de eigen font-size van het component (padding in een knop). Gebruik px voor randen, schaduwen en layout-elementen die niet mee moeten schalen met tekst. Gebruik viewport-eenheden (vh, vw) voor layout-elementen gerelateerd aan het viewport.
CSS custom properties voor de rem-basis
Een veelgebruikt patroon is een CSS custom property instellen voor de basislettergrootte. Stel font-size als percentage in op <html> om gebruikersvoorkeuren te respecteren en gebruik vervolgens overal rem. De clamp()-functie creëert vloeiende typografie die schaalt tussen minimum- en maximumwaarden op basis van de viewportbreedte, zonder media query breakpoints.
/* Toegankelijke basis */
html {
font-size: 100%;
}
body {
font-size: 1rem;
}
h1 {
font-size: 2rem;
}
/* Vloeiende typografie met clamp */
.hero-title {
font-size: clamp(1.5rem, 4vw, 3rem);
}