Typografie, wat is dat eigenlijk?

Typografie is de kunst en techniek van het vormgeven van tekst, zodat die niet alleen leesbaar is, maar ook een boodschap en sfeer overbrengt. Het omvat de keuze van lettertypes, de grootte en dikte van letters, de ruimte tussen letters, woorden en regels, en de manier waarop tekst op een pagina is geordend. Typografie draait dus om veel meer dan "een lettertype kiezen": het bepaalt hoe prettig een tekst leest, hoe overzichtelijk informatie overkomt en welke indruk je maakt. Goede typografie is vaak onzichtbaar, omdat je dan moeiteloos leest zonder erbij na te denken. Slechte typografie valt juist op, omdat de tekst dan rommelig, vermoeiend of onprofessioneel oogt. Op een website is typografie daarom een van de belangrijkste designkeuzes: ze beïnvloedt zowel de leesbaarheid als de uitstraling en de geloofwaardigheid van je merk. Het is de stille kracht achter elke goed leesbare pagina.

Omdat het overgrote deel van een website uit tekst bestaat, en typografie bepaalt of die tekst prettig leest en professioneel oogt. Goede typografie maakt je content moeiteloos te lezen en te scannen, wat bezoekers langer vasthoudt en je boodschap beter laat overkomen. Ze draagt bovendien bij aan je uitstraling en betrouwbaarheid: een verzorgde, consistente tekstopmaak wekt vertrouwen, terwijl rommelige typografie een site amateuristisch laat lijken, hoe mooi de rest ook is. Typografie stuurt daarnaast de aandacht: met verschillen in grootte, dikte en witruimte maak je duidelijk wat een kop is, wat belangrijk is en waar de bezoeker moet beginnen te lezen. Zo helpt goede typografie mensen sneller vinden wat ze zoeken. Op mobiel, waar de meeste bezoekers tegenwoordig komen, is leesbare tekst helemaal cruciaal. Typografie is dus geen bijzaak, maar een fundament van een prettige, professionele en effectieve website.

Zeker, maar met mate en op de juiste plek. Een creatief of opvallend lettertype kan karakter en herkenbaarheid geven aan je merk en is prima geschikt voor grote koppen, een logo of een enkele blikvanger. Voor lopende tekst is het echter zelden een goed idee, omdat sierlijke of ongewone lettertypes vermoeiend en slecht leesbaar zijn in grotere hoeveelheden. De vuistregel is: leesbaarheid gaat vóór originaliteit, zeker in de bodytekst. Een veelgebruikte aanpak is daarom een opvallend lettertype voor de koppen te combineren met een rustig, goed leesbaar lettertype voor de lopende tekst. Zo krijg je karakter én comfort. Beperk het aantal verschillende lettertypes bovendien tot twee of hoogstens drie, want te veel verschillende letters maken een pagina rommelig. Gebruik creativiteit dus als accent, niet als basis. Een opvallend lettertype trekt de aandacht; een leesbaar lettertype zorgt dat mensen ook echt blijven lezen.

Een goede regelafstand (de ruimte tussen de regels) en regellengte (het aantal tekens per regel) maken tekst een stuk prettiger leesbaar. Voor lopende tekst op een website werkt een regelafstand van ongeveer 1,5 keer de lettergrootte doorgaans goed: genoeg lucht tussen de regels zodat het oog makkelijk de volgende regel vindt, zonder dat de tekst uit elkaar valt. Voor de regellengte is een richtlijn van ongeveer 50 tot 75 tekens per regel prettig; te lange regels maken het lastig om terug te vinden waar de volgende begint, terwijl te korte regels het lezen juist hakkelig maken. Deze zaken vallen niet op als ze goed zijn, maar wél als ze verkeerd staan. Ze zijn onderdeel van waarom goede typografie "onzichtbaar" prettig leest. Test je tekst bovendien op mobiel, want daar gelden andere verhoudingen. Met de juiste regelafstand en regellengte houd je bezoekers moeiteloos aan het lezen.

Omdat papier en beeldscherm fundamenteel verschillen in hoe ze tekst weergeven. Op papier ligt alles vast: de resolutie is hoog en de opmaak verandert niet. Op een scherm is de weergave variabel, want tekst moet zich aanpassen aan talloze schermformaten, resoluties en apparaten, van een grote monitor tot een kleine telefoon. Wat op papier scherp en fijn oogt, kan op een scherm minder goed leesbaar zijn, zeker bij kleine of dunne letters. Daarom werken op het web vaak wat robuustere, schermvriendelijke lettertypes beter, en is voldoende grootte en contrast belangrijker. Ook lezen mensen op een scherm anders: ze scannen meer dan dat ze woord voor woord lezen. Typografie voor het web vraagt dus om andere keuzes dan voor drukwerk: je optimaliseert voor leesbaarheid op uiteenlopende schermen en voor scannend leesgedrag, in plaats van voor een vaste, gedrukte pagina. Test daarom altijd hoe je tekst op verschillende apparaten oogt.

Contrast is een centraal onderdeel van goede typografie en werkt op twee manieren. Ten eerste is er kleurcontrast: de tekst moet voldoende afsteken tegen de achtergrond, anders wordt lezen vermoeiend of zelfs onmogelijk, zeker voor mensen met een visuele beperking. Lichtgrijze tekst op een witte achtergrond is een klassieke fout. Ten tweede is er hiërarchisch contrast: door te variëren in lettergrootte, dikte en stijl maak je onderscheid tussen koppen, subkoppen en lopende tekst. Dat helpt de bezoeker in één oogopslag de structuur te zien en te scannen naar wat hij zoekt. Zonder dit contrast wordt een pagina één grijze massa waarin niets opvalt. Contrast stuurt dus zowel de leesbaarheid als de aandacht. Goede typografie gebruikt contrast bewust om belangrijke elementen te laten opvallen en de lezer moeiteloos door de tekst te leiden. Zorg dus altijd voor voldoende contrast, zowel in kleur als in de opbouw van je tekst.

Houd het beperkt: twee lettertypes is voor de meeste websites ideaal, en drie is echt het maximum. Een veelgebruikte en veilige aanpak is één lettertype voor de koppen en één voor de lopende tekst, eventueel aangevuld met een derde voor accenten. Gebruik je meer verschillende lettertypes, dan wordt je pagina al snel rommelig, onrustig en onprofessioneel, omdat er te veel visuele stijlen om aandacht strijden. Variatie breng je liever aan binnen een lettertype, door te spelen met grootte, dikte (bijvoorbeeld vet of licht) en stijl, in plaats van steeds een nieuw lettertype toe te voegen. Zo houd je samenhang en rust. Kies lettertypes die bij je merk passen en goed met elkaar combineren, en zorg dat de lopende tekst altijd prettig leesbaar blijft. Minder is hier echt meer: een consistent, beperkt palet aan lettertypes oogt verzorgder en versterkt de herkenbaarheid van je merk.

Een schreeflettertype (met serifs) heeft kleine dwarsstreepjes aan de uiteinden van de letters, terwijl een schreefloos lettertype (sans-serif) die niet heeft en dus strakker en moderner oogt. Schreeflettertypes worden vaak geassocieerd met traditie, gezag en leesbaarheid in gedrukte tekst, zoals in kranten en boeken. Schreefloze lettertypes ogen clean en eigentijds en worden veel op het web gebruikt, mede omdat ze op schermen goed leesbaar zijn, ook bij kleinere formaten. Er is geen "beste" keuze; het hangt af van je merk en de indruk die je wilt maken. Veel websites combineren de twee: bijvoorbeeld een schreefloos lettertype voor de lopende tekst en een schreeflettertype voor koppen, of andersom, zolang ze goed met elkaar harmoniëren. Belangrijker dan de categorie is dat de tekst goed leesbaar is en bij je huisstijl past. Kies dus bewust op basis van uitstraling én leesbaarheid op het scherm.

Voor lopende tekst op een website is een lettergrootte van rond de 16 pixels een veelgebruikte, prettige ondergrens; kleiner dan dat wordt al snel vermoeiend om te lezen, zeker op mobiel. Koppen maak je uiteraard groter, zodat er een duidelijke hiërarchie ontstaat tussen titels, subkoppen en gewone tekst. Belangrijk is dat de tekst op elk apparaat comfortabel leesbaar blijft, dus test je website op zowel desktop als telefoon. Op mobiele schermen, waar de meeste bezoekers tegenwoordig komen, is voldoende grootte extra belangrijk. Combineer de juiste lettergrootte met een goede regelafstand en voldoende contrast, want die drie bepalen samen hoe prettig een tekst leest. Vermijd te kleine tekst om "meer op een scherm te passen", want dat kost je juist lezers. De vuistregel: kies liever iets te groot dan te klein, zodat iedereen je content moeiteloos kan lezen zonder in te zoomen.

Omdat lettertypes bestanden zijn die je website moet laden, en dat kost tijd. Gebruik je veel verschillende lettertypes of zware, ongewone letterbestanden, dan kan dat je site vertragen, wat ten koste gaat van de gebruikerservaring en je vindbaarheid, want laadsnelheid weegt mee in Google. Bovendien kan tekst tijdens het laden even "springen" of onzichtbaar zijn als het lettertype nog niet geladen is, wat rommelig oogt. Je beperkt dit door het aantal lettertypes klein te houden (twee is vaak ideaal), alleen de letterdiktes te laden die je echt gebruikt, en te kiezen voor efficiënt ladende weblettertypes. Zo combineer je een verzorgde typografie met een snelle website. Typografie is dus niet alleen een esthetische keuze, maar ook een technische: de letters die je kiest, beïnvloeden mede hoe snel je pagina opent. Houd daarom bij het kiezen van lettertypes altijd één oog op de prestaties van je site.