Leesbare lettergrootten gebruiken

Deze regel wordt geactiveerd wanneer PageSpeed Insights detecteert dat tekst op de pagina te klein is om leesbaar te zijn.

Overzicht

De grootte van weblettertypen kan worden opgegeven via vier veelvoorkomende eenheden: pixels (px), punten (pt), EM's (em) en percentage (%).

  • Pixels zijn 'CSS-pixels' en variëren op basis van apparaatformaat en dichtheid.
  • Punten worden gedefinieerd in verhouding tot pixels. Eén pixel is 0,75 punten*.
  • EM's en percentage zijn 'relatieve' eenheden: ze staan in verhouding tot de overgenomen grootte en eigenschappen van het lettertype dat wordt gebruikt. 1 EM is gelijk aan 100%.

* Bekijk aanvullende informatie.

Daarnaast is de viewport van invloed op hoe lettertypen worden geschaald op mobiele apparaten. Een pagina zonder correct geconfigureerde viewport wordt verkleind op mobiele apparaten, wat meestal tot gevolg heeft dat de tekst op de pagina te klein is om leesbaar te zijn.

Aanbevelingen

U moet eerst een viewport configureren om ervoor te zorgen dat lettertypen worden geschaald zoals verwacht op verschillende apparaten. Zodra u een viewport heeft geconfigureerd, implementeert u de aanvullende aanbevelingen hieronder.

  1. Gebruik een basislettergrootte van 16 CSS-pixels. Pas de grootte zo nodig aan op basis van de eigenschappen van het lettertype dat wordt gebruikt.
  2. Gebruik grootten die in verhouding staan tot de basisgrootte om de typografische schaal te definiëren.
  3. Tekst heeft verticale ruimte tussen de tekens nodig en moet wellicht worden aangepast voor elk lettertype. De algemene aanbeveling is de standaardregelhoogte voor browsers van 1,2em te gebruiken.
  4. Beperk het aantal gebruikte lettertypen en de typografische schaal, omdat te veel lettertypen en lettergrootten resulteren in rommelige en te complexe pagina-indelingen.

In het volgende CSS-fragment wordt bijvoorbeeld een basislettergrootte van 16 CSS-pixels gedefinieerd, met een CSS-klasse 'small' met een lettergrootte van 75% van de basislettergrootte (12 CSS-pixels), en met een CSS-klasse 'large' met een lettergrootte van 125% van de basislettergrootte (20 CSS-pixels):

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Bekijk de typografische richtlijnen voor Android voor meer aanbevelingen voor lettertypen voor mobiele apparaten.

Aanvullende informatie

Lees de CSS 2.1-specificatie zorgvuldig om te begrijpen hoe lengte-eenheden worden gedefinieerd. De specificatie bevat meer eenheden die hier niet worden vermeld: inch, centimeter, millimeter en pica. Het is gemakkelijk over het hoofd te zien dat een CSS-inch niet altijd gelijk is aan een fysieke inch.

Alle absolute eenheden worden gedefinieerd in verhouding tot elkaar. 1 pixel is 0,75 punten; 1 punt is 1/72e inch; 1 inch is 2,54 centimeter; enzovoort. Het is echter aan het apparaat om te beslissen hoe deze eenheden worden 'verankerd'. Wanneer u bijvoorbeeld op papier afdrukt, wordt 1 inch verankerd op 1 fysieke inch en moeten alle andere eenheden in verhouding staan tot die fysieke inch. Bij weergave op een mobiele telefoon verankeren apparaten de eenheid echter met de zogenaamde 'referentiepixel'. 1 CSS-pixel wordt gedefinieerd op basis van deze referentiepixel en alle andere eenheden (inch, centimeter, enzovoort) worden aangepast ten opzichte van de CSS-pixel. Op een mobiele telefoon wordt 1 CSS-inch daarom gewoonlijk kleiner weergegeven dan 1 echte, fysieke inch.

Daarom raden we u aan uw lettergrootten te definiëren met pixels. Sommige ontwerpers en ontwikkelaars kunnen misleid worden bij het gebruik van inches of punten. Dit zijn fysieke afmetingen die niet noodzakelijkerwijs overeenkomen met de echte grootte. De grootte van een pixel is altijd afhankelijk van het apparaat waarop deze wordt weergegeven.

Ten slotte heeft elk lettertype eigen kenmerken: grootte, spatiëring, enzovoort. De browser geeft elk lettertype standaard weer met 16px (CSS-pixels). Voor de meeste gevallen is dit een prima standaardwaarde, maar voor specifieke lettertypen moet dit wellicht worden aangepast (dat wil zeggen: de standaardgrootte kan kleiner of groter worden gemaakt op basis van de verschillende eigenschappen van het lettertype). Zodra de standaardgrootte is ingesteld, moeten grotere en kleinere lettertypen ten opzichte van de standaardgrootte worden gedefinieerd met behulp van pixels. Deze kunnen vervolgens worden gebruikt om de grootte van de tekst voor primaire, secundaire en andere typen inhoud op de pagina aan te passen.

Sommige mobiele browsers kunnen proberen de lettertypen voor pagina's zonder correct geconfigureerde viewport te schalen. Dit schaalgedrag varieert tussen browsers en u moet niet hierop vertrouwen om leesbare lettertypen op mobiele apparaten weer te geven. PageSpeed Insights geeft de tekst op uw pagina weer zonder browserspecifieke lettertypeschalen toe te passen.