Schaalbare fonts

Zorg ervoor dat de fontgrootte in de website schaalbaar is. De site wordt er toegankelijker door, omdat de site dan leesbaar wordt voor een grotere groep mensen. Er zijn ook gebruikers die een andere standaard fontgrootte hebben ingesteld in hun browser.

De fontgrootte is het formaat van de letters. Dit is schaalbaar te maken door het formaat van een font in de stylesheet te definiëren met een relatieve waarde em in plaats van pixels (px). Een stylesheet is een bestand waarin alle stijlregels gedefinieerd worden. Pixels hebben een absolute waarde en zijn onveranderlijk , terwijl een grootte in em relatief is aan de waarde van het hoofdelement. De fontgrootte wordt gebaseerd op de letter “M”.

Stel dat de waarde van een hoofdelement overeenkomt met de standaard fontgrootte van een browser. Die is in de meeste gevallen 16px. Dan geldt 1em = 16px. 1em is dus gelijk aan 100%. Als de gebruiker de fontgrootte aanpast in zijn browser naar bijvoorbeeld 12px, dan is 1em ook 12px. 0.75em is in dat geval dus 8px. Met andere woorden, een website die de fontgrootte definieert met een waarde em zorgt ervoor dat de fontgrootte schaalbaar is voor de gebruiker. De site wordt toegankelijker en dit is weer een voordeel ten opzichte van veel andere websites.

Voorbeeld van een schuif om de fontgrootte aan te passen