Softonic

EM naar REM-converter

Stap 1 / 2 rem
Resultaten

Een ontwerper stuurt je Figma-specificaties in pixels, de codebasis gebruikt rem, en de helft van de componenten is met em gebouwd op plekken waar de waarde meeverandert met de lettergrootte van het bovenliggende element. Deze converter berekent de px- en rem-equivalenten van elke em-waarde bij elke rootlettergrootte, zodat je het juiste getal zo in het CSS-bestand kunt plakken zonder het telkens uit je hoofd te herrekenen.

Zo reken je em, rem en pixels om

  1. 1

    Stel de basislettergrootte in

    Meestal 16px, de standaardwaarde van de browser. Sommige ontwerpsystemen gebruiken 14px of 18px als root.

  2. 2

    Stel voor em de lettergrootte van het bovenliggende element in

    em is relatief ten opzichte van het bovenliggende element. Als het bovenliggende element 20px is, staat 1em gelijk aan 20px.

  3. 3

    Voer een waarde in

    In em; de px- en rem-equivalenten worden automatisch bijgewerkt.

  4. 4

    Lees de omrekening af

    De waarden voor px, em en rem worden zowel afgerond als met exacte decimalen weergegeven.

De formules

rem is altijd relatief ten opzichte van het rootelement (<html>):

px = rem * root_font_size rem = px / root_font_size

em is relatief ten opzichte van het bovenliggende element van het huidige element:

px = em * parent_font_size em = px / parent_font_size

Omrekeningen bij een root van 16px

Pixels rem em (bij een bovenliggende van 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Wanneer gebruik je wat

  • px: randen, fijne details, exacte controle. Een box-shadow van 1px, een rand van 1px.
  • rem: marges, padding en typografie die mee moeten schalen met de lettervoorkeur van de gebruiker.
  • em: componentgebonden ruimte die zich aanpast aan de eigen lettergrootte (knoppen, badges).
  • % en vw/vh: relatief ten opzichte van de container en de viewport; dat is een apart onderwerp.

De 62,5%-truc

Sommige codebases stellen html { font-size: 62.5%; } in, waardoor 1rem = 10px. Dat maakt rekenen met rem makkelijk (24px = 2.4rem), maar dat gaat ten koste van de lettergrootte-voorkeur van de browser voor gebruikers die tekst inzoomen. De moderne praktijk vermijdt deze hack; gebruik een root van 16px en accepteer decimalen.

De overervingsval van em

em wordt via de cascade doorgegeven. Als een bovenliggend element een font-size van 1.2em heeft ten opzichte van zijn eigen ouder, en je daarbinnen een padding van 1em zet, dan is de padding 1.2 × 1.2 = 1.44 × root. Geneste em’s stapelen zich vermenigvuldigend op, wat verrassende resultaten kan geven. rem voorkomt dit doordat het altijd wordt berekend ten opzichte van <html>.

Voorbeeld van een typografieschaal

Een veelgebruikte modulaire typeschaal met een verhouding van 1.25:

Niveau rem px (bij root 16)
Bijschrift 0.75 12
Broodtekst 1 16
Broodtekst+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Blikvanger 3.052 ~49

Met rem schaalt elk niveau evenredig mee wanneer een gebruiker de lettergrootte van de browser verhoogt voor betere toegankelijkheid.

Voorkeuren van de gebruiker respecteren

px hard vastleggen door een heel stylesheet heen zit gebruikers in de weg die tekst inzoomen om visuele redenen. rem respecteert die voorkeuren omdat het wordt berekend ten opzichte van de rootgrootte, die de gebruiker kan wijzigen. Dat is de belangrijkste reden waarom stijlgidsen rem aanbevelen voor typografie en witruimte.

Veelgestelde vragen

Gebruik rem voor typografie, witruimte en lay-outafmetingen. Gebruik em voor afmetingen binnen een component die moeten meeschalen met de eigen lettergrootte van de component (knoppen, iconen in tekst). Gebruik px alleen voor fijne details die niet mogen schalen.

Gebruikers kunnen de standaardlettergrootte van hun browser wijzigen. Chrome staat standaard op 16px; als de gebruiker 18px heeft ingesteld, zijn al je rem-waarden 12,5 procent groter. Ontwerpers die uitgaan van een vaste root van 16px missen dit vaak; rem respecteert de keuze van de gebruiker, en dat is nu juist de bedoeling.

De spatiëringsschaal van Tailwind gebruikt rem. text-base is standaard 1rem = 16px, text-lg is 1.125rem. De schaal is consistent en respecteert standaard de rootlettergrootte.

Nee. De getallen die je invoert worden alleen gebruikt om de omrekening te berekenen; er wordt niets opgeslagen.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Tool beschikbaar in andere talen