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.
In 2006 (!) schreven ze op ia.net al – een nu beroemd – artikel over de grootte en leesbaarheid van tekst op websites.
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.
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:
- lettergrootte
- regellengte
- 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.
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.
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.
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.
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:
- kortere regellengte
- grotere letter
Met deze twee aanpassingen is de tekst een stuk leesbaarder geworden.
Verder lezen
16 Pixels: For Body Copy. Anything Less Is A Costly Mistake op Smashing Magazine
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.