Pixels om te onthouden
Converteer pixelwaarden naar rem voor moderne CSS-lay-outs. rem schaalt mee met de hoofdlettergrootte van de gebruiker - beter voor toegankelijkheid dan vaste px. De standaard browserroot is vaak 16 px, dus 24 px = 1,5 rem tenzij het project html { font-size } overschrijft.
Pixels
Lettergrootte van root (px)
Resultaat
1rem
Zo zet je px om naar rem
1. Voer de pixelwaarde van je ontwerp in (bijvoorbeeld 32 px).
2. Stel de hoofdlettergrootte in (standaard 16 px indien ongewijzigd).
3. Kopieer het remresultaat naar je stylesheet.
4. Gebruik rem voor lettergroottes, spatiëring en componentschaal; px voor haarlijnranden, indien nodig.
Px om voorbeelden te onthouden
Lichaams- en koptype
16 px = 1 rem (standaard). 24 px = 1,5 rem kop. 14 px = 0,875 rem kleine tekst.
Aangepaste root 10 px (ontwerpsystemen)
Sommige teams stellen html {font-size: 62,5% } zo in dat 1 rem = 10 px. Dan 32 px ontwerptoken = 3,2 rem.
Afstandsschaal
8 px raster → 0,5 rem bij 16 px root. 16 px opvulling = 1 rem; consistent ritme in Tailwind-achtige toonladders.
Wanneer gebruik je deze tool
• Wanneer je Figma-specificaties implementeert in responsieve CSS met toegankelijke zoom.
• Wanneer je uitlijnt met ontwerpsysteemtokens die zijn gedefinieerd in rem.
• Wanneer gebruikers de standaardlettergrootte van de browser overschrijven, passen rem-lay-outs zich aan.
Wanneer kies je iets anders
• Als je em nodig hebt ten opzichte van een genest componentlettertype, gebruik dan pixels voor em.
• Wanneer je viewport-eenheden (vw/vh) nodig heeft voor lay-outs op volledig scherm.
• Wanneer je 1:1 apparaatpixels op retina-randen matcht, blijven 1 px-randen vaak in px.
rem versus em in component CSS
em-samenstellingen binnen geneste elementen met verschillende lettergroottes; de opvulling in em groeit mee met de lokale tekst. rem blijft gebonden aan de root, waardoor een voorspelbare afstand tussen componenten ontstaat. Veel teams gebruiken rem voor de lay-outschaal en em alleen voor de letterafstand of micro-aanpassingen die verband houden met het lokale type.
Ontwerpoverdrachtworkflow
Ontwerpers exporteren px uit Figma; ontwikkelaars delen op basis van overeengekomen root (document in README). Wanneer het project een truc van 62,5% gebruikt, moet je dit bevestigen voordat je tot conversie overgaat. Door aannames te combineren wordt de gebruikersinterface verdubbeld of gehalveerd.
Veelgestelde vragen
Wat is rem?
rem = "root em". 1 rem is gelijk aan de lettergrootte van het html-element, niet aan het bovenliggende element.
Waarom gebruik je px niet overal?
Vaste px negeert lettertypevoorkeuren van gebruikers. rem respecteert rootschaling voor toegankelijkheid (WCAG).
Standaard hoofdlettergrootte?
De meeste browsers gebruiken standaard 16 px op HTML. Gebruikers kunnen dit wijzigen in de instellingen.
Formule?
rem = px ÷ rootFontSizePx. Voorbeeld: 20 px 16 = 1,25 rem.
Werkt rem voor marges en opvulling?
Ja — rem is van toepassing op elke eigenschap van CSS lengte, niet alleen op de lettergrootte.
Worden gegevens geüpload?
Nee. De conversie werkt lokaal.