Website, onlinedienstverlening, optimalisatie

Wanneer een bezoeker de keuze maakt om actief op zoek te gaan naar meer informatie, is het belangrijk dat deze gemakkelijk vindbaar is. Om hiervoor te zorgen moet de leesbaarheid van de tekst zo goed mogelijk zijn. In deze blog geeft onze UX-designer Timo je zes praktische tips!

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 als hulp om jouw tekst formaten te berekenen 

Meer weten over de optimalisatie van jouw website?

Ik help je graag. Laat hieronder je gegevens achter en ik neem zo snel mogelijk contact met je op voor persoonlijk advies. 

Timo van der Keijl

Timo van der Keijl
UX-designer SIM

Ja, vertel mij meer over website optimalisatie