Er zijn meerdere manieren om de grootte van een lettertype te bepalen. Webdevelopers en vormgevers kunnen bijvoorbeeld kiezen uit pixels, EM en REM. De meest gebruikte variant, pixels, is ook de minst digitaal toegankelijke manier van het bepalen de grootte van lettertypes.
In dit artikel bespreken we de meest toegankelijke manier voor het bepalen van de lettergrootte. Maar we beginnen met uit te leggen wat pixels precies zijn.
Wat zijn pixels precies?
Om te begrijpen waarom het gebruik van pixels wordt afgeraden, moeten we eerst kijken naar wat pixels precies zijn. Met een pixel (afgekort als: px) wordt geen fysieke pixel op het scherm bedoeld, maar een CSS-pixel. De grootte van een pixel hangt af van de grootte van het display waar die op getoond wordt. Neem bijvoorbeeld de verschillen tussen een grote monitor, een laptop of mobiel apparaat.
Dit is eenvoudig toe te lichten door inzoomen als voorbeeld te gebruiken. Als een gebruiker inzoomt, wordt een element groter weergegeven op het scherm. Het neemt dus meer fysieke pixels in beslag, terwijl de breedte van het element in CSS-pixels gelijk blijft.
Ontwerpers werken dan ook vaak met pixels. Het is eenvoudig om afmetingen of ontwerpen direct vanuit Photoshop, Indesign of een ander programma direct in de praktijk te bouwen.
Waarom wordt stylen in pixels afgeraden?
Waarom het gebruik van pixels voor het definiëren van (onder andere) de grootte van lettertypes niet goed is voor de toegankelijkheid van een website, is omdat het gebruik van pixels niet de gebruiksvriendelijkheid centraal heeft staan.
Dit komt doordat door het gebruik van absolute eenheden, zoals pixels of centimeters, niet goed kunnen meeschalen wanneer een websitegebruiker content vergroot. Voorbeelden hiervan zijn lettertypen, tabellen en de algemene lay-out. We raden daarom af om pixels te gebruiken voor het definiëren van breedte, hoogte, lettergrootte, ‘margin’ en ‘padding’.
Wanneer er andere eenheden worden gebruikt, kunnen gebruikers de lay-out van een pagina makkelijker aanpassen naar hun eigen voorkeuren.
Toegankelijk alternatief voor pixels
Een toegankelijke vormgever of webbouwer vermijdt dus het gebruik van pixels als eenheid. Maar welke eenheid biedt er dan een betere uitkomst? Hieronder lichten we het toegankelijke alternatief voor pixels als meeteenheid toe.
EM: relatieve grootte
Het internet staat vol broodjeaapverhalen. Zo is er op diverse websites te lezen dat de eenheid EM deze naam heeft verkregen omdat het net zo breed is als de hoofdletter M. Dit is (helaas) niet waar.
De grootte van EM is afhankelijk van de grootte die gespecificeerd is in het huidige lettertype. Als deze 16px is, geldt dat 1 EM net zo groot is als 16px. Omdat EM dus afhankelijk is van de lettergrootte, kun je er gemakkelijk responsive mee stylen.
Zo kan de grootte van titels bijvoorbeeld vast worden gesteld op twee EM, waardoor deze twee keer zo groot zijn als de lopende tekst. Hierdoor blijft de verhouding onafhankelijk van de zoom gelijk, waardoor de gebruiker meer controle heeft over persoonlijke lay-out-voorkeuren.
Dit werkt het beste wanneer alles via EM geschaald wordt. Definieer dus ook de maximale breedte, padding en marges in EM. Hierdoor schaalt de gehele lay-out op dezelfde manier mee wanneer de gebruiker inzoomt.
Uitzondering voor afbeeldingen en video’s
Er geldt een uitzondering voor het definiëren van de grootte van afbeeldingen. De breedte en hoogte van deze elementen wordt wél via pixels bepaald, maar op een andere manier. Deze wordt namelijk via HTML-code vastgesteld, niet via CSS.
Voor het responsive stylen van afbeeldingen en video’s worden dus wél absolute eenheden gebruikt; pixels dus.
Meer lezen over toegankelijk CSS
Voor optimale gebruikservaring en dus optimale toegankelijkheid, verkies je EM boven pixels als meeteenheid. Maar waarom wordt dit aangeraden voor digitale toegankelijkheid? Dit heeft vooral te maken met het kunnen vergroten van tekst voor het verbeteren van de leesbaarheid.
Wil je hier meer over lezen? verdiep je dan in WCAG criterium 1.4.4 (formaat wijzigen), 1.4.5 (afbeeldingen van tekst), 1.4.8 (visuele presentatie) of lees ons artikel over toegankelijk CSS-gebruik.