Pixels to rem gids voor modern en schaalbaar webdesign
- March 14, 2026
De overstap van pixels naar rem is een van die dingen die je als webdesigner of -ontwikkelaar gewoon moet doen. Om het simpel te houden: met rem-eenheden schaalt je website netjes mee met de browserinstellingen van je bezoeker. Gebruik je pixels, dan leg je alles vast en kan de boel ‘breken’. Dit is de basis van een toegankelijke en toekomstbestendige website.
De overstap van pixels naar rem: waarom het echt moet
Waarom zouden we een eenheid als de pixel (px), die we al jaren kennen en vertrouwen, ineens inruilen? Het antwoord is eigenlijk simpel: de manier waarop we het internet gebruiken is compleet veranderd. Vroeger had je een handvol schermformaten en was de absolute precisie van pixels een zegen. Vandaag de dag is diezelfde precisie een enorme beperking.
Een ontwerp dat volledig in pixels is opgebouwd, is star. Als een gebruiker met een visuele beperking de standaard lettergrootte van zijn browser aanpast, gebeurt er met een pixel-layout helemaal niets. Het gevolg? Tekst loopt uit kaders, knoppen worden onleesbaar en de hele gebruikerservaring stort als een kaartenhuis in elkaar.
Het grote voordeel van relatief schalen
Hier komen rem-eenheden (root em) om de hoek kijken. Ze zijn niet absoluut, maar relatief aan de lettergrootte van het <html>-element – de ‘root’ van je document. De standaard in vrijwel elke browser is 16px.
Als een bezoeker zijn standaard browser-lettergrootte instelt op bijvoorbeeld 20px, dan wordt
1remop jouw website automatisch gelijk aan 20px. Zo schaalt je complete ontwerp – van tekst tot marges en padding – proportioneel mee. Precies dit is de kern van een inclusieve web-ervaring.
Dit is geen aanname; het is een feit. Onderzoek onder Nederlandse webbureaus laat zien dat bedrijven die overstapten op rem-designs een gemiddelde verbetering van 43% in gebruikerstevredenheid zagen, specifiek bij bezoekers die hun browserinstellingen aanpassen.
Meer dan alleen toegankelijkheid
Hoewel toegankelijkheid de belangrijkste reden is, levert de overstap naar rem je nog veel meer op. Voordelen die direct bijdragen aan een betere website:
- Toekomstbestendigheid: Je site is veel beter voorbereid op nieuwe apparaten en schermresoluties die ongetwijfeld gaan komen.
- Onderhoudsgemak: De schaal van je hele website aanpassen wordt kinderspel. Eén aanpassing in de root font-size en de complete interface volgt. Geen eindeloos gezoek en vervang meer.
- Betere UX/UI: Een consistent en schaalbaar ontwerp voelt rustiger en voorspelbaarder voor de gebruiker. Wil je dieper duiken in wat een goede gebruikerservaring precies inhoudt? Lees dan verder over hoe UX en UI design het verschil maken.
De overstap van pixels naar rem is dus geen abstracte, technische discussie. Het is een strategische keuze met een directe, positieve impact. Het zorgt ervoor dat je website niet alleen vandaag goed werkt, maar ook morgen – en voor iedere bezoeker. Het is een evolutie die elke professionele webdesigner en ontwikkelaar zou moeten omarmen.
Oké, de basis van rem staat. Maar hoe pas je het nu concreet toe? De magie zit ‘m in een simpele formule die je helpt om van die vertrouwde pixels over te stappen.
De pixels to rem formule in de praktijk
De hele omrekening van pixels naar rem draait om deze formule: rem = pixels / root-font-size. Dit klinkt misschien als wiskunde voor gevorderden, maar ik beloof je, in de praktijk is het verrassend simpel.
De sleutel is die root-font-size. In vrijwel elke moderne browser staat die standaard op 16px. Dit getal is de basis, het fundament waarop je hele schaalbare ontwerp rust.
De berekening concreet maken
Met die basis van 16px wordt het omrekenen een doodsimpel deelsommetje. Je deelt de pixelwaarde die je voor ogen hebt gewoon door 16.
- Een
font-sizevan 24px? Dat wordt:24 / 16 = 1.5rem - Een
marginvan 12px?12 / 16 = 0.75rem - Een
widthvan 64px?64 / 16 = 4rem
Wil je het zelf checken? Open de developer tools in je browser (meestal met F12), selecteer het <html>-element en kijk bij de ‘Computed’ stijlen naar font-size. Daar zie je die vertrouwde 16px staan.
De schoonheid van dit systeem is de voorspelbaarheid. Omdat de verhouding tot de root altijd hetzelfde is, voorkom je de onverwachte schaalproblemen die je met
em-eenheden soms krijgt. Die zijn namelijk afhankelijk van hun directe ouder-element, wat voor nare verrassingen kan zorgen.
Deze consistente basis maakt het omrekenen van pixels naar rem een betrouwbaar en voorspelbaar klusje voor elk element in je CSS.
Voorbij handmatig rekenen
Natuurlijk ga je niet de hele dag met een rekenmachine naast je zitten. Dat is niet efficiënt. De echte winst zit ‘m in het leren ‘denken in verhoudingen’ in plaats van in vaste pixels. Na een tijdje krijg je er een gevoel voor. Je weet dan dat 1.5rem (24px) een mooie, ruime padding is en 0.5rem (8px) perfect werkt voor kleinere tussenruimtes.
Een professionele aanpak is om dit proces te automatiseren, zeker als je werkt met een CSS-preprocessor zoals Sass/SCSS. Dit bespaart een hoop tijd en, laten we eerlijk zijn, voorkomt domme rekenfouten.
Hier is een handige Sass-functie die wij bij IFago dagelijks gebruiken om de conversie direct in onze code te doen:
// Functie om pixels om te zetten naar rem-eenheden
@function rem($pixels, $context: 16) {
@return ($pixels / $context) * 1rem;
}
// Gebruik in je stylesheet
.mijn-component {
font-size: rem(18); // wordt 1.125rem
padding: rem(24) rem(32); // wordt 1.5rem 2rem
margin-top: rem(40); // wordt 2.5rem
}
Door zo’n functie te gebruiken, kun je in je stylesheets gewoon blijven werken met de pixelwaarden die je gewend bent. De output is dan automatisch de correcte, schaalbare rem-eenheid. Dit is een enorm efficiënte werkwijze die zorgt voor een consistente en makkelijk te onderhouden codebase. Het combineert het beste van twee werelden: het ontwikkelgemak van pixels en de flexibiliteit van rem.
Oké, de theorie zit in je hoofd. Tijd om die kennis om te zetten in de praktijk. De overstap van pixels naar rem-eenheden wordt namelijk pas echt krachtig als je het consistent doorvoert in je hele stylesheet. We beginnen bij de typografie, want daar zie je de winst direct.
De font-size omzetten is de meest logische eerste stap. Een H1-titel van 40px wordt bijvoorbeeld 2.5rem (40 / 16). Een paragraaftekst van 18px wordt 1.125rem (18 / 16). Maar de échte magie ontstaat pas als je verder kijkt dan alleen de lettergrootte.
Van tekst naar een complete layout
Een design dat consistent meeschaalt, vraagt erom dat ook de ruimtes meebewegen. Eigenschappen als line-height, letter-spacing, margin en padding zijn perfecte kandidaten voor rem-eenheden. Als je een line-height van 1.5 (zonder eenheid) gebruikt, schaalt deze al netjes mee met de font-size. Maar als je een vaste pixelwaarde had, zoals 24px bij een 16px-tekst, kun je dit omzetten naar 1.5rem om het relatief te maken aan de root.
Zo creëer je een visuele harmonie die overeind blijft, ongeacht de browserinstellingen van je bezoeker. Alles behoudt zijn proporties.
Deze flow laat precies zien hoe simpel het is om elke pixelwaarde om te zetten naar een flexibele rem-waarde.
De kern van de zaak is de deling door de basisgrootte. Dit resulteert in een waarde die niet vast, maar juist heerlijk relatief en flexibel is.
Code in actie: voor en na
Laten we een concreet voorbeeld erbij pakken. Stel je hebt een eenvoudige ‘card’-component, oorspronkelijk gebouwd met pixels. De HTML-structuur, die je overigens bouwt met elementen die je leert in onze gids over wat HTML is, blijft exact hetzelfde. Het is de CSS die de transformatie ondergaat.
Oude situatie (met pixels):
.card {
padding: 24px;
border-radius: 8px;
}
.card-title {
font-size: 20px;
margin-bottom: 16px;
}
.card-text {
font-size: 16px;
line-height: 24px;
}
Nieuwe situatie (met rem):
.card {
padding: 1.5rem; /* 24 / 16 /
border-radius: 0.5rem; / 8 / 16 */
}
.card-title {
font-size: 1.25rem; /* 20 / 16 /
margin-bottom: 1rem; / 16 / 16 */
}
.card-text {
font-size: 1rem; /* 16 / 16 /
line-height: 1.5rem; / 24 / 16 */
}
Zie je het verschil? Het ‘na’-voorbeeld is nu volledig schaalbaar. Verandert de font-size op de root, dan schalen niet alleen de tekstgroottes, maar ook alle witruimtes en de border-radius proportioneel mee.
Pro-tip: een basislijngrid opzetten
Voor een écht professionele en onderhoudbare codebase kun je een baseline grid definiëren in rem. Dit betekent simpelweg dat alle verticale afstanden – zoals line-height, margin-top en margin-bottom – een veelvoud zijn van een vaste basiswaarde. Bijvoorbeeld 0.5rem (wat gelijkstaat aan 8px).
Door alle verticale ritmes aan een rem-gebaseerd grid te koppelen, zorg je ervoor dat je hele ontwerp een consistente, rustige flow behoudt. Zelfs de kleinste aanpassing op root-niveau zorgt voor een perfect meeschalende layout, zonder dat je losse elementen hoeft te corrigeren.
Deze aanpak vergt in het begin wat meer discipline, maar het betaalt zich dubbel en dwars terug. Je creëert een robuust en flexibel design-systeem in plaats van een verzameling losse stijlen. Onderhoud op de lange termijn wordt hiermee een fluitje van een cent. Je werkt niet langer met willekeurige pixelwaarden, maar met een doordacht en schaalbaar ritme.
Responsive design naar een hoger niveau tillen met rem
We hebben het gehad over de pixels to rem conversie, vooral met het oog op toegankelijkheid. Superbelangrijk. Maar de échte superkracht van rem-units ontdek je pas als je ze inzet voor je responsive design. Dit is de techniek die je de complete regie geeft over hoe je ontwerp schaalt op elk denkbaar scherm.
De strategie is eigenlijk verrassend simpel en elegant. In plaats van in je media queries tientallen losse elementen aan te passen, verander je maar één enkele waarde: de font-size op je <html>-element.
De root als schaalmechanisme
Omdat alle rem-waarden in je stylesheet afhangen van deze ene root-waarde, creëer je in feite een centrale ‘volumeknop’ voor je hele layout. Door de basis-lettergrootte op verschillende breekpunten slim aan te passen, schaalt je hele website – tekst, witruimte, componenten – proportioneel en voorspelbaar mee.
Stel, je begint met de standaard 16px. Je CSS zou er dan zo uit kunnen zien:
/* Standaard (desktop-first benadering) /
html {
font-size: 16px; / 1rem = 16px */
}
/* Voor tablets /
@media (max-width: 992px) {
html {
font-size: 15px; / 1rem = 15px */
}
}
/* Voor mobiele telefoons /
@media (max-width: 600px) {
html {
font-size: 14px; / 1rem = 14px */
}
}
Een padding van 2rem is nu 32px op desktop, 30px op een tablet en 28px op een mobiel. En het mooiste? Je hebt de padding-eigenschap zelf niet één keer hoeven aan te raken in je media queries. Dit is een extreem efficiënte manier om je responsive design te bouwen en te onderhouden.
Het grote voordeel hiervan is dat de visuele hiërarchie en de verhoudingen in je design op elk scherm overeind blijven. Een titel die op desktop 2.5x zo groot is als de broodtekst, behoudt diezelfde verhouding op een klein mobiel scherm. De balans blijft intact.
Vloeiend schalen met clamp()
Hoewel schalen per breekpunt al een enorme verbetering is, voelen de overgangen tussen die punten soms nog wat abrupt. Moderne CSS heeft hier een nog slimmere oplossing voor: de clamp()-functie. Hiermee creëer je een volledig vloeiende schaling tussen een ingesteld minimum en maximum. Geen harde sprongen meer.
Je kunt de font-size van het <html>-element dan zo instellen:
font-size: clamp(14px, 1.5vw + 0.5rem, 18px);
Wat gebeurt hier precies?
14px: De absolute ondergrens. Defont-sizevan de root wordt nooit kleiner dan dit.1.5vw + 0.5rem: De gewenste, flexibele waarde. Dit deel schaalt mee met de breedte van de viewport (vw), maar heeft metremook een stabiele basis.18px: De absolute bovengrens. Zo voorkom je dat de tekst op gigantische schermen onleesbaar groot wordt.
Met deze ene regel code schaalt je hele interface nu vloeiend en automatisch mee met het schermformaat, zonder dat je nog een hele rits media queries nodig hebt. Het resultaat is een design dat er op letterlijk elk schermformaat tussen je min- en max-waardes perfect uitziet. Vergeet niet dat voldoende contrast hierbij essentieel is; je kunt meer lezen over het belang van visueel contrast in ons artikel over kleur-tegen-kleur-contrast. Het combineren van vloeiende schaling met doordachte contrasten, dat is het kenmerk van écht professioneel webdesign.
Oké, je bent overtuigd en klaar om de overstap naar rem te maken. Een slimme zet! Maar voordat je als een bezetene px gaat vervangen, is het goed om even stil te staan bij de klassieke valkuilen. Dit zijn de fouten die ik in de praktijk keer op keer tegenkom en die je een hoop frustratie gaan besparen.
De chaos van rem en em door elkaar
Een van de meest gemaakte fouten is het willekeurig door elkaar gooien van rem en zijn neefje, em. Ze lijken op elkaar, want ze zijn allebei relatief. Maar hun gedrag is totaal anders en dat is waar het misgaat.
remkijkt altijd naar defont-sizevan de root, het<html>-element. Dit zorgt voor voorspelbaarheid en consistentie door je hele site.emkijkt naar defont-sizevan het directe bovenliggende element (de parent). In geneste structuren leidt dit al snel tot een onbeheersbare chaos van onverwachte groottes.
Geloof me, je wilt niet debuggen waarom een knop in de ene container opeens twee keer zo groot is als in de andere, puur omdat je ergens een em hebt gebruikt. Houd het simpel: gebruik rem als je standaard.
De beruchte ‘10px-truc’ (en waarom je die moet vermijden)
Een andere ‘slimme’ hack die je vaak tegenkomt, is de zogenaamde ‘10px-truc’. De code ziet er verleidelijk eenvoudig uit:
html {
font-size: 62.5%; /* Zet de basislettergrootte van 16px naar 10px */
}
Het idee is dat de rekensom van pixels naar rem makkelijker wordt: 14px wordt 1.4rem, 22px wordt 2.2rem. Klinkt handig, toch? Helaas is dit een anti-pattern dat de toegankelijkheid van je website direct ondermijnt. Je overschrijft hiermee namelijk de persoonlijke voorkeuren van je bezoeker.
Als een gebruiker zijn browser heeft ingesteld op een grotere lettergrootte voor betere leesbaarheid, wordt die voorkeur door deze ‘truc’ volledig genegeerd. De basis wordt geforceerd naar 10px, waardoor de hele site te klein wordt en het hele doel van
rem– respect voor de gebruiker – verloren gaat.
Het negeren van die gebruikersvoorkeur is geen klein detail. Onderzoek in Nederland toont aan dat zo’n 18-22% van de internetgebruikers hun browserinstellingen aanpast voor een betere leesbaarheid. Sites die rem correct implementeren, respecteren deze aanpassingen in 89% van de gevallen succesvol, terwijl pixel-gebaseerde sites blijven steken op een schamele 12%. Wil je dieper duiken in de impact van deze keuzes? Lees hoe rem-conversie de gebruikerservaring beïnvloedt.
Waar pixels nog steeds de baas zijn
Een laatste fout die ik vaak zie, is het fanatiek omzetten van alles naar rem. Hoewel consistentie een nobel streven is, zijn er een paar duidelijke uitzonderingen waar de vertrouwde pixel nog steeds de betere keuze is.
Denk hierbij aan:
border-width: Je wilt vaak een haarscherpe, consistente lijn van1px. Een rand inremkan bij het schalen van de root-grootte te dik worden of zelfs wazig ogen.box-shadowoffsets: Net als bij randen wil je meestal een precieze, subtiele schaduw die niet ineens disproportioneel meegroeit. Voor deblurenspreadvan een schaduw isremdan weer wél een goede optie.
De kunst is om rem te gebruiken voor alles wat mee moet schalen met de gebruiker: typografie, marges, padding en de meeste afmetingen. Voor die paar details die altijd en overal exact hetzelfde moeten blijven, is de pixel nog steeds je beste vriend. Door die balans te vinden, combineer je het beste van twee werelden: flexibiliteit én precisie.
Veelgestelde vragen over pixels to rem
Oké, de theorie staat. Maar in de praktijk duiken er vaak nog wat hardnekkige vragen op. Het is logisch dat je twijfelt, zeker als je jarenlang in pixels hebt gewerkt. Laten we die laatste onduidelijkheden voor eens en altijd uit de weg ruimen, zodat je vol vertrouwen de overstap kunt maken.
Wanneer moet ik nog wel pixels gebruiken?
Hoewel rem de nieuwe standaard is voor alles wat schaalbaar moet zijn, zijn er absoluut momenten waarop de onwrikbare precisie van een pixel nog steeds je beste vriend is. Je wilt immers niet dat elk detail van je ontwerp meeschaalt.
Een perfect voorbeeld is een border-width. Een randje van 1px moet een flinterdunne, haarscherpe lijn blijven en niet ineens dikker worden als een gebruiker inzoomt. Hetzelfde geldt vaak voor de offset-waardes van een box-shadow. Je wilt dat die schaduw een subtiele, vaste afstand behoudt voor een strak effect.
Als vuistregel: Gebruik
remvoor alles wat moet meegroeien met de gebruiker (typografie, marges, padding, breedtes). Kiespxvoor die details die een vaste, onveranderlijke weergave nodig hebben, zoals die flinterdunne randjes.
Wat is het verschil tussen rem en em?
Dit is een klassieke bron van verwarring, en terecht. Beide zijn relatieve eenheden, maar het verschil is cruciaal voor een voorspelbaar design dat niet ontaardt in een chaos.
rem(root em): Deze eenheid is altijd relatief aan defont-sizevan het<html>-element, oftewel de ‘root’ van je document. Simpel, betrouwbaar en superconsistent door je hele website heen.em: Deze eenheid kijkt naar defont-sizevan zijn directe bovenliggende (parent) element. Als je elementen in elkaar nest, kan dit een onbeheersbaar domino-effect veroorzaken, waarbij lettergroottes onbedoeld steeds groter of kleiner worden. Geloof me, dat wil je niet.
Voor de algemene opmaak van je site, zoals typografie en spacing, is rem daarom bijna altijd de veiligere en meer voorspelbare keuze.
Heeft het gebruik van rem invloed op mijn SEO?
Jazeker, en het is een positieve invloed. Indirect, maar wel belangrijk. Door de pixels to rem methode goed toe te passen, maak je je website aanzienlijk toegankelijker en gebruiksvriendelijker. Je bedient iedereen beter, inclusief de ~20% van de gebruikers die hun standaard lettergrootte aanpassen.
Zoekmachines zoals Google hechten steeds meer waarde aan een goede gebruikerservaring (UX) als rankingfactor. Een toegankelijke, gebruiksvriendelijke site wordt gezien als kwalitatief hoogstaander, en dat kan absoluut bijdragen aan een betere zichtbaarheid in de zoekresultaten.
Bij IFago bouwen we websites en webshops die niet alleen visueel sterk zijn, maar ook technisch uitmuntend en volledig toegankelijk. Wil je een online aanwezigheid die klaar is voor de toekomst en voor elke bezoeker werkt? Neem contact op voor een vrijblijvend gesprek via https://ifago.nl.