# Typografie voor je website: welke lettergroottes echt werken

## 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:

```css
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](https://m3.material.io/styles/typography/type-scale-tokens) 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:

```css
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:

```css
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.

## Bronnen

- [Nielsen Norman Group - Legibility, Readability, and Comprehension](https://www.nngroup.com/articles/legibility-readability-comprehension/)
- [Material Design - Type scale](https://m3.material.io/styles/typography/type-scale-tokens)
- [web.dev - Best practices for fonts](https://web.dev/articles/font-best-practices)
- [MDN - CSS font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
- [Google Fonts Knowledge - Choosing type](https://fonts.google.com/knowledge/choosing_type)

---

Bron: https://webdesign.bykick.nl/blog/typografie-voor-je-website-welke-lettergroottes-werken