Lettertype-keuze voor Nederlandse taal
Hoe je het juiste lettertype selecteert dat Nederlandse speciale karakters goed rendert en lange woorden netjes afhandelt.
Lees artikelTypografische hiërarchie op mobiel
Hoe je koppen, broodtekst en bijschriften organiseert zodat Nederlandse sites ook op compacte schermen goed leesbaar blijven. We laten je zien hoe je een duidelijke visuele structuur bouwt zonder afbreuk te doen aan het design.
Waarom hiërarchie op mobiel anders is
Op mobiel werk je met veel kleinere ruimte. Je kan niet zomaar je desktop-design omlaag schalen. De typografische hiërarchie — het verschil tussen koppen, tussenkoppen en gewone tekst — dat’s wat gebruikers helpt om snel te scannen en te begrijpen wat belangrijk is.
Veel websites gooien gewoon alles op dezelfde grootte en hopen dat het werkt. Spoiler: het werkt niet. Gebruikers raken gefrustreerd, lezen minder en verlaten je site sneller. Het goede nieuws? Met een paar gerichte keuzes zorg je ervoor dat je content duidelijk is, zelfs op een klein scherm.
We gaan je laten zien hoe dat precies werkt. Welke maten je moet gebruiken, hoe je contrast inzet, en hoe je witruimte je vriend is — niet je vijand.
De drie niveaus van hiërarchie
- H1 — Paginatitel: Grootste, meest opvallend
- H2/H3 — Secties: Tussenliggende maat, duidelijk ondergeschikt
- Body tekst: Kleinste, maar nog steeds leesbaar
Font-maten die echt werken op mobiel
De standaardformule? Die werkt niet meer. Je kan je desktop maten niet zomaar door twee delen. Wat je nodig hebt is een systeem dat schaal past aan het viewport.
Voor H1 (paginatitel) start je op mobiel rond de 24-28px. Ja, dat voelt klein. Maar combineer dat met proper regelhoogte en witruimte, en het voelt ruim. Op tablet groei je naar 32-36px. Op desktop mag het 42-48px zijn.
H2 (secties) werkt goed op 18-20px mobiel, 24-28px tablet, 32-36px desktop. En je broodtekst? 16px op mobiel, 17-18px op groter scherm. Dat voelt beter dan je denkt — het gaat niet om de absolute grootte, maar om het contrast tussen de niveaus.
De truc is: gebruik clamp() in CSS zodat de schaal vloeiend meegaat met het viewport. Je doet het werk maar één keer, en het ziet er goed uit overal.
Informatie over deze gids
Deze gids biedt educatief inzicht in typografische best practices. De specifieke waarden (font-maten, regelhoogtes) zijn aanbevelingen gebaseerd op gebruiksvriendelijkheidsonderzoek. Jouw project kan andere vereisten hebben afhankelijk van doelgroep, content-type en merkidentiteit. Test altijd met echte gebruikers en pas aan waar nodig.
Regelhoogte en witruimte — je geheime wapens
Font-maat is maar de helft van het verhaal. Regelhoogte (line-height) bepaalt hoeveel ruimte tussen de tekstregels zit. Op mobiel? Zorg dat dit minstens 1.5 is (dus 16px tekst 1.5 = 24px regelhoogte). Op desktop mag het wat losser — 1.6 of 1.7 werkt prima.
Waarom? Dichte regels voelen benauwend. Je ogen weten niet goed waar ze moeten kijken. Met meer ruimte ertussen scant je makkelijker en leest sneller. Vooral voor Nederlands met lange samengestelde woorden — die ruimte helpt echt.
Letter-spacing (spatiëring tussen letters) zet je voorzichtig in. Voor body-tekst laat je dit gewoon op auto staan. Maar voor koppen, vooral op mobiel waar ze smaller zijn, kan wat extra spatiëring ze eleganter maken. Niet veel — 0.5px tot 1px is genoeg.
En alinea’s? Zorg voor voldoende ruimte tussen ze. Minstens 1em (dus als je tekst 16px is, zit er 16px tussen alinea’s). Meer voelt beter dan minder.
Contrast en kleur voor duidelijkheid
Je koppen moeten eruitzien als koppen. Het makkelijkste? Gebruik een ander kleur of gewicht. Veel sites maken alles grijs en verwachten dat het werkt. Spoiler: het werkt niet.
Donkergrijze koppen op lichte achtergrond — dat werkt. Of zwart voor maximaal contrast. Zorg dat je H1 echt opvalt. H2 mag wat subtieler, maar moet nog steeds duidelijk anders zijn dan body-tekst. Body zelf? Donkergrijs (niet zwart) is comfortabel om lange tijd te lezen.
Op mobiel is contrast nog belangrijker omdat je scherm kleiner is. Je hebt minder real estate. Dus je contrast moet hard werken. Zwart tekst op wit werkt. Donkergrijs (#333 of vergelijkbaar) op wit werkt ook. Maar grijs op grijs? Nee. Vergeet het.
Fontgewicht helpt ook. Als je koppen bold maakt en je broodtekst regular, hoef je ze niet groter te maken dan je zou denken. Dat scheelt waardevolle pixels op mobiel.
Stap-voor-stap: je typografische systeem opzetten
1
Bepaal je basismaten
Kies een basisgrootte (vaak 16px op mobiel). Alle andere maten groeien daarvan uit. Schrijf het op.
2
Stel regelhoogte in
Body-tekst: minstens 1.5x de font-grootte. Koppen: 1.2 tot 1.3 werkt goed. Test met echte Nederlandse woorden.
3
Voeg contrast toe
Zorg dat koppen duidelijk anders zijn — groter, dikker, donkerder of combinatie. Geen grijstinten.
4
Witruimte gebruiken
Ruimte tussen secties, rond afbeeldingen, en rond koppen. Dit helpt je hiërarchie “ademen”.
5
Test op echt mobiel
Niet in je browser. Op een telefoon. Vraag mensen of ze makkelijk kunnen lezen en scannen.
6
Itereer en verfijn
Misschien werkt de maat iets groter beter. Of wat meer regelhoogte. Kleine aanpassingen, groot effect.
Nederlandse letters en speciale karakters
Je mag dit niet vergeten: Nederlands heeft speciale karakters. De ij-ligatie, accenten op hoofdletters (Ë, Ö). Niet alle lettertypen behandelen deze goed.
Als je een lettertype kiest, controleer je of deze karakters goed renderen. Typ “Ijsselmeer” en “Één” in je design tool en kijk of het eruitziet zoals het hoort. Rare spatiëring of lelijke ij? Dat lettertype is niet geschikt voor Nederlands.
Ook lange samengestelde woorden als “webdesignervaring” — zorg dat je letter-spacing en regelhoogte hier mee kunnen omgaan. Als zo’n woord op het einde van een regel moet afbreken, moet het leesbaar blijven.
Dus: test met échte Nederlandse teksten. Niet met “Lorem ipsum”. Met woorden die jij gebruikt in je site.
Typografie op mobiel is geen raketwetenschap
Je hoeft niet alles perfect te hebben. Je hebt gewoon nodig: duidelijke font-maten die opschalen, genoeg regelhoogte, contrast dat werkt, en ruimte om te ademen. Dat’s het. Voeg daar testen met echte gebruikers bij, en je bent klaar.
Veel sites zien er op mobiel raar uit omdat niemand de tijd neemt voor typografie. Jij doet het wél. En dat maakt een groot verschil in hoe mensen jouw content ervaren.
Wil je dieper ingaan op typografie voor Nederlands webdesign?
Verken alle typografie artikelen
Meer over typografie
