Leesbaarheid van tekst

Dit jaar zal enorm gestreden worden om marktleider te worden van digitale boeken. Verschillende partijen bieden al digitale boeklezers aan. Amazon is een dominante speler met de Kindle, bol.com promoot de Sony Reader en Apple komt met de iPad. De eBook moet het gedrukte boek vervangen.

Alleen is het nog niet zo ver. Het is helemaal niet fijn om boeken van een modern beeldscherm te lezen. Schermen lichten op en als je leest is het alsof je naar de heldere hemel staart. De Amazon Kindle en Sony Reader gebruiken daarom ‘inkt-schermen’ die zelf geen licht produceren maar licht weerkaatsen. Indirect licht is een enorme verbetering ten opzichte van de normale beeld­schermen maar ook aan inkt-schermen kleeft het nadeel dat de resolutie ervan (180dpi) nog veel te laag is. En bovendien reageren ze niet zo fijn als een papieren boek. De eBook readers hebben een lange weg te gaan. Het mooie van deze strijd is dat de leesbaarheid veel aandacht krijgt.

Leesbaarheid is een belangrijk onderdeel van usability en bepaalt het succes van een product. Goede leesbaarheid nodigt mensen uit om te lezen. Helaas doen de huidige webontwerpers maar weinig aan de tekort­komingen van beeld­schermen. Zelfs al met eenvoudige middelen zijn teksten op websites veel leesbaarder te maken.

Kies één variatie per stijl

Om koppen, quotes of belangrijke onderwerpen aan te geven gebruik je een variatie uit een lettertypefamilie. Je zet de tekst in bold of italic, je gebruikt capitalen of maakt letters groter. Elke aanpassing zorgt ervoor dat een stijl opvalt in de stijl van de omgeving. Maar nadat iemand de kop heeft gezien en de inhoud leest, is de kop niet meer belangrijk en richt je je als ontwerper en als lezer alleen nog maar op volle tekst. De koppen mogen dan niet meer afleiden. Vermijd daarom dubbele aanpassingen zoals een groter lettertype en tegelijker­tijd bold voor een koptekst. Een grote koptekst zonder bold is veel rustiger. Vermijd bold eigenlijk altijd met oudere lettertypes. Een letter­type is oorspronkelijk in ‘roman’ ontworpen en bold heeft de neiging om het oorspronkelijke ontwerp te verminken. Bold zorgt ervoor dat je gemakkelijk een tekst kan scannen maar leidt af van het verhaal, van de boodschap die je wilt overbrengen. Houd daarom de verschillen tussen stijlen binnen je website of document zo klein mogelijk en wees zuinig met variaties.

Kies 66 karakters als regellengte

Een regellente van 45 tot 75 karakters ervaren lezers als prettig. Een regellengte van 66 karakters, inclusief spaties, is optimaal. De ogen leggen dan een prettige afstand naar het begin van de volgende regel af en hoeven dit niet te vaak te doen. Het aantal karakters per regel vind je door de tekst te kopiëren en te tellen met bijvoorbeeld het online tel programma van Javascript Kit. Daarna deel je het resultaat door het aantal regels.

Lijn tekst naar links uit

Een regellengte van 66 karakters is vrij kort en zodra je de tekst uitvult, wordt de afstand tussen woorden te groot. Je moet dan met je ogen vaak flinke sprongen maken om de tekst te kunnen blijven lezen. Geavanceerde opmaak programmatuur kan veel beter met uitgevulde tekst omgaan, omdat het goed weet wanneer en waar je het best woorden kan afbreken en wat de maximale en minimale spatielengte dan moet zijn. Op websites moet je woorden niet afbreken omdat zoekmachines ze daardoor verkeerd indexeren. Dus lijn je tekst naar links uit.

Kies sans-serif lettertype

Zodra je een lettertype onder het vergrootglas legt zie je hoe alle details, bijvoorbeeld de serifs, de leesbaarheid van een tekst vergroten. Serifs zijn extra details aan het eind van de basislijnen van een lettertype en zorgen voor een optische lijn waar de tekstregel op rust. De tekst leidt je ogen in de goede richting en zorgt dus voor een betere horizontale flow. Een hoge resolutie is essentieel om deze verfijnde lettertypes tot hun recht te laten komen. Beeldschermen kunnen dat nog niet aan en kies daarom op je webpagina voor strakke lettertypes zonder serifs.

Een uitzondering is het lettertype Georgia. Dit is een serif-lettertype dat speciaal is ontworpen voor het beeldscherm. Als extra zijn in dit lettertype tekstuele cijfers opgenomen. Textuele cijfers maken het lezen van lange teksten met cijfers een stuk prettiger. Palatino (serif) is tevens een uitzondering en ook zeer geschikt voor het web.

Kies royale regelafstand

Om de horizontale flow met een sans-serif lettertype te versterken kan je het best meer regelafstand kiezen. Een optimale regelafstand is er niet en verschilt per lettertype en grootte. Ik adviseer daarom om met de regelafstand voldoende te spelen tot je er helemaal tevreden mee bent.

Kies lettertype met grote x‑hoogte

De x-hoogte is de hoogte van de niet uitreikende kleine letters, bijvoorbeeld de a, e, m, o, w of x. Hoe hoger of groter deze letters hoe meer informatie ze weergeven voor de lezer en hoe gemakkelijker de bezoeker je tekst leest. Dit is essentieel bij lage resoluties zoals bij schermen. Lucida Grande en Verdana hebben alle twee een grote x-hoogte en zijn onder andere daarom zo goed op het beeldscherm te lezen.

Gebruik 14–16 pixel grootte

Voor boeken is kleiner prima maar niet voor het web. Kies 14, 15 of 16 pixels als lettertypegrootte voor lange teksten op je website.

Vermijd orphans

Een orphan is een woord dat afgezonderd staat van de rest van een zin op een andere regel. Het gaat dus altijd om het eerste of laatste woord van een zin. Orphans lezen is onplezierig. De samenhang van een woord met de zin neemt sterk af. Je lost dit op door een non-breaking-space te gebruiken na het eerste of voor het laatste woord van een zin. In HTML is dat  , in MS Word op MS Windows ctrl + shift + spacebar en op de Mac kan dat met de toetscombinatie alt + spacebar.

Wil je je verder verdiepen in typografie dan raad ik je het boek The Elements of Typographic Style van Robert Bringhurst aan.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.