px naar rem omrekenen
px naar rem omrekenen
Met deze px naar rem calculator reken je CSS-eenheden eenvoudig en snel om. Volg deze stappen:
- Kies de richting: van px naar rem of van rem naar px.
- Voer de waarde in die je wilt omrekenen.
- Voer de root font-size in (standaard 16).
- Klik op Omrekenen en bekijk direct het resultaat.
Het omrekenen van px naar rem is nuttig bij webdesign en front-end development, met name bij het schrijven van toegankelijke en schaalbare CSS.
Wanneer kom je px en rem tegen?
- CSS-stylesheets: lettergroottes, marges, padding en andere afmetingen van HTML-elementen worden in CSS opgegeven in een eenheid; px en rem zijn daarbij twee van de meest gebruikte opties.
- Design systems en component libraries: veel moderne front-end frameworks en design systems werken standaard met rem in plaats van px, om consistentie tussen componenten te waarborgen.
- Toegankelijkheid (accessibility): ontwikkelaars die voldoen aan toegankelijkheidsrichtlijnen (zoals WCAG) gebruiken vaak rem voor tekstgroottes, omdat deze eenheid meeschaalt met de tekstgrootte-voorkeur die een gebruiker in de browserinstellingen heeft ingesteld.
- Responsive design: bij het bouwen van een layout die goed werkt op verschillende schermformaten, wordt rem vaak gebruikt om elementen proportioneel te laten meeschalen.
Wat zijn px en rem?
Pixel (px) is in CSS een absolute eenheid: 1 px staat voor een vaste, niet-schalende grootte op het scherm (technisch gezien een CSS-referentiepixel, die niet per se exact overeenkomt met één fysieke schermpixel op elk apparaat). Een element van 16px blijft in principe altijd 16px, ongeacht andere instellingen.
Rem staat voor root em en is een relatieve eenheid, gebaseerd op de font-size van het root-element van de pagina (meestal het <html>-element). Standaard is deze root font-size 16px in de meeste browsers, maar gebruikers kunnen deze waarde in hun browserinstellingen aanpassen (bijvoorbeeld voor betere leesbaarheid). Elementen die in rem zijn opgegeven, schalen automatisch mee met deze instelling; elementen in px doen dat niet.
Wat is het verschil tussen px en rem?
Het verschil zit in schaalbaarheid: px is een vaste, absolute waarde, terwijl rem een relatieve waarde is die is gekoppeld aan de root font-size. Als een gebruiker de standaardtekstgrootte van zijn browser verhoogt (bijvoorbeeld van 16px naar 20px), schalen alle rem-waarden op de pagina automatisch mee, terwijl px-waarden ongewijzigd blijven.
Waarom dit verschil belangrijk is:
Dit maakt rem een belangrijke eenheid voor toegankelijkheid: slechtziende gebruikers die hun browserinstellingen aanpassen om tekst groter weer te geven, profiteren alleen als een website rem (of een andere relatieve eenheid) gebruikt in plaats van vaste px-waarden. Websites die uitsluitend px gebruiken voor tekst, reageren niet op deze gebruikersvoorkeur.
rem versus em: een veelgemaakte verwarring
Naast rem bestaat ook de eenheid em, die eveneens relatief is, maar gebaseerd is op de font-size van het eigen (bovenliggende) element in plaats van het root-element. Dit betekent dat em-waarden bij geneste elementen kunnen “opstapelen” (elk niveau vermenigvuldigt met de eigen font-size), wat onverwachte resultaten kan geven. Rem is hiervoor consistenter, omdat het altijd teruggrijpt op dezelfde, vaste referentie: de root font-size.
Formules px ↔ rem
Px naar rem
Om pixels om te rekenen naar rem:
Rem naar px
Om rem om te rekenen naar pixels:
Veelgestelde vragen over px en rem
Px is een absolute eenheid en rem is een relatieve eenheid, gebaseerd op de root font-size. Rem schaalt mee als een gebruiker zijn browserfontgrootte aanpast; px doet dat niet.
Rem maakt je website beter schaalbaar en toegankelijker, omdat tekst en elementen meeschalen met de tekstgrootte-voorkeur die een gebruiker in zijn browser heeft ingesteld, terwijl px-waarden altijd vast blijven.
De standaard root font-size in de meeste browsers is 16px, tenzij de gebruiker dit zelf heeft aangepast in zijn browserinstellingen, of de website dit via CSS overschrijft.
Ja, rem kan worden gebruikt voor lettergroottes, marges, padding, breedtes en vrijwel elke andere CSS-eigenschap die een lengtewaarde accepteert.
Rem is altijd gebaseerd op de font-size van het root-element van de pagina. Em is gebaseerd op de font-size van het eigen, bovenliggende element, wat bij geneste elementen tot opstapelende, minder voorspelbare waarden kan leiden.
Omrekentabel px naar rem (root font-size = 16)
In deze tabel zie je veelgebruikte omrekeningen van pixels naar rem, uitgaande van de standaard root font-size van 16px.
| Pixels (px) | Rem |
|---|---|
| 8 | 0,5 |
| 16 | 1 |
| 24 | 1,5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
| 96 | 6 |
Deze tabel gaat uit van een root font-size van 16px, de gangbare standaardwaarde in de meeste browsers. Bij een andere root font-size (bijvoorbeeld doordat de gebruiker deze heeft aangepast) verschuiven de bijbehorende rem-waarden.
Gerelateerde calculators
Wil je meer digitale ontwerpeenheden omrekenen? Gebruik dan deze handige calculators:
Betrouwbaarheid van deze px naar rem omrekeningen
De omrekening tussen px en rem is gebaseerd op de officiële CSS-specificatie van het World Wide Web Consortium (W3C), die rem definieert als een lengte-eenheid gelijk aan de berekende font-size van het root-element van het document. De omrekening zelf is een eenvoudige, exacte vermenigvuldiging of deling, zonder afronding, mits de root font-size bekend is.
Gebruikte bronnen en relevante links
-
W3C (World Wide Web Consortium). CSS Values and Units Module – definitie van rem.
Bekijk bron -
MDN Web Docs. CSS values and units.
Bekijk bron
Redactionele controle: R. Teunissen, MSc (2026). Inhoud gecontroleerd op basis van de officiële W3C CSS-specificatie voor de rem-eenheid en gangbare front-end-praktijken rond toegankelijkheid en schaalbaarheid.
Categorie: Pixels