Zes praktische tips voor de leesbaarheid van webteksten

1. Kies een goed leesbaar font

In zowel 'Sans Serif' als 'Serif fonts' zijn goed leesbare font te vinden voor elk device en schermformaat. Een greep uit de beste leesbare fonts zijn: 

• Georgia 
• Helvetica 
• Open sans 
• Roboto 
• Montserrat 
• Lato 

2. Gebruik de juiste grootte

Het formaat van het font verschilt vaak per fonttype waardoor het lastig is om een “aangeraden font-size” te bepalen. Test het font op verschillende schermen en devices om er zeker van te zijn dat de tekst goed leesbaar blijft. Over het algemeen wordt er vaak aangeraden om een font-size niet kleiner dan 16px te kiezen. 

3. Let op de line-height van de tekst

De line-height is de hoogte van de tekstregels en zorgt ervoor dat de regels ruimte krijgen en voorkomt dat de tekst gekropt raakt. Ook hierbij geldt: experimenteer met verschillende fonts en formaten. Gemiddeld is een line-height van 140% aan te raden. 

4. Content breedte

Te vaak zien we nog lappen tekst in uitgespreide zinnen over de gehele breedte van het scherm. Dit verwart het oog van de gebruiker en maakt het moeilijk regels aan te houden. De gouden regel hierin is om per regel tussen de 70-80 karakters te gebruiken. Maak een concept en test hierin hoe breed de tekst-width van jouw font moet zijn om aan deze regel te voldoen. Vaak zit dit tussen de 600 en 700 pixels. 

5. Uitlijning

In vrijwel alle gevallen lezen bezoekers van boven naar beneden en van links naar rechts. Door de tekst naar links uit te lijnen verbetert de leesbaarheid. Een consistente rand aan de linkerkant geeft de lezer een constant punt om op terug te vallen, na het voltooien van een zin. Wanneer er toch gekozen wordt voor een centraal uitgelijnde tekst (bijvoorbeeld om op te vallen tussen de rest van de tekst of al toelichting bij een CTA) houdt deze tekst dan kort en bondig. 

6. Maak de tekst goed scanbaar

“Mensen lezen niet” is een veel voorkomende quote, en over het algemeen klopt dit. De meeste mensen scannen pagina’s in een F-patroon op zoek naar de content die voor hun van belang kan zijn. Zorg er dus voor dat de content op de pagina hierop is geoptimaliseerd: 

• Gebruik duidelijke en verklarende koppen voor tekstblokken 
• Knip teksten op in korte secties 
• Gebruik witruimtes om tekstblokken van elkaar te onderscheiden 

Om bij dit formaat de juist heading size te selecteren is het aan te raden hier de volgende regel op toe te passen: 

• Heading: 2x 
• Heading van de heading: 3x
• Een wat dramatischere heading: 4x 

Kort samengevat:

• Kies een goed leesbaar font van minimaal 16px grote en 140% line height 
• Maak onderscheid tussen bodytekst en koppen: Heading: 2x Heading van heading: 3x 
• Gebruik een links uitgelijnde tekst met een  text-width van tussen de 70 – 80 karakters per regel (+- 600 – 700px) 
• Gebruik korte tekstblokken met verklarende koppen en gebruikt witruimtes om verschil te maken tussen verschillende secties.
• Bonus tip: Gebruik de Golden Ratio typography (GRT) calculator(externe link) als hulp om jouw tekst formaten te berekenen