PX naar REM omrekenen

Zo reken je px om naar rem

1. Stel de Basislettergrootte (px) in. Die is 16 in elke grote browser, tenzij je stylesheet haar wijzigt. Met de knoppen onder het veld kies je 16 px, 10 px (de truc html { font-size: 62.5%; }) of 18 px.
2. Werk je met em, stel dan de Lettergrootte van de ouder voor em (px) in: de berekende lettergrootte van het element dat het element bevat dat je opmaakt.
3. Typ onder Een waarde omrekenen in Pixels (px), REM of EM. De twee andere velden worden bijgewerkt terwijl je typt, en de regel eronder toont de gebruikte deling.
4. De Omrekentabel toont gangbare groottes. Vervang de Pixelwaarden door je eigen design tokens (schaal voor witruimte, typografische schaal…) en gebruik Tabel kopiëren om het resultaat in een spreadsheet of ontwerpdocument te plakken.
5. Wil je bestaande code omzetten, plak die dan in Om te zetten CSS, kies de opties en klik op px omzetten naar rem. Voorbeeld laden toont een kleine stylesheet. Kopieer de Omgezette CSS met Kopiëren.

De formules

• rem = px ÷ basislettergrootte. Met de standaard van 16 px is 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ lettergrootte van de ouder. In een kop van 20 px is 10px = 0,5em.
• px = rem × basislettergrootte, en px = em × lettergrootte van de ouder.

In de CSS-code zelf blijft de punt het decimaalteken: 1.5rem, niet 1,5rem.

rem of em: welke gebruik je?

rem (“root em”) verwijst altijd naar de lettergrootte van het html-element, dus 1.5rem betekent overal op de pagina hetzelfde. Het is de veiligste keuze voor lettergroottes, witruimte, maximale breedtes en tussenruimtes in de lay-out.

em verwijst naar de lettergrootte van het element zelf (bij font-size naar die van de ouder). Het stapelt zich op: een lijst op 0,9em die drie keer genest is, komt uit op 0,9 × 0,9 × 0,9 = 73% van de basis. Daardoor is em handig voor dingen die met hun eigen tekst moeten meeschalen (de padding van een knop, de grootte van een icoon naast een label) en riskant voor de algemene typografie.

Waarom rem belangrijk is voor toegankelijkheid

Veel mensen verhogen de standaardlettergrootte in de instellingen van hun browser (bijvoorbeeld van 16 naar 20 of 24 px) in plaats van op elke pagina in te zoomen. Groottes in px negeren die voorkeur; groottes in rem of em volgen haar. Gebruik je rem voor tekst en witruimte, dan groeit de hele lay-out mee met de keuze van de lezer. Dat helpt bij WCAG 2.2-succescriterium 1.4.4 (tekst vergroten tot 200%).

Om dezelfde reden zet je html { font-size: 16px; } beter niet in px: gebruik een percentage (100%, of 62.5% als je 1rem = 10px wilt), zodat de instelling van de gebruiker blijft gelden.

Wat de CSS-omzetter verandert

Hij vervangt getallen met px erachter in declaraties door de waarde gedeeld door de basislettergrootte. Commentaar, strings en url()-waarden blijven altijd ongemoeid.

• Breedtes van border en outline in px houden: border, border-*-width, outline, outline-offset en column-rule blijven in px, zodat dunne lijnen scherp blijven. border-radius wordt wel omgezet.
• Waarden van 1px houden: elke waarde tussen −1px en 1px blijft zoals ze is.
• Media queries omzetten naar em (basis 16px): in @media-voorwaarden verwijzen rem en em altijd naar de oorspronkelijke lettergrootte van de browser, nooit naar je html-regel. De tool deelt daar dus door 16 en schrijft em, wat je basisgrootte ook is. Staat de optie uit, dan houden media queries hun px.