Welk lettertype voor mijn website, en waarom is dat zo belangrijk?

plaatje van verschillende fontsEen website ontwerper kiest misschien een prachtig artistiek font. Of gebruikt het lettertype dat ook in je logo voorkomt. Maar is dat nou echt goed? 

De ontwerper kijkt waarschijnlijk vooral naar hoe de totale website er uitziet. Best belangrijk, want de uitstraling van jouw website is cruciaal voor het aantrekken van bezoekers. 

Maar of dat artistieke font dan echt het beste font voor jouw website is?
Als je je echt verplaatst in je bezoeker, dan gaat het er om of hij of zij de teksten goed kan lezen. Je bezoeker moet, zodra de pagina geladen is, geen enkele moeite hoeven doen om de teksten te lezen en te begrijpen.

Eigenlijk moet je bezoeker niet eens merken dat hij leest. Als het lezen lastig is door een te “mooi” lettertype, dan is hij zo weer weg. En dat herken je waarschijnlijk zelf ook wel:

Stukje tekst in een raar lettertype

Dus: je font moet heel makkelijk te lezen zijn! Als we het daar over eens zijn geef ik je graag de 6 belangrijkste tips over fonts voor jouw website:

Tip 1: Het font moet heel makkelijk te lezen zijn!

Zoals net gezegd: maak het je bezoeker makkelijk door teksten te presenteren die echt goed leesbaar zijn. Het lijkt een open deur, maar dit is misschien de belangrijkste regel om je bezoekers langer op je website te houden.

Kijk eens naar bekende websites zoals Google, Coolblue, of NRC: ze gebruiken een vrij eenvoudig, vaak gebruikt font. Misschien wat saai voor de ontwerpers, maar met een uiterst belangrijkste kenmerk: het is een font dat makkelijk leest.

Vaak is dat bijvoorbeeld Verdana, Helvetica, Open-Sans (het font wat je hier nu leest) of Arial. Het zijn altijd schreefloze (sans serif) fonts: dus zonder dwarsstreepjes aan de uiteindes van de letters.

Tip 2: Je font moet niet te klein zijn.

Vaak wordt de tekst in paragrafen weergegeven in grootte 12. Dat is echter veel te klein voor de hoge resolutie beeldschermen van tegenwoordig: een lettertype 16 is veel makkelijker en prettiger te lezen.

De afmeting van het font is prima in te stellen per apparaat. Het is daarom verstandig om per beeldscherm (groot scherm, laptop, tablet, mobiel) goed te kijken naar de grootte van het font. Neem de proef op de som, probeer het zelf, of vraag aan mensen om je heen of zij het qua grootte goed kunnen lezen.

Tip 3: Er moet een goed contrast zijn.

Een mooie foto op de achtergrond is prachtig, maar hoe goed blijft de tekst leesbaar? Als ik ik te weinig verschil zie tussen de achtergrond en het lettertype worden mijn ogen sneller vermoeid en ben ik dus ook sneller weg.

Dat is best lastig, want je hebt net een perfecte foto gevonden bij je tekst, maar die varieert enorm: links donkere groene bomen, rechts een mooie lichte lucht. Witte letters zijn goed leesbaar op de groene bomen, maar zijn onleesbaar voor de lichte lucht. Gebruik dus het liefst gelijkmatige foto’s, waar je met contrasterende letters de bezoeker kan blijven boeien..

Tip 4: Gebruik niet teveel lettertypen door elkaar.

Yes! Je heb een aantal gave fonts gevonden, die qua design matchen met de andere elementen van je website. Maar wacht even voor je ze toepast, en bedenk waarom je het eigenlijk doet. Wordt het er leesbaarder door? Bereik ik er iets mee, of wordt het er juist verwarrend door?

Hoe mooi het ook kan zijn, teveel verschillende lettertypes maakt de site ook onrustig. Probeer het bij 2, hoogstens 3 verschillende fonts te houden. En gebruik vooral niet teveel kleuren in je fonts.

Tip 5: Zorg voor de juiste breedte van de tekst op jouw website.

Klinkt makkelijk zat, maar wat is dan de juiste breedte? Volgens Wikipedia hebben onderzoeken uitgewezen dat een zin met een breedte van 100 letters sneller wordt gelezen dan een zin met een breedte van 25 letters. Maar let wel, kortere zinnen van 55 letters worden beter gelezen. Smallere zinnen worden dus het best begrepen.

In de praktijk werkt een combinatie het beste: vaak begint een artikel met een smallere tekstbreedte om de bezoeker sneller te laten begrijpen waar het over gaat, om daarna bredere zinnen te laten zien zodat de bezoeker sneller kan lezen. Begin bijvoorbeeld met een afbeelding naast de tekst, zoals ook deze blog begon..

Tip 6: Houd de alinea’s leesbaar

Ook de lengte van de alinea kan het verschil maken. kijk maar naar jezelf: als je een lap tekst ziet van een pagina lang zonder witregels vlucht je vaak weg. of je moet echt gemotiveerd zijn om het te lezen. Zoals in een boek, waar je door gegrepen bent.

Met veel witregels en het gebruik van headers die wat over de inhoud vertellen wordt een pagina leesbaar.

Misschien scroll jij gelijk door naar het deel dat jou interesseert: dat kan, omdat je eerst de pagina scant. En alinea’s helpen je daarbij. En het maakt dan niet uit hoe kort een alinea is.  

Wat??

Precies, zelfs een alinea die maar uit 1 woord bestaat kan prima, als je een bepaald effect wil bereiken. Dus aan de gang met meer witregels!

En tenslotte, gebruik de juiste tools

Ook een goeie tip: in de meeste browsers (bijvoorbeeld Chrome en firefox) kan je een extension installeren om te kunnen zien welk font, grootte, dikt etc een bepaalde tekst gebruikt. Lees hier bijvoorbeeld hoe je zo’n extensie in Chrome kan installeren en gebruiken.

En over tips gesproken: wist je dat YourWebPro ook kan helpen om jouw website nieuw leven in te blazen?

Als je een mooi font gevonden hebt maar je weet niet waar je het kan vinden: op deze site kan je een afbeelding uploaden met daarin het lettertype dat je zoekt. Vervolgens kan je aangeven welke letter overeenkomt met welk deel van de afbeelding, waarna de site voor je op zoek gaat naar het juiste lettertype:
What The font??

Als je heel nauwgezet bezig gaat met het selecteren van een font voor jouw specifieke website dan kan dit je misschien helpen om het optimale font te kiezen. In 7 stappen kom je tot het beste font voor je webdesign project: 
7 Tips for Choosing the Best Web Font

Google Fonts is al jaren één van de populairste providers van gratis fonts voor je website. Op dit moment huisvest deze enorme fontbibliotheek maar liefst meer dan 900 webfonts:
Google fonts

Mocht je bij de Google fonts (meer dan 900!) niet goed kunnen kiezen dan heeft deze site de 20 beste webfonts al voor je geselecteerd: 20 Best Google Web Fonts