Waarom is de keuze voor pixels, em of rem belangrijk?
Niet iedereen leest tekst op een scherm even makkelijk. Daarom passen veel mensen, zoals ouderen of mensen die slechtziend zijn, de instellingen van hun browser aan. Ze maken de tekst bijvoorbeeld standaard wat groter. Als jij een website bouwt, moet je kiezen hoe je de grootte van teksten en vakken instelt. Die keuze bepaalt of de website netjes met de bezoeker meegroeit, of juist breekt en onleesbaar wordt.
De drie eenheden simpel uitgelegd
Om te snappen welke je het beste kunt gebruiken, leggen we ze kort uit.
1. Pixels (px): een vast formaat
Een pixel is een vaste maat. Een tekst van 16 pixels blijft altijd 16 pixels, wat er ook gebeurt.
- Hoe het werkt: Je typt in de code
16px. De browser toont de tekst altijd op precies dat formaat. - Het probleem: Het luistert niet naar de bezoeker. Als een bezoeker zijn browser instelt op grote letters (bijvoorbeeld
24px), houdt jouw website dat tegen. De tekst blijft gewoon klein (16px). Dit is erg onvriendelijk voor bezoekers die grote letters nodig hebben.
2. Em (em): past zich aan, maar kan onoverzichtelijk worden
De maat em is een meegroeiende maat. Het kijkt altijd naar het stukje code waar het direct in staat.
- Hoe het werkt: Een
emneemt de grootte over van het onderdeel (het ‘ouder-element’) eromheen. - De kracht: Het is erg handig voor kleine dingen. Als je de ruimte rondom een knop instelt in
em, groeit de knop mooi mee als de tekst in de knop groter wordt. - Het probleem: Als je je hele website in
embouwt, gaan de maten zich steeds met elkaar vermenigvuldigen. Voor je het weet klopt er niks meer van en wordt een tekst per ongeluk gigantisch of onleesbaar klein.
3. Rem (root-em): de beste keuze voor toegankelijkheid
De rem is net als de em een meegroeiende eenheid, maar dan zónder de rekenfouten.
- Hoe het werkt: Een
remkijkt maar naar één ding: de standaardinstelling van de bezoeker in zijn browser. - De kracht: Als de bezoeker tekst graag op 24 pixels leest, dan wordt
1remin jouw code automatisch ook 24 pixels. Alles wat je inrembouwt, groeit precies in de juiste verhouding mee. Zo blijft de website voor iedereen mooi en leesbaar.
Overzicht: px vs. em vs. rem
Hieronder zie je in één oogopslag de verschillen en wanneer je wat moet gebruiken.
| Eenheid | Soort maat | Baseert grootte op… | Luistert naar bezoeker? | Kans op opmaakfouten | Waarvoor gebruik je het? |
|---|---|---|---|---|---|
| px (pixel) | Vast | Vast getal | Nee | Laag | Dunne, decoratieve randjes en lijnen. |
| em (em) | Meegroeiend | Onderdeel eromheen | Ja (indirect) | Hoog (bij grote stukken code) | Ruimte binnenin knoppen en rondom iconen. |
| rem (root-em) | Meegroeiend | Instelling van de bezoeker | Ja (direct en foutloos) | Geen | Bijna alles (teksten, lay-out, witruimte). |
Wat zeggen de wet en de WCAG-richtlijnen?
Digitale toegankelijkheid is tegenwoordig vaak wettelijk verplicht (denk aan de European Accessibility Act en de WCAG-richtlijnen). Een belangrijke regel (WCAG-eis 1.4.4) is dat bezoekers teksten tot wel 200% moeten kunnen vergroten, zónder dat de website stuk gaat.
- Gebruik je pixels? Dan zak je snel voor deze test. De tekst groeit namelijk niet vanzelf mee, tenzij de bezoeker de héle pagina inzoomt (en dat leest heel vervelend).
- Gebruik je rem? Dan past je website zich soepel aan. Tijdens een technisch toegankelijkheidsonderzoek zien we dit graag terug.
Mag je dan nooit meer pixels gebruiken?
Jawel hoor. Voor een paar specifieke dingen is de pixel nog steeds de beste keuze:
- Sierlijntjes: Een heel dun scheidingslijntje (1px) hoeft niet per se mee te groeien als de letters groter worden. Dat leidt alleen maar af.
- Ingewikkelde grafieken: Soms moeten technische onderdelen een heel strak, vast formaat hebben om niet wazig te worden.
- Nieuwsbrieven (e-mail): Programma’s zoals Microsoft Outlook lopen vaak erg achter op moderne websites. In e-mails werkt
remdaardoor vaak niet goed. Daar gebruik je nog wel pixels om te zorgen dat de mail leesbaar blijft.
Kort samengevat
Wil je een toegankelijke website bouwen die voldoet aan de richtlijnen? Stop dan met het gebruik van vaste pixels voor teksten en de algemene indeling.
- Gebruik rem voor al je teksten, witruimtes en de indeling van je webpagina’s.
- Gebruik em alleen voor kleine onderdelen, zoals knoppen.
- Gebruik pixels alleen nog maar voor dunne, decoratieve randjes.
Als je dit doet, maak je een website die zich aanpast aan de bezoeker, in plaats van andersom. En dat is precies de bedoeling van digitale toegankelijkheid.