Met het zaklampje van de telefoon bestudeerde ik de menukaart. Ik had natúúrlijk geen leesbril bij, want dat is stom. Maar dit voelde nog stommer. Sinds er veel 4-en in mijn leeftijd staan heb ik goed licht nodig en een ietwat groter lettertype. Dat is bij mijn favoriete Vietnamees in Rotterdam een probleem.
Zo ook op veel websites. Hoe zorg je voor een goede leesbaarheid op je website?
Waarom is leesbaarheid belangrijk?
Fijn dat je dat eerst vraagt.
Gebruiksvriendelijkheid, dat is het toverwoord waar alles om draait.
Je website is voor mensen. Mensen die het niet altijd meteen snappen.
In een winkel kun je zien dat je klant iets niet snapt en dan spreek je ze aan: “Kan ik u misschien helpen?”
Op een website moet een klant het allemaal zelf zien uit te vogelen. Dus is het súúperbelangrijk dat alles heel helder en duidelijk is.
En dan bedoel ik dus zònder het gebruik van zo’n pop-up-chat-robot. Die snappen het vaak ook niet.
Leesbaarheid gaat over typografie. Dat is een specialisme op zich binnen de grafische ontwerp studie. Heel interessant, maar we houden het bij de hoofdlijnen.
De vier belangrijkste punten om op te letten voor een goede leesbaarheid op je website.
Hier komen ze.
Punt 1 – Het soort lettertype
Kies een lettertype dat goed leesbaar is. Dat wil letterlijk zeggen, kun je lezen wat er staat.
Soms zie ik een website wat geheel in een sierlijke scriptfont is geschreven.
Dat kan niemand lezen.
En dat wíl je ook niet lezen. Het is niet te doen.
In dit voorbeeld is het lettertype Playball gebruikt van Google Fonts. Het is op zich een prima lettertype, maar alleen voor kopjes of titels.
In titels kun je een afwijkend lettertype kiezen. Hiermee geef je een persoonlijk touch aan je website. Let wel op dat je nog steeds goed kunt lezen wat er staat.
Voor de algemene tekst, de bodytekst of platte tekst, kun je het beste voor een ‘serif’ of ‘sans serif’ kiezen.
Maar die zijn zo saai!
Ja, en daardoor kun je beter lezen wat er staat. Je wordt niet afgeleid door het ontwerp van de letter. Het ontwerp van deze letters helpt de lezer juist om makkelijker te lezen.
De voorbeeldplaatjes zijn screenshots van http://webfont-test.com.
Heel handig voor als je twijfelt tussen verschillende lettertypen.
Op webfont-test kun je tot drie google fonts naast elkaar zetten en zo goed de leesbaarheid vergelijken en sfeer proeven.
Punt 2 – De grootte van je lettertype
De reden dat een script-font beter werkt als titel en niet als body-tekst is natuurlijk omdat titels een stuk groter worden gemaakt.
Wat is een goede afmeting voor het lettertype?
De standaard is 16 px.
Maar, elk lettertype is anders en elk beeldscherm is anders.
Voor tekst op een smartphone is 16px vaak nog oké.
Maar tekst op een computerscherm lees je vaak van een grotere afstand. Dan is het veel prettiger voor je lezer om de tekst wat groter te maken, richting de 20px.
Kijk daarbij ook naar de regelhoogte. Voor grote stukken tekst is het prettig als er wat meer lucht tussen de regels zit.
Webtech lettertype weetje
Eigenlijk gebruiken we geen px grootte meer voor lettertypen, maar rem. Dit is een eenheid die meeschaalt en dus belangrijk is bij responsive websites.
Nog een pluspunt, voor als jouw lezer eigenwijs geen leesbril wilt maar wel heel slim haar browser op een groter lettertype heeft ingesteld. Alle tekst schaalt dan in de juiste verhouding mee.
Hoe werkt rem?
Je website en browser staan meestal standaard ingesteld op een basislettergrootte van 16px. Hieraan is alles gerelateerd
16 px is dan gelijk aan 1 rem.
Dat is de basis, en daarvandaan reken je de rest uit.
Of je gebruikt een handig lijstje die het al heeft voorgerekend.
Let op dat je . punten gebruikt in plaats van , komma’s.
12px = 0.75rem
14px = 0.875rem
16px = 1 rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
Punt 3 – De uitlijning van je tekst
Voor het uitlijnen van je tekst zijn er vier opties.
Er is er maar één altijd geschikt: links uitlijnen.
De andere opties mag je weggooien.
Echt.
Nou vooruit, er zijn uitzonderingen.
Links uitlijnen
Wij lezen onze taal van links naar rechts.
Om fijn te kunnen lezen heb je houvast nodig, een startpunt waar je altijd naar terug kunt. Een kantlijn.
Dit startpunt zoek je automatisch aan de linkerkant, in de leesrichting.
Dus links uitlijnen is altijd het meest gebruiksvriendelijke wat je kunt doen om je lezer te helpen om jouw tekst te lezen.
Rechts uitlijnen
Is dus standaard raar om te doen.
Het kan alleen als het een kort zinnetje is. Een toelichting naast een afbeelding bijvoorbeeld of een uitgelichte quote.
Maar liever niet, en helemaal niet in je hero-gedeelte op de home pagina.
Gecentreerd tekst
Aan gecentreerde tekst zit geen begin en geen eind. Het zweeft over je pagina.
Voor een titel of een kleine quote is het natuurlijk prima om te gebruiken.
Of zweverige gedichten.
Maar, omdat gecentreerde tekst geen helder startpunt heeft moet je goed kijken naar de breedte van je tekst. Let dus op bij het laatste punt, punt 4.
De grote stukken bodytekst doe je nooit
NOOIT
in gecentreerde tekst.
Echt niet doen.
Uitvullen
Hier heb je twee strakke kantlijnen, links èn rechts.
Top!
Strakke kantlijnen, goed voor de lezer toch?
Nou, dit werkt alleen als je goed kunt uitvullen. Vaak gaat het programma automatisch de teksten een beetje oprekken en worden spaties vergroot. Zo krijg je rechts een mooie strakke kantlijn. Maar door het oprekken ontstaan er ook gaten of hele rivieren in je tekst.
Goed uitvullen kun je alleen met een opmaak-programma als Indesign of QuarkXPress. Hierin zitten allerlei mogelijkheden om de gatenkaas te verminderen.
Gewone tekstverwerkers zoals Word, Google Docs en ook websites hebben deze mogelijkheden niet.
In WordPress kun je ook niet kiezen voor ‘uitvullen’.
Dat scheelt.
Punt 4 – De breedte van je tekst
Wanneer je dit goed onder controle hebt, ziet je website er ook meteen een stuk professioneler uit.
Mooi, laat maar horen.
Bij punt 3 heb je geleerd dat een strakke kantlijn, een houvast, belangrijk is voor de lezer. Dat startpunt kun je niet lang vasthouden in je hoofd.
Als de tekst te breed is krijg je de neiging om je lineaal op je tekst te leggen, je vinger erbij te houden of het pijltje van je muis.
Dat maakt het lezen erg vermoeiend.
Dus smallere teksten.
Hoe smal?
Een vuistregel is maximaal tussen 60 – 80 aanslagen.
Of, zoals ik het meestal doe, ongeveer 10 woorden.
Kijk maar naar de opmaak van kranten en tijdschriften. Bedenk of je het lekker vond lezen en tel dan eens hoeveel aanslagen of woorden breed de tekstkolom is.
Overtuigd?
Mooi!
Nog een laatste punt van aandacht. Websites zijn responsive en verschalen naar elk beeldscherm.
Wanneer je de tekstkolom op de volledige breedte van de website hebt staan, is deze altijd veel te breed. Let dus op dat je dit voor elk breakpunt goed instelt.
Hoe?
Dat is een vrij technisch verhaal.
Voer voor een volgend artikel.
Tot slot
Ik hoop dat dit je geholpen hebt. Je zult zien dat hierdoor je website er ook professioneler uit gaat zien.
Wil je er nog professioneler uitzien?
Hier lees je meer over de belangrijkste onderdelen op de home-pagina.
In dit andere artikel ga ik verder in op de hero-section.
En als het je allemaal te veel wordt. Lees je hier wat een webdesigner voor je kan doen.
Extra tip
Zie je een website die het in jouw ogen goed doet. Kijk dan naar wat voor lettertypes en afmetingen er worden gebruikt.
Bij Google Chrome kun je extensies gebruiken zoals WhatFont.
Super handig.
Ik vind het leuk om te horen wat voor jou de grootste eye-opener is.