Een praktische gids voor leesbare typografie op het moderne web

Waarom de meeste websites moeilijker te lezen zijn dan nodig is

De gemiddelde website in 2026 wordt geleverd met een custom font family, zorgvuldig gekozen merkkleuren en een design system dat afstanden tot op de pixel specificeert. Toch staat de lopende tekst—datgene waarvoor de meeste bezoekers daadwerkelijk komen—vaak op 14px in een grijstint met weinig contrast, gezet in een lettertype dat is geoptimaliseerd voor koppen, niet voor alinea’s.

Dit is geen tirade tegen ontwerpers. Het is een herinnering dat leesbaarheid een andere discipline is dan visueel ontwerp, en dat die twee niet altijd samenvallen. Een lettertype dat scherp oogt in een hero section kan op alinealengte vermoeiend zijn. Een kleurenpalet dat goed fotografeert, kan falen bij contrastcontroles. Een lay-out die werkt op een 27-inch monitor kan op mobiel instorten tot een smalle kolom.

Het goede nieuws: leesbare typografie vereist geen diploma typografie. Het vraagt aandacht voor een handvol variabelen die een onevenredig grote impact hebben.

Lettergrootte: groter dan je denkt

De meest voorkomende leesbaarheidsfout op het web is lopende tekst die te klein is. Ontwerpers zetten body copy vaak op 14px of 15px omdat het op desktopschaal "strak oogt", en vergeten vervolgens dat een aanzienlijk deel van de lezers op telefoons zit, vaak bij minder dan ideale verlichting.

Een praktische basislijn voor lopende tekst in 2026:

• Desktop: minimaal 18px, bij voorkeur 20px
• Mobiel: minimaal 16px, bij voorkeur 18px

Deze waarden voelen groot als je kleinere tekst gewend bent, maar ze weerspiegelen hoe mensen daadwerkelijk op schermen lezen. Grotere tekst vermindert oogbelasting, verbetert begrip en maakt je content toegankelijk voor lezers met een lichte visuele beperking die hun browserinstellingen niet hebben aangepast.

Als je design system kleinere tekst voorschrijft, test het dan op een telefoon in zonlicht. Als je moet knijpen met je ogen, is het te klein.

Regelhoogte: geef tekst ruimte om te ademen

Regelhoogte (leading) is de verticale ruimte tussen tekstregels. Te krap, en regels lopen visueel in elkaar over. Te ruim, en het oog raakt de draad tussen regels kwijt.

Voor lopende tekst werkt een regelhoogte van 1.5 tot 1.7 voor de meeste lettertypes. Koppen kunnen krapper (1.1 tot 1.3), maar body copy heeft ademruimte nodig.

De CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Dit is een van de eenvoudigste verbeteringen voor leesbaarheid. Als je lopende tekst nu op line-height: 1.2 staat of een vaste pixelwaarde gebruikt, verander dat dan vandaag.

Regellengte: korter dan je denkt

De optimale regellengte voor lopende tekst is 45 tot 75 tekens per regel, grofweg 8 tot 12 woorden. Regels langer dan 90 tekens maken het lastig voor het oog om terug te vinden naar het begin van de volgende regel. Regels korter dan 40 tekens zorgen voor een hakkerige, gefragmenteerde leeservaring.

De meeste websites doen dit verkeerd door tekst over de volledige breedte van de viewport te laten lopen, vooral op desktop. Een 1920px brede monitor kan meer dan 150 tekens per regel tonen, wat vermoeiend is om te lezen.

De oplossing is een max-width op je tekstcontainer:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

De ch-eenheid wordt te weinig gebruikt, maar is hier perfect voor: hij schaalt mee met de lettergrootte en komt ongeveer overeen met tekenbreedte.

Contrast: niet zo eenvoudig als zwart op wit

WCAG 2.1 specificeert een minimale contrastratio van 4.5:1 voor lopende tekst (AA-niveau) en 7:1 voor verbeterde toegankelijkheid (AAA-niveau). De meeste websites halen dit op papier, maar falen in de praktijk omdat ze lichtgrijze tekst op witte achtergronden gebruiken.

Veelvoorkomende boosdoeners:

• #666666 op #FFFFFF (4.54:1, slaagt ternauwernood)
• #777777 op #FFFFFF (4.47:1, faalt)
• Elke tint lichter dan #767676 op wit (faalt)

Als je design system "text-secondary" als lichtgrijs specificeert, test het dan. De WebAIM contrast checker is de snelste manier om dit te verifiëren.

Dark mode maakt dit nog ingewikkelder. Zuiver witte tekst op zuiver zwart veroorzaakt halation (een gloeiend effect) dat moeilijker te lezen is dan licht gebroken wit op donkergrijs. Een betere aanpak:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Lettertypekeuze: standaardfonts zijn beter dan je denkt

Custom web fonts zijn alomtegenwoordig, maar ze brengen afwegingen met zich mee. Ze voegen latency toe, vergroten het paginagewicht en kunnen rendering blokkeren als ze niet zorgvuldig worden geladen. Voor lopende tekst zijn systeemfonts vaak de betere keuze.

Een robuuste system font stack in 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Dit geeft je San Francisco op macOS/iOS, Segoe UI op Windows en Roboto op Android—allemaal zeer leesbare, professioneel ontworpen lettertypes die onmiddellijk laden.

Als je wel een custom font gebruikt voor lopende tekst, kies er dan een dat is ontworpen voor lang lezen, niet voor display. Vermijd:

• Ultra-light of ultra-bold gewichten voor body copy
• Condensed of extended varianten
• Fonts met een lage x-height (de hoogte van kleine letters)

Test je gekozen lettertype op alinealengte voordat je je eraan committeert.

Responsieve typografie: vloeiende typografische schalen

Vaste lettergroottes schalen niet goed over apparaten heen. Een body font van 20px dat comfortabel is op desktop kan op mobiel te groot aanvoelen.

Fluid typography gebruikt clamp() om de lettergrootte soepel te schalen tussen een minimum en maximum:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Dit schaalt van 16px op kleine schermen naar 20px op grote schermen, met vloeiende interpolatie ertussen. Het is verfijnder dan media query breakpoints en past zich aan elke viewportbreedte aan.

Voor een volledige type scale (koppen, lopende tekst, kleine tekst) genereren tools zoals Utopia vloeiende schalen op basis van je randvoorwaarden.

Alinea-afstand en tekstuitlijning

Twee kleine details die ertoe doen:

1. Alinea-afstand: Voeg ruimte toe tussen alinea’s (margin-block-end: 1em) of gebruik een inspringing op de eerste regel (text-indent: 1.5em), maar niet allebei. De meeste webcontent gebruikt afstand.

1. Tekstuitlijning: Links uitgelijnd (of rechts uitgelijnd voor RTL-talen) is bijna altijd beter leesbaar dan uitgevulde tekst, die ongelijke woordafstanden veroorzaakt tenzij woordafbreking is ingeschakeld. Gecentreerde lopende tekst is moeilijk te lezen en moet worden gereserveerd voor korte passages.

Leesbaarheid in de praktijk testen

Leesbaarheid is niet volledig objectief, maar je kunt het wel testen:

• Lees je eigen content op je telefoon onder verschillende lichtomstandigheden
• Voer een Lighthouse accessibility audit uit om problemen met contrast en lettergrootte te vinden (zie how to read a Lighthouse report voor begeleiding)
• Vraag iemand boven de 50 om een pagina te lezen zonder instellingen aan te passen
• Controleer je analytics op bouncepercentage bij tekstzware pagina’s—als mensen snel vertrekken, kan leesbaarheid een factor zijn

Als je content moeilijk te lezen is, zullen mensen hem niet lezen. Zo eenvoudig is het.

Hoe dit er in de praktijk uitziet

Een leesbare stijl voor lopende tekst in 2026 zou er zo uit kunnen zien:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Dit dekt lettergrootte, regelhoogte, regellengte, contrast en responsieve schaalbaarheid in ongeveer een dozijn regels CSS. Het is niet spannend, maar het werkt.

Wanneer je de regels kunt breken

Deze richtlijnen gelden voor lopende tekst—de alinea’s die mensen lezen om informatie te krijgen. Koppen, bijschriften, UI labels en marketing copy hebben andere randvoorwaarden en kunnen deze regels oprekken.

Maar als iemand naar je site komt om een artikel, een documentatiepagina of een productbeschrijving te lezen, is leesbare typografie niet optioneel. Het is de basisverwachting.