De meeste websites zijn gewoon te klein om goed te lezen
Niet omdat designers het willen. Maar omdat de browserdefinitie "16px is normaal" al zo lang de standaard is dat niemand het meer in twijfel trekt. Ondertussen laat Nielsen Norman Group zien dat 55% van de bezoekers afhaakt als tekst te klein of te moeilijk leesbaar is. Lettergrootte is dus geen esthetische keuze maar een conversiefactor.
In dit artikel geef ik je concrete maten en verhoudingen die werken: voor bodytekst, koppen en mobiel.
Bodytekst: 16px is het minimum, niet het ideaal
De browser gebruikt standaard 16px als basisgrootte. Dat was in de jaren negentig al zo, toen schermen veel kleiner waren. Op een moderne monitor van 27 inch op 1440p voelt 16px klein aan.
Praktische richtlijn:
- 16px: acceptabel voor secondaire tekst, disclaimers, footnotes
- 18px: goed leesbaar op desktop, prettige maat voor langere teksten
- 20px: comfortabel voor blogs en leesgedreven pagina's
Voor marketing- en landingspagina's is 18-20px bodytekst geen overkill. Grotere tekst betekent minder zinnen per scherm, maar bezoekers lezen langer door als ze niet hoeven te turen.
Regelafstand is minstens even belangrijk
Je kunt de perfecte lettergrootte kiezen en toch een onleesbare pagina hebben, als de regelafstand niet klopt. De vuistregel: 1.4 tot 1.7 maal de lettergrootte voor bodytekst.
Concreet met 18px bodytekst:
- 18 x 1.4 = 25.2px regelafstand (minimum)
- 18 x 1.6 = 28.8px regelafstand (comfortabel)
- 18 x 1.7 = 30.6px regelafstand (ruim, prettig voor langere teksten)
In CSS ziet dat er zo uit:
body {
font-size: 18px;
line-height: 1.6;
}
Een line-height zonder eenheid (dus 1.6, niet 1.6em) is de juiste aanpak. Het schaalt automatisch mee als geneste elementen een andere lettergrootte krijgen.
Koppengrootte: gebruik een schaal, geen willekeurige maten
De meeste sites hebben koppen die "ergens groot genoeg" zijn, maar geen duidelijke verhouding tot elkaar hebben. Het probleem: bezoekers scannen je pagina op koppen. Als de visuele hierarchie onduidelijk is, weten ze niet wat belangrijk is.
Gebruik een typografische schaal. Twee bewezen verhoudingen:
Perfect Fourth (1:1.333)
- H3: 20px
- H2: 27px
- H1: 36px
Major Third (1:1.25)
- H3: 20px
- H2: 25px
- H1: 31px
De perfect fourth geeft meer contrast tussen niveaus en werkt goed op informatieve pagina's. De major third is subtieler en past beter bij premium of minimalistische designs. Tools als Material Design type scale of de Type Scale calculator helpen je snel een consistente schaal te genereren.
Regellengte: de 45-75 tekens regel
Misschien wel het meest genegeerde aspect van typografie: hoeveel tekens per regel. Te weinig (onder 45) en de lezer moet voortdurend terug; te veel (boven 75) en het oog verliest de volgende regel.
De optimale regellengte is 45 tot 75 tekens per regel. Voor bodytekst in het Nederlands, met gemiddeld 6 tekens per woord, betekent dat 7-12 woorden per regel.
In de praktijk zet je de maximale breedte van je tekst zo:
p {
max-width: 65ch;
}
De eenheid ch staat voor de breedte van het cijfer 0 in het gekozen lettertype. 65ch is een veilige middenweg.
Mobiel: niet gewoon schalen maar heroverwegen
Het grootste misverstand over mobiele typografie: dat je gewoon dezelfde hiering op een kleiner scherm zet. Maar op mobiel heeft bodytekst meer moeite met korte regels, en grote H1-koppen nemen meteen een derde van het scherm in.
Praktische aanpak voor mobiel:
- Bodytekst: 16-17px (iets kleiner dan desktop, maar nooit minder dan 16px)
- H1: 28-32px (niet de 48-60px die je op desktop gebruikt)
- H2: 22-24px
- Line-height: 1.5-1.6 (iets strakker dan desktop)
Met CSS doet je dat zo:
h1 {
font-size: clamp(28px, 5vw, 52px);
}
clamp() geeft je een minimum, een voorkeursmaat die schaalt op viewport breedte, en een maximum. Dat voorkomt dat koppen op kleine schermen te groot worden en op grote schermen te klein.
Contrast tussen koptekst en bodytekst
Typografie werkt door verschil. Als je H2 slechts 2px groter is dan je bodytekst, ziet de bezoeker geen hierarchie. Als je H1 50% groter is dan je H2, is het meteen duidelijk wat de hoofdboodschap is.
Een vuistregel: de verhouding tussen H1 en bodytekst moet minimaal 2:1 zijn. Met 18px bodytekst heb je dus een H1 nodig van minimaal 36px. Op landingspagina's waar de kop de aandacht moet trekken, ga je gerust naar 48-64px.
Bij Web Design by Kick testen we elke site op de vraag: "Als je de tekst wazig ziet, is dan nog duidelijk wat kop is en wat bodytekst is?" Als het antwoord nee is, dan mist de hierarchie.
Veelgemaakte fouten
Te veel gewichten Meer dan drie font-weights (bv. regular, medium, bold) maakt een design drukker en langzamer (extra netwerk-requests). Beperk je tot twee: een voor bodytekst en een voor koppen.
Uppercase met kleine letters Tekstblokken in hoofdletters zijn 13% langzamer te lezen dan dezelfde tekst in gemengd hoofdlettergebruik. Gebruik uppercase alleen voor labels, knoppen en navigatie-items van maximaal 3-4 woorden.
Lettertype laden zonder fallback
Als je webfont niet laadt, wil je geen FOUT (Flash Of Unstyled Text). Zorg altijd voor een passende fallback stack: font-family: 'Inter', system-ui, -apple-system, sans-serif;. De system-fonts zijn goed ontworpen en laden razendsnel.
Conclusie
Typografie is geen detailkwestie. De combinatie van lettergrootte (minimaal 18px voor bodytekst), regelafstand (1.4-1.7), een consistente koppenschaal en de 45-75 tekens-regel bepaalt of bezoekers je site willen lezen. Begin met die vier punten en je hebt al betere typografie dan de meeste MKB-websites.