Een betere leesbaarheid van je website

Gepubliceerd op door Wouter van der Zee

Om een artikel of pagina van een website te lezen zit je bijna met je neus op het scherm. Herken je dat? Beetje overdreven misschien, maar tekst op veel websites is erg klein. Wellicht herken je dit niet omdat we het zo gewend zijn met z’n allen. Er zijn namelijk heel veel websites waar de tekst erg klein is. Er zijn drie eenvoudige richtlijnen om de leesbaarheid van websites te verbeteren.

De laatste tijd heb ik bij een aantal projecten erg mijn best moeten doen de lettergrootte in het ontwerp te verdedigen. Die was vaak groter dan men gewend was. Dit artikel is een uitwerking van mijn argumenten daarvoor. Het meeste wat hier staat is niet nieuw. Dat veranderingen tijd kosten blijkt maar weer eens :-).

Wat is de reden dat bij veel website de tekst zo klein is? Waarschijnlijk komt dit omdat beeldschermen vroeger erg klein waren en er niet zoveel ruimte was Zie dit klassiek artikel over tekstgrootte en leesbaarheid van websites.. Maar nu is dat anders, de meeste mensen hebben een voldoende groot beeldscherm. Ik heb het hier over desktop beeldschermen, op tablets en smartphones kom ik straks. Een kleine letter is dus niet meer nodig. Maar waarom dan groter? De leesbaarheid van tekst wordt hoofdzakelijk bepaald door drie factoren:

  1. lettergrootte,
  2. regellengte en
  3. regelafstand.

Verder speelt onze leeftijd mee. Hoe ouder we worden - helaas, zo is het leven - hoe slechter onze ogen. En dan is een grotere leesletter wel zo prettig Zoals uitgelegd in het artikel 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake op Smashing Magazine..

De grootte van de tekst wordt o.a. bepaald door de afstand van de lezer tot het scherm. Bij boeken hebben ze dit lang gelezen uitgezocht en kwamen ze tot een ideale grootte van ca. 12 pts Zie bijvoorbeeld Basic Book Design/Font op Wikibooks.org. Een goed basisboek over typografie en opmaak van tekst is nog altijd Stop Stealing Sheep van Erik Spierkermann.. De afstand tot schermen is over het algemeen groter, de minimale lettergrootte voor schermen is daarmee ca. 16 px (voor het gemak beschouw ik pts en px als evengroot). In de meeste gevallen is 18 px zelfs nog beter. Niet heel toevallig is de standaard lettergrootte in browsers 16 px. Maar niet alle websites maken daar dus gebruik van.

Naast de lettergrootte zijn er nog twee factoren die de leesbaarheid van tekst bepalen: de regellengte en -afstand. Daar kan ik kort over zijn. Hiervoor gelden al heel lang richtlijnen die - wederom - bij veel boeken en magazines worden toegepast. De ideale regelafstand is 10 tot 15 woorden (per regel dus) of 45 tot 75 karakters (komt ongeveer op hetzelfde neer). De richtlijn voor de optimale regelafstand is 1,4 keer de lettergrootte 5.

Daarmee hebben we dus de volgende drie richtlijnen voor een goede leesbaarheid van je website:

  • lettergrootte: 16px of groter
  • regellengte: 45 tot 75 karakters
  • regelafstand: 1.4 keer de lettergrootte

Deze richtlijnen gelden voor computer beeldschermen, maar ook voor die andere apparaten waarmee we websites bezoeken, zoals smartphone en tablets. Omdat de ideale lettergrootte bepaald wordt door de afstand tussen jouw ogen en het scherm, is een kleinere letter voor smartphone beter. De afstand tussen dit scherm en je ogen is over het algemeen kleiner. Daarom kun je voor weergave van websites op smartphones beter een kleinere letter gebruiken. Gelukkig kan dit prima met technieken zoals Responsive Design Lees meer over Responsive Design en het optimaliseren van je website voor mobiel.. De leesafstand van tablets is ongeveer gelijk met die van boeken en tijdschriften. De lettergrootte zal dan iets groter zijn dan bij weergave op je telefoon en iets kleiner dan bij weergave op je computer.

Hieronder een voorbeeld van een website dat niet goed leesbaar is: lange zinnen en bovendien kleine letters. Dit is vrij eenvoudig op te lossen, waarbij je de website zelf niet hoeft aan te passen. Rechts de verbeterde versie. De regellengte is korter gemaakt en de letters groter. Met deze twee aanpassingen is de tekst een stuk leesbaarder geworden.

Voorbeeld leesbaarheid website
Links het origineel, rechts de verbeterde versie.

Een betere leesbaarheid van je website is dus helemaal niet zo ingewikkeld. Als we ons aan deze drie richtlijnen houden, dan maken we de gebruikers van onze websites een stuk blijer.