Hoe kies je goed leesbare lettertypes voor je website?

01 / VAN VRAAG NAAR PRAKTIJK

Begin met inhoud, niet met een mooi alfabet.

Een lettertype ziet er in een grote voorbeeldkop vaak prachtig uit. Dat zegt nog weinig over een alinea met voorwaarden of een menuknop op een telefoon. Verzamel daarom eerst echte inhoud: een dienstomschrijving, een prijs, een lang woord uit jouw vak en een contactknop. Gebruik die voorbeelden om ontwerpen te vergelijken.

Kijk ook naar de toon van je bedrijf. Een uitgesproken kopletter kan een ambachtelijke winkel karakter geven, terwijl de lopende tekst rustig blijft. Een zakelijk dienstverlener kan juist één letterfamilie gebruiken met verschillende gewichten. Dat zijn ontwerpkeuzes, geen vaste regels per branche. De bezoeker moet je verhaal vooral kunnen volgen.

Begin bijvoorbeeld met één lettertype voor koppen en één voor tekst. Twee is geen maximum en ook geen verplichting; het is een overzichtelijk vertrekpunt. Voeg pas iets toe als het een duidelijke functie heeft. Een extra lettertype voor iedere sectie maakt onderhoud lastiger en kan de samenhang verbreken.

Controleer de letters en tekens die je nodig hebt. Zijn een hoofdletter I, kleine l en cijfer 1 voldoende te onderscheiden? Werken eurotekens, accenten en productcodes? Bij een webshop verdienen prijzen, maten en artikelnummers hun eigen proef. Het voorbeeldwoord “Welkom” vertelt daar weinig over.

Neem de bestaande huisstijl mee bij het ontwerpen van je website. Een logo mag een bijzondere letter hebben zonder dat alle teksten dezelfde letter nodig hebben. Vraag een ontwerper om het verband te laten zien in een echte pagina: hoe passen koppen, beelden, kleur en tekst samen?

02 / VAN VRAAG NAAR PRAKTIJK

Dezelfde letters kunnen heel anders lezen.

Leesbaarheid ontstaat uit de combinatie van lettervorm, grootte en ruimte. De typografie-uitleg van web.dev behandelt onder meer regellengte en aanpassing aan het scherm. Een tekst die van de linker- tot de rechterrand van een groot beeldscherm loopt, vraagt een andere leesbeweging dan een begrensde tekstkolom. Beoordeel daarom de hele alinea.

Neem een fictieve fietsenmaker. In de eerste uitvoering staat een lange uitleg over onderhoud in kleine tekst met weinig regelruimte. In de tweede uitvoering blijft de inhoud gelijk, maar wordt de tekstkolom smaller en krijgen de regels meer ruimte. Het verschil komt dan niet van een nieuw lettertype, maar van een betere toepassing. De illustratie hieronder laat dat principe zien.

Er is niet één lettergrootte die ieder ontwerp goed maakt. Een letter met kleine lettervormen kan op dezelfde ingestelde grootte kleiner ogen dan een andere. Vergelijk dus op het scherm en lees meerdere zinnen achter elkaar. Kijk niet alleen of de eerste regel past, maar ook of de ogen de volgende regel makkelijk terugvinden.

Gebruik duidelijke verschillen tussen hoofdkop, tussenkop en gewone tekst. Alleen alles groter en vetter maken is geen hiërarchie. Vraag of de indeling ook inhoudelijk klopt: een kop moet het onderwerp van de volgende alinea aangeven. Bij een lange uitleg helpen korte paragrafen om een specifiek antwoord terug te vinden.

Test lange woorden en vergrote tekst op een telefoon. Een kop mag naar een volgende regel lopen, maar hoort niet buiten het scherm te verdwijnen. Knoppen moeten hun volledige tekst kunnen tonen. Loop dit na met de controle voor responsive websites, ook op een breedte tussen telefoon en desktop.

Vermijd belangrijke uitleg als tekst in een afbeelding. Gewone webtekst kan op meer manieren worden aangepast en gebruikt. Illustraties mogen sfeer geven of iets toelichten, maar zet de uitleg ook leesbaar op de pagina. Voor bredere controles kun je verder met je website bruikbaarder maken.

03 / VAN VRAAG NAAR PRAKTIJK

Leg de keuze vast en controleer de uitvoering.

Vraag vóór gebruik welke licentie nodig is voor de website. Een gekocht bestand voor drukwerk geeft niet vanzelf alle rechten voor online gebruik. Laat de leverancier of ontwerper aangeven wat is toegestaan en bewaar die informatie bij de projectafspraken. Dit voorkomt dat een mooi ontwerp later opnieuw moet worden gezet.

Een webletter moet worden geladen, tenzij een passende letter al op het apparaat beschikbaar is. Spreek af welke gewichten echt nodig zijn en wat de browser toont als de gekozen letter nog niet beschikbaar is. Test met een eerste bezoek, niet uitsluitend met een browser die de bestanden al heeft opgeslagen.

Controleer ook de situatie waarin het letterbestand niet geladen wordt. Blijven koppen, knoppen en formulieren bruikbaar met de vervangende letter? Verschuift er veel tijdens het laden? Laat dit gericht beoordelen bij problemen met de snelheid van de website. Een visueel aantrekkelijk ontwerp moet ook in minder ideale omstandigheden werken.

Bewaar een klein overzicht van de toepassing: koppen, alinea’s, bijschriften, knoppen en menu. Voeg een voorbeeldpagina toe met echte tekst en noteer wie wijzigingen mag doorvoeren. Dan hoeft degene die een nieuw artikel plaatst niet steeds zelf een lettergrootte en stijl te bedenken.

Bij een bestaande site is een gerichte aanpassing van de typografie soms voldoende. Laat eerst één representatieve pagina uitwerken en bekijk daarna ook langere titels, productpagina’s en formulieren. Zo beoordeel je een systeem dat op de hele website bruikbaar is, in plaats van alleen een mooie homepage.