8 onmisbare tips voor typografie in webdesign

Houd je een blog bij? Dan is het belangrijkste logischerwijs het schrijven van een steengoed blogartikel. Gewoon goed is namelijk vaak niet goed genoeg. Het moet de crème de la crème zijn. Legendarisch.

De kans is groot dat iemand die je website bezoekt geen belang hecht aan je ongelooflijk doordacht kleurenpalet, je perfect belichte afbeeldingen die uiteraard de guldensnede meticuleus respecteren of de strategisch uitgestippelde content hiërarchie, maar gewoon onmiddellijk en simpelweg begint te lezen.

Dan mag je al de mooiste, meest innoverende website gelanceerd hebben, uiteindelijk draait alles om tekst als het gaat over het overbrengen van de boodschap.

Om die reden alleen al zou typografie, de kunst van het vormgeven van tekst, een topprioriteit moeten zijn bij elke webdesigner. En, een leesbare website is een betere website, iets waar elke marketeer graag mee werkt.

In deze blogpost gaan we 8 simpele regels bekijken die je best onthoudt voor bij je volgend project.

1. Houd het aantal fonts minimaal

Bij het gebruik van 3 verschillende lettertypes krijg je het gevoel dat de website ongestructureerd en onprofessioneel is. Houd ook in het achterhoofd dat verschillende groottes en stijlen door elkaar je layout alles behalve ten goede komt.

Probeer het aantal lettertypefamilies te beperken (twee is veel, één is vaak voldoende) en blijf doorheen de volledige website bij je keuze. Als je dan toch meer dan één lettertype gebruiken zorg er dan zeker voor dat ze elkaar aanvullen op basis van hun letterbreedte. De combinatie van Georgia en Verdana zijn voor elkaar gemaakt terwijl Baskerville en Impact nooit een ‘happy ending’ zullen kennen.

2. Kies voor standaard fonts

Diensten als Google Web Fonts en typekit hebben het mogelijk gemaakt om sexy en exotische lettertypes te gebruiken die je website dat extra fris, onverwacht tintje kan geven. Maar mensen zijn nu eenmaal gewoontedieren en teksten met een vertrouwd lettertype lezen vlotter en makkelijker.

Indien uw website een geldig argument heeft voor een alternatief lettertype, zoals bij branding of voor het creëeren van een meeslepende ervaring, blijft men best bij standaard lettertypes zoals Arial of Calibri.

3. Beperk regel lengte

Om de leesbaarheid te bevorderen is het zeer belangrijk om het juiste aantal tekens per regel te gebruiken. Laat design niet beslissen over de breedte van je teksten. Een aangenaam gemiddelde is 60 tekens per regel.

Als een regel te kort is moet het oog zich constant naar voor verplaatsen waardoor het leesritme van de gebruiker verstoord wordt. Indien de regel te lang is heeft het oog moeilijkheden om zich te focussen op de juiste regel en dwaalt het snel af.

Voor kleinere schermen raden we 30-40 tekens per regel. Hieronder zien we voorbeeld van 2 mobiele websites. De eerste gebruikt 50-75 tekens per regel (wat ok is voor print en desktop), terwijl de tweede website 30-40 tekens gebruikt.

Als een regel te kort is moet het oog zich constant naar voor verplaatsen waardoor het leesritme van de gebruiker verstoord wordt. Indien de regel te lang is heeft het oog moeilijkheden om zich te focussen op de juiste regel en dwaalt het snel af.

Voor kleinere schermen raden we 30-40 tekens per regel. Hieronder zien we voorbeeld van 2 mobiele websites. De eerste gebruikt 50-75 tekens per regel (wat ok is voor print en desktop), terwijl de tweede website 30-40 tekens gebruikt.

4. Kies een lettertype dat werkt voor alle groottes

Steeds meer en meer mensen bezoeken je website mobiel, wat ervoor zorgt dat je rekening moet houden met verschillende maten en resoluties. Heel wat interface elementen zijn schaalbaar (knoppen, labels, headers, enz.). Het is belangrijk een lettertype te kiezen die leesbaar is op verschillende formaten. Standaardformaat voor websites is 16pt.

Laat je niet verleiden door de sexy curves van Vivaldi en vermijd ten allen tijden cursieve lettertypes. Ga steeds voor de meest leesbare optie.

5. Kies een lettertype met onderscheidbare letters

Veel lettertypes hebben gelijkaardige karakteristieken voor letters, vooral i’s en l’s vormen een probleem. Een ander probleem dat dikwijls voorkomt is tussen de r en de n. Door een beperkte letterspatiëring lijkt het dat beide letters een m vormen.

6. Verklein niet de regelafstand

Een correcte regelafstand bevordert het lezen. Het is zelfs bewezen dat een correcte regelafstand ook het begrijpend lezen ten goede komt met 20%. Een goede regelafstand is 30% groter dat de lettergrootte. Enkele factoren die een rol spelen bij de regelafstand zijn: grootte, dikte, kapitalisatie, spatiëring, enz.

7. Zorg voor voldoende contrast

Zorg voor voldoende contrast tussen de kleur van je lettertype en de achtergrond. Hoe contrastrijker de je tekst is, hoe sneller de gebruiker je boodschap kan lezen. Vergeet zeker niet te testen op verschillende schermen. Elk scherm heeft zijn eigen specificaties omtrent contrast, saturatie, Scherpte, kleur temperatuur, enz.

8. Vermijd groene en rode tekst

Kleurenblindheid is een veelvoorkomende aandoening. 8% van de mannen en 0.4% van de vrouwen zijn kleurenblind. Het is dus aangeraden om andere signalen dan kleur te gebruiken om belangrijke informatie aan te duiden. Probeer eerder met symbolen, in combinatie met kleuren, je boodschap duidelijk te maken.