Typografie kiezen voor je webdesign

Bij een nieuwe website gaat de meeste discussie over kleur, foto’s en de homepage. Het lettertype? Dat komt er ergens tussendoor. Toch is typografie de enige designkeuze die je op élke pagina terugziet, in elke kop, elk knopje en elke alinea. Kies je een lettertype dat slecht leest of dat je site vertraagt, dan verlies je bezoekers zonder dat je precies weet waarom.

Typografie kiezen voor je webdesign is dus geen smaakkwestie alleen. Het is een afweging tussen karakter, leesbaarheid, laadsnelheid en toegankelijkheid. In deze blog lopen we die afwegingen langs: hoeveel lettertypes je gebruikt, welke groottes en regelafstanden werken, hoe je voorkomt dat je site langzaam wordt en waar je op moet letten met Google Fonts. Praktisch, met de normen erbij.

Waarom is typografie belangrijk in je webdesign?

Typografie bepaalt of mensen je tekst daadwerkelijk lezen. Grootte, letterdikte en regelafstand beslissen hoe snel iemand een woord herkent en hoeveel moeite het kost om een alinea door te komen. Omdat vrijwel al je informatie op je website uit tekst bestaat, raakt elke typografische keuze direct je bezoekersaantallen, je leestijd en je conversie.

Onderzoekers van MIT keken naar hoe snel mensen woorden herkennen bij verschillende lettergroottes en -breedtes. De uitkomst, samengevat door Nielsen Norman Group, was simpel: groter is beter. Smalle (condensed) letters kostten 11,2% meer tijd om correct te lezen dan normale breedte. Dat gaat over losse woorden, dus je kunt het niet één op één doortrekken naar hele alinea’s, maar de richting is duidelijk. Wie zijn tekst kleiner en smaller maakt om er meer op te proppen, maakt zijn site moeilijker leesbaar.

Er speelt nog iets mee. Typografie is een van de eerste dingen waaraan iemand ziet of jouw bedrijf serieus is. Een pagina met veel te grote koppen, drie verschillende lettertypes en tekst die tegen de rand aanloopt voelt onaf, ook als de inhoud prima is. Onze designers besteden daar bewust tijd aan bij elk webdesign dat we opleveren.

Hoeveel lettertypes gebruik je op een website?

Twee. Eén voor je koppen en één voor je bodytekst. Dat geeft genoeg verschil om hiërarchie te maken en houdt je site rustig en snel. Heb je maar één lettertype met verschillende gewichten, dan is dat ook prima. Drie of meer lettertypes maakt je pagina onrustig en zorgt voor extra bestanden die geladen moeten worden.

Waarom die combinatie van twee werkt: koppen mogen karakter hebben, bodytekst moet vooral onopvallend en comfortabel zijn. Een lettertype met een uitgesproken vorm is leuk in een H1 van vier woorden, maar vermoeiend in een alinea van honderd woorden.

Let ook op het aantal gewichten. Elk gewicht (regular, semibold, bold, italic) is een extra bestand. Kies er drie of vier die je echt gebruikt en laat de rest staan. Zelf werken we met Montserrat voor koppen en Open Sans voor bodytekst, beide via Google Fonts. Niet omdat het de mooiste zijn die bestaan, maar omdat ze goed leesbaar zijn, overal werken en niks kosten.

Welk lettertype leest het beste op een website?

Een schreefloos lettertype (sans-serif) met een ruime x-hoogte en duidelijk van elkaar te onderscheiden letters leest op een scherm het beste. Denk aan Open Sans, Inter, Source Sans of Lato. De x-hoogte is de hoogte van een kleine letter x ten opzichte van de hoofdletter: is die groot, dan lijkt de tekst groter en leest hij makkelijker bij dezelfde puntgrootte.

Betekent dit dat schreefletters (serifs) niet kunnen op web? Nee. Op de schermen van nu leest een goede serif prima, en voor lange leesteksten kiezen veel nieuwssites er juist bewust voor. De vuistregel is: kijk naar de vorm van de letters, niet naar de categorie. Deze punten wegen zwaarder dan schreef of schreefloos:

• Onderscheidende letters. Kun je de hoofdletter I, de kleine l en het cijfer 1 van elkaar houden? En de a en de o? Bij veel geometrische lettertypes gaat dat mis.
• Een ruime x-hoogte. Zorgt dat de tekst leesbaar blijft op kleine formaten en op mobiel.
• Voldoende karakters. Nederlandse teksten hebben accenten nodig (é, ë, ï). Niet elk lettertype heeft die.
• Genoeg gewichten. Je hebt minimaal een regular en een bold nodig, plus meestal een semibold voor tussenkoppen.

Wat je vaak hoort is dat er speciale lettertypes zijn die dyslexie verhelpen. Daar is het bewijs een stuk zwakker dan de marketing doet vermoeden. Wat wel helpt is groter, meer regelafstand en kortere regels. Dat helpt bovendien iedereen.

Welke lettergrootte en regelafstand gebruik je?

Houd bodytekst op 16 tot 18 pixels op desktop en niet kleiner dan 16 pixels op mobiel. Gebruik een regelafstand van minimaal 1,5 keer de tekengrootte en houd je tekstkolom op 50 tot 75 tekens per regel. Koppen bouw je in duidelijke stappen op, zodat het verschil tussen een H2 en een H3 in één oogopslag te zien is.

Die regelafstand van 1,5 komt niet uit de lucht vallen. De internationale toegankelijkheidsrichtlijnen van het W3C schrijven bij succescriterium 1.4.12 Text Spacing voor dat je site het moet aankunnen als een bezoeker de tekstafstanden aanpast naar minimaal:

• 1,5 keer de tekengrootte voor de regelhoogte;
• 2 keer de tekengrootte voor de ruimte tussen alinea’s;
• 0,12 keer de tekengrootte voor de letterafstand;
• 0,16 keer de tekengrootte voor de woordafstand.

Belangrijk detail: je hoeft die waarden niet standaard te gebruiken, maar je pagina mag niet stukvallen als iemand ze instelt. Tekst die dan achter een blok verdwijnt of uit een knop loopt is een fout.

Voor regellengte is de klassieke vuistregel 50 tot 75 tekens per regel, zoals Baymard Institute samenvat. De toegankelijkheidsrichtlijnen houden 80 tekens als bovengrens. Praktisch los je dat op met een max-width op je tekstblok, bijvoorbeeld rond de 70ch. Zonder die grens loopt je tekst op een breed scherm van rand tot rand en verliezen mensen hun plek. Meer over de balans tussen tekst en ruimte lees je in onze blog over hoeveel tekst op een website hoort.

Nog een eis om te kennen: bezoekers moeten kunnen inzoomen tot 200% zonder dat er informatie of functionaliteit verdwijnt. Zet je tekengroottes daarom in relatieve eenheden (rem of em) in plaats van harde pixels, dan gaat dat automatisch goed.

Zo houd je je typografie snel

Lettertypes zijn een van de grootste onnodige boosdoeners voor een langzame website. Elk gewicht is een apart bestand dat gedownload moet worden voordat je tekst goed op het scherm staat. Volgens web.dev raken fonts twee van de Core Web Vitals direct: je tekst verschijnt later (LCP) en je pagina verspringt tijdens het laden (CLS).

Wat je eraan doet:

• Gebruik WOFF2. Dat is het meest gecomprimeerde formaat en werkt in alle moderne browsers. Oudere formaten als TTF en OTF zijn onnodig zwaar.
• Zet font-display goed. Met swap toont de browser direct je tekst in een systeemlettertype en wisselt hij daarna. Je bezoeker ziet meteen iets, ten koste van een klein sprongetje.
• Verklein dat sprongetje met size-adjust. Daarmee laat je het noodlettertype qua afmetingen op je echte lettertype lijken, zodat de pagina minder verspringt.
• Subset je bestanden. Je hebt geen Cyrillisch of Grieks nodig voor een Nederlandse site. Laat die tekens eruit en het bestand wordt flink kleiner.
• Overweeg een variable font. Daarmee zit elk gewicht in één bestand in plaats van vier. Bij CKEditor leverde die overstap een bestandsbesparing van 71% op. Gebruik je maar één of twee gewichten, dan is een variable font juist zwaarder: dan kies je gewoon losse bestanden.
• Laad niet meer dan je gebruikt. Dit is de makkelijkste winst. Veel WordPress-themes en pagebuilders laden standaard tien gewichten waarvan je er drie gebruikt.

Wil je weten hoe je site er nu voor staat? Dan is onze blog over je website snelheid verbeteren een goed startpunt.

Mag je Google Fonts gewoon gebruiken?

Ja, de lettertypes zelf mag je gratis zakelijk gebruiken. Google Fonts zijn open source, dus je mag ze inzetten op je website, in je logo en in je drukwerk. Maar de manier waarop je ze laadt is wel een aandachtspunt: laad je ze rechtstreeks van de servers van Google, dan gaat het IP-adres van je bezoeker mee naar Google. En dat kan volgens de AVG niet zonder toestemming.

Het Landgericht München deed daar op 20 januari 2022 uitspraak over. De rechter oordeelde dat een IP-adres persoonsgegeven is, en dat de website in kwestie de fonts ook zelf had kunnen hosten. De sitehouder moest €100 schadevergoeding betalen aan de bezoeker. Het is een Duitse uitspraak en geen Nederlandse wet, maar de AVG is Europees en de redenering is overal dezelfde.

De oplossing is simpel: download de lettertypes en zet ze op je eigen server. Dat heet zelf hosten. Je bent er in een half uur klaar mee, je bezoeker houdt zijn IP-adres voor zich, en meestal wordt je site er ook nog iets sneller van omdat er één externe verbinding minder nodig is. In WordPress kun je dit vaak met een plugin of via je thema-instellingen regelen.

Kies je een betaald lettertype van een foundry, let dan op de licentievoorwaarden. Webfont-licenties zijn vaak gebonden aan een maximaal aantal pageviews of aan één domein. Loop je daarover heen, dan zit je zonder dat je het merkt in overtreding.

Typografie en toegankelijkheid: wat sinds 2025 verandert

Typografie is geen kosmetiek meer, het is voor veel bedrijven onderdeel van wettelijke eisen. Via de European Accessibility Act gelden sinds 28 juni 2025 strengere toegankelijkheidseisen voor onder andere webshops, banken, vervoerders en telecom. Die eisen zijn gebaseerd op de WCAG-richtlijnen, en daar zitten typografische criteria in.

Wat dat concreet voor je tekst betekent:

• voldoende contrast tussen tekst en achtergrond;
• inzoomen tot 200% zonder dat er iets omvalt;
• de tekstafstanden uit criterium 1.4.12 aankunnen;
• geen informatie die alleen door vormgeving wordt overgebracht;
• koppen die logisch zijn opgebouwd (H1, dan H2, dan H3), want daar navigeren schermlezers op.

Dat laatste punt is meteen SEO-winst, want zoekmachines gebruiken diezelfde structuur. Toegankelijk bouwen en goed vindbaar bouwen liggen dichter bij elkaar dan mensen denken. Twijfel je of jouw site eraan moet voldoen, dan lees je meer op onze pagina over een digitaal toegankelijke website.

Hoe leg je je typografie vast?

Zet je typografische keuzes in je brandbook of je designsysteem: welke lettertypes, welke gewichten, welke groottes per kopniveau, welke regelafstand en waar de bestanden staan. Zonder die vastlegging kiest de volgende partij die iets voor je maakt zijn eigen variant, en dan valt je huisstijl binnen een jaar uit elkaar.

Een werkbare typografische schaal ziet er bijvoorbeeld zo uit: body op 17 pixels met een regelafstand van 1,6, H3 iets groter en vetter, H2 duidelijk groter, H1 het grootst. Het verschil tussen de niveaus moet je zonder nadenken kunnen zien. Zit een H2 te dicht op de bodytekst, dan werkt je hiërarchie niet en scannen mensen je pagina niet meer.

Denk ook aan de details die vaak vergeten worden: knoppen, formulierlabels, foutmeldingen, tabellen en de kleine lettertjes in je footer. Juist daar wordt de tekengrootte vaak te klein gezet. Wij nemen die onderdelen standaard mee in het UX-design van een site, want een formulier dat je niet kunt lezen vult niemand in.

Meer over wat er nog in zo’n document hoort staat in onze blog over wat een brandbook is en wat erin staat.