Verbinding mislukt. Probeer het opnieuw.

Naar inhoud springen
SEO Tools
Help en documentatie
UX / UI Lage impact Gemiddeld 30–60 minuten

Relatieve lettertype-eenheden (rem/em versus px)

Geef de voorkeur aan rem/em boven vaste px voor lettergroottes.

Wat het is

De lettergrootte kan vast in px worden opgegeven, of relatief in rem/em. Rem is gebaseerd op de basisgrootte van het document en reageert dus op de lettertypegrootte-instelling van de browser van de gebruiker.

Waarom het belangrijk is

Probleem opgelost dat px het negeert wanneer een gebruiker de standaardlettergrootte in de browser vergroot (vaak bij mensen met een zwakker gezichtsvermogen). Rem/em respecteert deze instelling: ze zijn toegankelijker en gemakkelijker consistent te schalen.

Hoe je het doet

  1. 1Stel de basisgrootte in op <html> (meestal 100% = 16px).
  2. 2Geef lettergroottes op in rem (bijvoorbeeld 1rem, 1.25rem, 0.875rem).
  3. 3Gebruik em waar de maat afkomstig moet zijn van de ouder.
  4. 4Laat alleen een vaste px staan ​​voor details waarbij schalen geen zin heeft (bijvoorbeeld 1px-lijnen).

Voorbeeld

Fout
h1 { font-size: 32px; }
p { font-size: 14px; }
Goed
html { font-size: 100%; }
h1 { font-size: 2rem; }
p { font-size: 0.95rem; }

Conclusie

Relatieve eenheden zijn beter toegankelijk en onderhoudbaar. Het is geen ramp zoals geblokkeerde zoom, maar op een nieuwe site loont het om het vanaf het begin meteen met rem te doen. Het respecteert gebruikers die hun lettergrootte vergroten.

Gerelateerde onderwerpen