Zelfs bij een website met alleen foto’s ontkom je er niet aan om met tekst aan te geven wat het doel van de website is. Dit doe je zo mooi en leesbaar mogelijk. Dit blog gaat over het gebruik van lettertypes en het presenteren van tekst.
De vormgeving en de opmaak
De leesbaarheid van een stuk tekst wordt bepaald door de vormgeving en de opmaak. Hierbij komt de term ‘Typografie’ om de hoek kijken. Typografie richt zich op lettertypes, lettergroottes, kleuren, leestekens en zaken als de afstand tussen letters, tekstregels en kolommen. Laten we deze onderdelen gewoon even langslopen.
Welk lettertype gebruik ik op de website?
De drukkerijwereld heeft inmiddels de beschikking over miljoenen lettertypes en ook in de digitale wereld zijn lettertypes er te kust en te keur. Echter, tot voor enkele jaren was je er bij de inrichting van jouw website van afhankelijk welk lettertype de gebruiker van de website op zijn computer geïnstalleerd had. En een Apple had dan andere lettertypes dan een Windows computer. DE nadruk lag toen op de lettertypes uit de drukkerswereld waarmee de kranten werden gedrukt. Denk hierbij aan een schreef-letter (een letter met ‘stokjes’ aan de uiteinden) zoals Times New Roman. Voor kranten is dit optimaal en uitstekend leesbaar, maar voor beeldschermen bleek toch snel dat de stokjes aan de letters het beeld niet beter maakten. Voor beeldschermen en dus jouw website, maak je voor de teksten bij voorkeur gebruik van een schreefloze letter. Het meest gebruikte voorbeeld hiervan is Arial. Voor letters op een beeldscherm is onderzocht dat de beste leesbaarheid ontstaat bij letters die een redelijke hoogte hebben en grote openingen. Microsoft heeft speciaal hiervoor in het verleden 2 lettertype laten ontwikkelen die we nu veel terugzien: het schreefloze Verdana en voor die gevallen dat toch een schreefletter gebruikt moet worden Georgia. Op de meeste computers vind je deze lettertypes terug en zijn ze veilig om te gebruiken.
En als ik nu een ander lettertype wil?
In mijn blog over ‘een aantrekkelijke website’ maak ik onderscheid tussen ‘body lettertypes’ voor de teksten en ‘display lettertypes’ voor de kopteksten en andere elementen. Voor het body lettertype geldt het bovenstaande en zul je er naar streven om alle teksten echt leesbaar te maken. Maar voor kopteksten wil je wellicht toch een eigen stijl opbouwen. Misschien heb je een geheel eigen lettertype bij jouw huisstijl gevonden en gebruik je die op jouw briefpapier en facturen. Sinds een paar jaar bestaat er binnen HTML en CSS de mogelijkheid om ieder digitaal lettertype om te zetten naar een lettertype dat bruikbaar is op een website. De webdesigner maakt dan een WOFF-bestand dat gebruiker van de website download net zoals die ook een foto zou ophalen. Omdat je niet wil dat de snelheid van de website hieronder te leiden heeft, beperk je dit gebruik wel enigszins.
En Google zou Google niet zijn als ze de wereld niet zou willen helpen met hun variant op deze website lettertypes. In plaats van het lettertype dat de webdesigner op jouw website plaatst kun je ook kiezen voor een link naar een van de ruim 1.000 lettertypes die Google Fonts beschikbaar stelt. Veel thema’s binnen WordPress hebben inmiddels een instelling waarmee ze heel gemakkelijk een van deze lettertypes kunnen activeren. Op de website van Google kun je mooi combineren met kopteksten en bodyteksten om vast te stellen welke combinatie voor jou goed werkt.
Grootte en kleur
Met de komst van responsieve websites en het gebruik van mobieltjes zijn we gewend geraakt aan het scrollen door een pagina. Mocht vroeger de letter niet te groot zijn, anders paste jouw boodschap niet op 1 pagina, nu moet alles snel en vooral gemakkelijk leesbaar zijn. Dat houdt nu in dat de letters groter zijn (14 punten, soms wel 16 of 18!) en veel witruimte er omheen hebben. Datzelfde geldt voor het contrast tussen de letters en de achtergrond. Dit contrast moet groot genoeg zijn en is de voorkeur voor zwarte tekst op een witte achtergrond. Voor mijn gevoel is dat contrast af en toe net teveel en kies ik voor heel donker grijs.
De tekstopmaak
Heb je dan jouw lettertype gekozen, de grootte ingesteld en de juiste kleur grijs of zwart gekozen, dan kun je nog variëren met de ruimte om de letters en de woorden.
Een goede leesbare uitstraling krijg je door iets meer ruimte tussen de regels te laten. Een regelafstand van 120% wordt vaak als prettig leesbaar ervaren, zeker op een smartphone. Voor een goede verdeling over de pagina kun je nog iets meer ruimte tussen de alinea’s laten. Een extra witregel is een mogelijkheid, maar een instelling om enkele extra punten voor en na een regeleinde te zetten is ook een fraaie oplossing. Wil je ervoor zorgen dat de regels niet te lang zijn op een brede pagina, dan kun je dit anders verdelen. Je kunt werken met kolommen waarbij je op een laptopscherm het beeld in 2 kolommen verdeelt. In deze kolommen kun je teksten en foto’s laten wisselen of kun je 2 stukken tekst naast elkaar presenteren. Op een smartphone komen deze kolommen vervolgens gewoon onder elkaar.
Om tenslotte het beeld van de pagina nog wat ‘ankerpuntjes’ te geven kun je op diverse plaatsen het woordbeeld nog wat aanpassen. Dat doe je voor woorden dik gedrukt of schuin gedrukt weer te geven. Ook het gebruik van herkenbare links helpen hierbij.
De verpakking van de boodschap
Met deze tips heb je de instrumenten in handen om de leesbaarheid van jouw webpagina’s te verbeteren. Dat zegt natuurlijk nog niets over de inhoud en de vindbaarheid van jouw boodschap. In een volgend blog zal ik aandacht besteden aan de basis van SEO (Search Engine Optimization) zodat ook bij het schrijven aandacht is voor het optimaliseren van jouw tekst. Heb je vragen over het gebruik van lettertypes, laat het me weten. Ik help je graag verder.