px of rem documentatie

[Robbert]

Naar aanleiding van een verzoek op Slack: https://codefornl.slack.com/archives/C01DAT4TRPF/p1736253671663259

Voor toegankelijkheid is het belangrijk dat mensen hun browser kunnen instellen op een groter default lettertype.

Je moet een aantal dingen doen, uit mijn hoofd zijn dat bijvoorbeeld de volgende aspecten:

• Zorg dat font-size een relatieve waarde is ten opzichte van de user preference font size. Wanneer de gebruiker een grotere font wil, dan moeten al jouw fonts ook relatief zijn ingesteld.
• Gebruik voor in de CSS voor componenten een font-size met rem of em, geen px.
• Gebruik bij voorkeur geen font-size voor de :root of html selector.
• Wanneer je voor makkelijker hoofdrekenen toch graag wilt instellen dat 1rem standaard even groot is als 10px, gebruik dan :root { font-size: 62.5%; }. Gebruik alleen een percentage, nooit een andere CSS unit.

Documentatie over dit onderwerp moet op NL Design System terecht komen, en vindbaar zijn op de plekken waar bezoekers het verwachten. Mogelijk plekken:

• https://nldesignsystem.nl/richtlijnen/stijl/typografie/ - bij de informatie over het kiezen van typografie
• https://nldesignsystem.nl/wcag/1.4.4/ - een gerelateerde WCAG succescriterium
• bij de acceptatiecriteria-uitleg die horen bij de relevante WCAG succescriteria

[Robbert]

Betekent dit dat je design tokens ook in rem moet instellen? Niet per se!

px is meer platformonafhankelijk dan rem. rem werkt goed voor het Web Platform, maar iOS en Android werken niet met rem.

Het belangrijkste is dat de waardes die je in CSS gebruikt rem zijn, en het is daarom handig om px voor font-size tokens automatisch te converteren naar rem. Dat kan met een plugin voor Style Dictionary. Op die manier heb je het beste van beide werelden: brede inzetbaarheid van de design tokens, en toegankelijke CSS.