Website typografie tips: zo maak je je website scanbaar én prettig leesbaar

Een goed ontwerp begint bij goede typografie. Het juiste lettertype, de juiste witruimte en een slimme hiërarchie maken je website niet alleen mooier, maar vooral duidelijker. Want hoe makkelijker je content te scannen is, hoe sneller je bezoeker vindt wat hij zoekt. En blijft. Maar waar let je op? En welke keuzes maken echt het verschil als het gaat om typografie voor een scanbare website? Wij geven 5 praktische tips voor typografie die werkt voor iedereen.

In dit artikel

• Wat is website typografie voor een scanbare website?
• Waarom is scanbaarheid zo belangrijk?
• 1. Kies een goed leesbaar lettertype
• 2. Zorg voor voldoende kleurcontrast
• 3. Houd alinea’s kort en gebruik duidelijke koppen
• 4. Gebruik opsommingen of genummerde lijsten
• 5. Let op uitlijning en witruimte
• Veelgestelde vragen over website typografie

Wat bedoelen we met website typografie voor een scanbare website?

Typografie draait om meer dan alleen een mooi lettertype. Het is de kunst van het vormgeven en structureren van tekst — denk aan lettertypes, regelafstand, witruimte en uitlijning. Al deze elementen samen bepalen hoe een webpagina eruitziet én aanvoelt. Voor websites is leesvriendelijke website-typografie extra belangrijk: teksten moeten niet alleen goed leesbaar zijn, maar vooral makkelijk scanbaar. Zo vindt je bezoeker razendsnel wat hij zoekt.

Waarom is scanbaarheid belangrijk bij website typografie?

Bezoekers lezen websites anders dan boeken of artikelen. Ze willen snel vinden wat ze zoeken zonder de hele pagina door te ploegen. Daarom scannen ze eerst de content: hun ogen glijden over de pagina en blijven hangen bij koppen, opvallende woorden en visuele ankerpunten.

Uit onderz (opent in nieuw tabblad)oek van de Nielsen Norman Group blijkt dat 79% van de gebruikers teksten op een website scant, terwijl slechts 16% echt alles woord voor woord leest. Pas als ze denken: “dit is relevant voor mij”, gaan ze dieper lezen. Tot die tijd negeren ze alles wat niet direct aansluit bij hun informatiebehoefte. Typografie voor een scanbare website speelt hierbij een belangrijke rol.

Waarom typografie essentieel is voor een scanbare website

Hoe scanbaar je pagina is, bepaalt voor een groot deel de gebruiksvriendelijkheid van je website. Hoe sneller bezoekers vinden wat ze zoeken, hoe prettiger hun ervaring, en hoe groter de kans dat ze hun doel bereiken.

Dat is cruciaal op websites waar iets te regelen valt. Denk aan zorginstellingen, scholen of gemeenten. Bezoekers willen daar geen lange teksten lezen, maar snel een afspraak maken, informatie vinden of iets aanvragen. Webtypografie voor gebruiksvriendelijkheid helpt om deze doelen sneller te bereiken.

Wij geven je 5 praktische tips die helpen om je webteksten beter scanbaar te maken, gebaseerd op UX-richtlijnen én eisen voor digitale toegankelijkheid. Bij elk punt laten we zien hoe je het toepast, met concrete voorbeelden van websites die het goed doen.

Tip 1. Kies een goed leesbaar lettertype

De typografie die je kiest, heeft direct invloed op de scanbaarheid, uitstraling én effectiviteit van je website. Het bepaalt hoe prettig je content leest, vooral op scherm. Kies dus niet zomaar iets wat er ‘mooi uitziet’, maar test verschillende opties en stem je keuze af op je doelgroep.

Sans of serif?

Voor goede typografie voor een scanbare website zijn schreefloze lettertypes (sans serif) vaak de beste keuze. Ze ogen rustiger op het scherm en zijn makkelijker te scannen, vooral op mobiel. Uit onderzoek van Dawn Shaikh blijkt dat mensen schreefloze lettertypes als leesbaarder en aantrekkelijker ervaren in digitale communicatie. Shaikh ontdekte dat lezers van digitale communicatie schreefloze lettertypen leesbaarder en aantrekkelijker vinden, hoewel het effect klein was (“The Effects of Typeface on the Perception of Email” door Dawn Shaikh, 2007). Een schreefloos lettertype leest dus net iets prettiger. Enkele goede voorbeelden hiervan zijn Roboto, Lato en Open Sans. 

Let op: test altijd hoe je lettertype eruitziet in verschillende browsers en op verschillende apparaten. Wat op desktop goed werkt, kan op mobiel minder leesbaar zijn. Een compacter font zoals Roboto Condensed kan bijdragen aan typografie voor een scanbare website, omdat je meer informatie kwijt kunt in beperkte ruimte, zonder in te leveren op leesbaarheid.

Waarom geen schreeflettertype op het web?

Een schreeflettertype heeft kleine lijntjes aan de uiteinden van letters. In drukwerk helpt dat om de regels beter te volgen. Maar online, waar teksten anders zijn opgebouwd met pixels en variërende resoluties, kunnen die schreven juist voor ruis zorgen. Daarom lees je op het web vaak fijner met een strak, schreefloos lettertype.

Let op de afstand tussen letters en woorden

De ruimte tussen letters en woorden, ook wel spatiëring genoemd, lijkt een detail, maar heeft grote invloed op de leesbaarheid van je website. Vooral voor mensen met lagere taalvaardigheden of leesproblemen maakt het een wereld van verschil. Een goede letterafstand helpt hen om woorden sneller te herkennen en zinnen beter te volgen.

Soorten spatiëring 

Kerning
Dit is het verfijnen van de ruimte tussen specifieke letterparen. Denk aan combinaties als ‘AV’ of ‘To’. Door hier iets meer of minder ruimte toe te voegen, oogt de tekst rustiger.

Tracking
Hierbij pas je de ruimte tussen alle letters in een tekstblok aan. Meer ruimte betekent: meer adem voor de lezer. Zeker bij langere teksten of kleine lettergroottes kan dit de leesbaarheid flink verbeteren.

Tip: test verschillende instellingen en kies voor een lettertype waarbij de standaard spatiëring al prettig leest. Dat voorkomt onnodige aanpassingen achteraf.

Een voorbeeld van tracking 

Sommige lettertypes, zoals Roboto Condensed, zijn van nature compacter. Daardoor ogen ze strak en zakelijk — en passen ze goed bij contentblokken waar ruimte schaars is, zoals op mobiele schermen of in kolommen. Een bijkomend voordeel: langere titels blijven binnen de perklijnen en vallen niet buiten beeld.

Een compacter lettertype betekent ook dat je meer tekst op één regel kwijt kunt. De website van NHG laat goed zien hoe dit werkt in de praktijk.
Maar let op: de juiste spatiëring is altijd afhankelijk van je doelgroep én het doel van je website. Te weinig ruimte zorgt voor visuele ruis (letters die tegen elkaar plakken). Te veel ruimte oogt rommelig of onprofessioneel.

Onze tip: test de leesbaarheid met échte gebruikers, zeker als je doelgroep moeite heeft met lezen. Een kleine aanpassing in letterafstand kan een groot verschil maken in toegankelijkheid en gebruiksgemak.

Gebruik veilige webfonts

Niet elk lettertype wordt overal goed weergegeven. Sommige browsers of apparaten ondersteunen specifieke fonts niet, waardoor ze automatisch overschakelen naar een vervangend (vaak ongewenst) lettertype.
Wil je dat je website er op elk apparaat consistent uitziet? Kies dan voor veilige webfonts: lettertypen die standaard beschikbaar zijn op de meeste systemen zoals Microsoft en iOS. Denk aan klassiekers als Arial, Verdana of Georgia. Deze fonts zorgen voor een betrouwbare weergave en verkleinen de kans op layoutproblemen. Vooral belangrijk bij informatieve websites of platforms waar duidelijkheid en consistentie voorop staan.

Let op: zelfs als je kiest voor een modern font via bijvoorbeeld Google Fonts, is het slim om een veilig font als fallback in je CSS op te nemen.

Beperk het aantal lettertypen

Gebruik op je website bij voorkeur niet meer dan twee verschillende lettertypen voor een goed scanbare webtekst. Dat zorgt voor rust én herkenbaarheid. Eén voor de lopende tekst en één om accenten te leggen, bijvoorbeeld in koppen, quotes of call-outs. Kies voor contrast tussen beide fonts: combineer bijvoorbeeld een strak en modern lettertype met een iets expressiever font voor titels. Zo worden koppen visuele ankerpunten waar bezoekers snel op kunnen scannen.

Gebruik je meer dan twee lettertypes? Dan wordt de tekst al snel onrustig. Het brein moet dan steeds schakelen en zoekt onbewust naar de betekenis van elke stijlwisseling. Dat maakt het moeilijker om de inhoud te volgen. Voeg dus alleen een extra lettertype toe als het echt iets toevoegt aan de boodschap.

Minder fonts = meer focus. Een beperkt aantal lettertypen draagt bij aan een professionele uitstraling én een prettige gebruikerservaring.

Beperk het aantal fonts per lettertype

Niet alleen het aantal lettertypen, maar ook het aantal fonts binnen een lettertype heeft invloed op je website. Elk fontvariant, bijvoorbeeld bold, italic of light, is een apart bestand dat de browser moet laden. Hoe meer fonts je gebruikt, hoe meer bestanden geladen worden. En dat gaat ten koste van de laadsnelheid.

Ons advies: gebruik maximaal twee fonts per lettertype. Zo houd je je website snel én overzichtelijk.

Wat is een font precies? 

Een font geeft het gewicht en de stijl van een lettertype aan. Binnen een lettertype (zoals Roboto) kies je bijvoorbeeld uit:

• Light of Thin (extra dun)
• Regular of Medium (normaal)
• Semibold of Bold (dikgedrukt)
• Italic (schuin)

Een font family is de verzamelnaam voor al deze varianten. Kies dus bewust: welke gewichten heb je écht nodig? Vaak is Regular en Bold al voldoende.

Minder fonts = snellere laadtijd = betere gebruikerservaring.

Gebruik decoratieve lettertypen met mate

Decoratieve of sierlijke lettertypen, vaak geïnspireerd op handschrift, kunnen je website een unieke uitstraling geven. Maar let op: ze zijn meestal lastig leesbaar, vooral in kleine formaten of op mobiele schermen.
Toch kunnen ze een functie hebben. Past zo’n stijl bij je merk? Gebruik decoratieve fonts dan spaarzaam en bewust. Bijvoorbeeld voor een quote of accentzin.

Zorg er altijd voor dat de tekst groot genoeg is (minstens formaat H1 of H2), zodat het leesbaar blijft — ook voor bezoekers met een visuele beperking.

Less is more: decoratieve lettertypes zijn bedoeld voor sfeer, niet voor inhoud.

Wel of geen tekst volledig in hoofdletters

Tekst in HOOFDLETTERS trekt aandacht maar kan al snel te veel van het goede zijn. Lezen in alleen hoofdletters kost meer inspanning: onze hersenen herkennen woorden sneller aan de vorm van kleine letters (Rayner et al. (2006) “Eye Movements and Information Processing During Reading”). Volledige hoofdletterzinnen lezen dus trager én voelen vaak schreeuwerig aan.

Toch kun je hoofdletters functioneel inzetten, zolang je het beperkt tot korte stukken tekst. Denk aan:

• Acroniemen en afkortingen zoals WHO of AVG
• Kopjes of hoofdstuktitels, bijvoorbeeld: HOOFDSTUK 1
• Subtiele accenten in korte titels of quotes
• Namen bij quotes, bijvoorbeeld: – JAN JANSEN

Tip: gebruik hoofdletters nooit voor lopende tekst. Zo houd je je website vriendelijk, leesbaar en toegankelijk voor iedereen.

Zorg voor een voldoende grote lettergrootte

Een tekst kan nog zo goed geschreven zijn, als de letters te klein zijn leest niemand ’m. Daarom is een minimale lettergrootte essentieel voor leesbaarheid en toegankelijkheid. Hanteer minimaal 16 pixels voor lopende tekst. Dit is op de meeste schermen, ook mobiel, goed leesbaar voor een brede groep bezoekers, inclusief mensen met een visuele beperking.

En hoe zit het met koppen?

Koppen moeten duidelijk groter zijn dan de bodytekst. Ze geven structuur aan je pagina en maken de inhoud makkelijker scanbaar. Gebruik deze vuistregels:

• H1: 2em tot 3em van de basisgrootte
• H2: 1.5em tot 2em
• H3: 1.25em tot 1.5em

Let op: test je typografie altijd op verschillende apparaten en met echte gebruikers. Want wat op desktop prettig leest, kan op mobiel nét te klein zijn.

Wat is het verschil tussen pixels (px) en EM?

Bij het ontwerpen van websites kom je verschillende maateenheden tegen. De twee belangrijkste voor typografie: pixels (px) en EM. Ze geven allebei grootte aan, maar werken net even anders.

Pixels (px)
Pixels zijn vaste eenheden. Ze geven een exacte grootte aan, handig voor grafische elementen, maar minder geschikt voor responsieve websites. Want px schaalt niet automatisch mee met de instellingen van de gebruiker. Wat op jouw scherm goed oogt, kan op mobiel nét te klein zijn.

EM
EM is een relatieve eenheid. 1EM staat gelijk aan de huidige lettergrootte van het element. Stel: de bodytekst is 16px, dan is 2EM = 32px. EM schaalt dus automatisch mee met de context én voorkeuren van de gebruiker. Dat maakt het perfect voor responsieve en toegankelijke ontwerpen.

Voordeel: Als je titels instelt op 2EM, blijven ze altijd twee keer zo groot als de bodytekst, ook als iemand inzoomt. Dat zorgt voor een consistente hiërarchie én meer controle voor de gebruiker.

Wil je meer weten? Lees het artikel van Digitaal Toegankelijk over het verschil tussen pixels en EM.

Tekstgrootte en digitale toegankelijkheid 

De WCAG (Web Content Accessibility Guidelines) schrijven geen exacte lettergrootte voor, maar stellen wel: gebruikers moeten tekst kunnen vergroten tot 200% zonder verlies van functionaliteit of leesbaarheid.

De meeste browsers bieden standaard zoommogelijkheden. Maar écht toegankelijke websites bieden deze optie zelf aan, op een laagdrempelige manier. Een goed voorbeeld is de website van gemeente Alkmaar: daar staat op elke pagina een duidelijke T-knop waarmee bezoekers eenvoudig de tekstgrootte kunnen aanpassen.

Ons advies: geef bezoekers de regie. Met een simpele functie voor tekstvergroting verbeter je direct de gebruiksvriendelijkheid én toegankelijkheid van je site.

Tip 2. Zorg voor voldoende (kleur)contrast

Goede leesbaarheid begint bij voldoende contrast tussen tekst en achtergrond. Donkere tekst lees je het beste op een lichte achtergrond, en andersom. Te weinig verschil tussen de kleuren maakt je content moeilijk leesbaar, vooral voor mensen met een visuele beperking.

Let extra op bij tekst over een afbeelding: dat ziet er soms mooi uit, maar gaat vaak ten koste van de leesbaarheid. Gebruik het alleen als het contrast écht in orde is.

Wat zegt de WCAG over kleurcontrast?

De Web Content Accessibility Guidelines (WCAG) geven duidelijke normen:

• Normale tekst: minimaal 4,5:1 contrastverhouding
• Grote tekst (groter dan 18pt): minimaal 3:1

Wil je zeker weten dat je goed zit? Gebruik tools als accessible-colors.com of colourcontrast.cc om je kleurgebruik te testen. En vergeet het contrast in je logo niet, ook die tekst moet helder en toegankelijk zijn.

Goed kleurcontrast = betere leesbaarheid én hogere toegankelijkheidsscore.

Tip 3. Maak je tekst scanbaar met korte alinea’s en duidelijke koppen

Houd alinea’s kort en krachtig

Lange tekstblokken schrikken af. Door je content op te delen in compacte alinea’s, nodig je uit tot lezen. Bovendien helpt het gebruikers focussen op de kern.

• Voor informatieve of actiegerichte pagina’s: 3–4 regels per alinea
• Voor blogs of achtergrondartikelen: 4–7 regels is ideaal

Zo voelt het lezen licht en behapbaar, precies wat je wilt op het web.

Gebruik koppen als visuele ankerpunten

Koppen en subkoppen (H1, H2, H3) zijn dé manier om structuur aan te brengen. Ze laten bezoekers in één oogopslag zien waar een sectie over gaat en helpen ze snel naar de juiste informatie te navigeren. Goed gebruik van koppen is ook belangrijk voor SEO: zoekmachines gebruiken ze om je inhoud beter te begrijpen.

Extra tip: geef koppen eventueel een afwijkende kleur, zodat ze er nog meer uitspringen, zolang je het kleurcontrast én de visuele hiërarchie maar bewaakt.

Meer visuele ankerpunten dan alleen koppen

Koppen zijn belangrijk, maar er zijn meer manieren om je content visueel aantrekkelijk én beter scanbaar te maken. Met slimme opmaak leid je het oog van de lezer intuïtief naar de juiste plek.

Enkele effectieve elementen:

• Toptakentegels
  Breng de belangrijkste taken, zoals afspraken maken of iets aanvragen, direct in beeld via opvallende tegels. Voeg iconen toe voor extra herkenbaarheid. Zie bijvoorbeeld het ontwerp van NLdigital.
• Contentblokken (cards)
  Gebruik kaarten om te linken naar onderliggende pagina’s. Ze geven structuur én zetten aan tot doorklikken.
• Gekleurde stroken (hero’s)
  Breek lange teksten op met een gekleurde achtergrondstrook. Zo oogt je pagina lichter en behapbaarder, wat uitnodigt tot verder lezen.
• Quotes of highlights in kleur
  Zet een krachtige quote of belangrijke boodschap los van de lopende tekst. Een subtiele kleur maakt het extra opvallend, maar houd het rustig en consistent.

Let op: gebruik visuele elementen ondersteunend. Te veel afleiding doet afbreuk aan de leeservaring.

Tip 4. Gebruik opsommingen voor overzicht en actie

Opsommingen maken je tekst direct overzichtelijker. In plaats van lange volzinnen krijgt de lezer compacte, behapbare stukjes informatie. Dat leest sneller én prettiger. Daarnaast zet het de bezoeker aan tot actie: uit een onderzoek van AGConsult bleek dat opsommingen zorgden voor 78% meer kliks vergeleken met volzinnen.  

Wanneer gebruik je opsommingstekens of cijfers?

Gebruik bullets (•) voor losse punten zonder volgorde. Handig voor:

• Kernpunten samenvatten;
• Belangrijke voorwaarden of voordelen;
• Lijstjes met links of vervolgstappen.

Gebruik genummerde lijsten alleen als de volgorde ertoe doet, bijvoorbeeld bij stappenplannen of prioriteiten. Zoals ook beschreven door Poort in Schrijven voor het web.

Slimme toepassing van typografie voor scanbare websites

Voor secundaire informatie, zoals veelgestelde vragen of aanvullende uitleg bij een proces, is een uitklapmenu ideaal. De pagina blijft overzichtelijk, en de bezoeker klikt zelf open wat relevant is.

Let wel op: is de informatie essentieel om een taak te voltooien? Zet die dan niet in een uitklapmenu, maar gewoon in de hoofdtekst. Belangrijke informatie moet direct zichtbaar zijn, zonder extra handelingen.

Slim inzetten dus: wat ondersteunend is mag verbergen, wat essentieel is moet opvallen.

Of kies voor tabbladen bij procesinformatie

Ook tabbladen zijn handig om secundaire informatie compact en overzichtelijk aan te bieden. Elk tabblad bevat een eigen stukje content, bijvoorbeeld de stappen in een aanvraagproces. De gebruiker klikt eenvoudig door zonder te verdwalen in lange pagina’s.
Een goed voorbeeld is Weener XL, waar tabbladen worden ingezet om per stap duidelijke uitleg te geven bij het proces. Zo houd je structuur én geef je de gebruiker de regie over wat hij wil lezen.

Let op: gebruik tabbladen alleen voor aanvullende informatie. Is de inhoud cruciaal voor het uitvoeren van een taak? Dan hoort die gewoon in de hoofdtekst.

Verhoog de scanbaarheid met een ankermenu

Bij langere pagina’s, zoals blogs of kennisartikelen, is een ankermenu een slimme toevoeging. Dit is een klikbare inhoudsopgave bovenaan de pagina, waarmee bezoekers direct naar de juiste sectie kunnen springen.

Zo hoeven ze niet te scrollen of zoeken, maar navigeren ze snel naar wat voor hen relevant is. Organisaties als DDMA en gemeente Leiden gebruiken dit effectief om hun content beter toegankelijk te maken.

Praktisch én gebruiksvriendelijk: een ankermenu verhoogt de scanbaarheid, houdt je pagina overzichtelijk én verbetert de gebruikerservaring op desktop en mobiel.

Tip 5. Kies bewust voor de juiste uitlijning en witruimte

Welke tekstuitlijning kies je?

De manier waarop je tekst uitlijnt en witruimte gebruikt, heeft directe invloed op hoe prettig en duidelijk je content leest. Het lijkt een detail, maar het bepaalt mede hoe gebruikers door je pagina navigeren. Hier zijn enkele overwegingen die je kunnen helpen bij het maken van je keuze: 

Links uitlijnen: de beste keuze voor leesbaarheid 

Voor langere teksten is links uitlijnen de standaard. Dat leest het makkelijkst, omdat het oog bij elke regel op dezelfde plek begint. Bovendien oogt het professioneel en zorgt het voor rust en consistentie in je layout.

Ideaal voor:

• Artikelen en blogs;
• Informatieve pagina’s;
• Bezoekers die snel willen scannen.

Gecentreerde tekst: opvallend, maar spaarzaam gebruiken

Centreren geeft visuele impact en werkt goed voor korte zinnen, quotes of titels. Maar voor langere teksten is het minder geschikt, het breekt het natuurlijke leesritme en maakt het moeilijker om regels te volgen. Gebruik gecentreerde tekst alleen als je echt de aandacht wilt trekken, zoals bij:

• Slogans;
• Quotes;
• Uitgelichte statements.

Waar zet je actieknoppen op een webpagina?

Wil je dat bezoekers actie ondernemen? Zet je primaire CTA’s (Call to Action) zoals ‘Vraag aan’, ‘Plan een afspraak’ of ‘Download’ dan altijd in de lopende tekst. Niet in de zijbalk.

Waarom? Uit onderzoek van AGConsult blijkt dat gebruikers minder aandacht besteden aan de rechterkant van detailpagina’s, zeker bij blogs of ‘direct regelen’-pagina’s. De focus ligt op de hoofdtekst.

Secundaire content, zoals gerelateerde artikelen of downloads, kun je beter onder de hoofdinhoud plaatsen. Zo blijft de aandacht waar die moet zijn: bij de kern van je boodschap.

Gebruik witruimte bewust voor rust en leesbaarheid

Witruimte is geen verspilde ruimte, het is een krachtig hulpmiddel om je content overzichtelijk en prettig leesbaar te maken. Het helpt je bezoeker om informatie sneller te verwerken en beter te begrijpen.

Regelafstand:

Een algemene richtlijn voor de regelafstand is: 1,5 tot 2 keer de letterhoogte. Dit is een goede vuistregel voor de meeste situaties. Bijvoorbeeld: als je lettergrootte 16px is, dan is een regelafstand van 24px tot 32px een goede optie.

Tussen alinea’s:

Gebruik voldoende ruimte om tekstblokken visueel van elkaar te scheiden. Een richtlijn: 80–100 pixels tussen alinea’s. Dit helpt bij het groeperen van inhoud en vergroot de scanbaarheid.

Extra tip: Zorg voor meer witruimte boven een kop dan eronder. Zo is direct duidelijk bij welke alinea de kop hoort.

Blijf consistent en blijf verbeteren

Tot slot: zorg voor een consistente tekstopmaak op je hele website. Gebruik vaste lettertypes, kleuren en kopstijlen. Zo weten bezoekers precies waar ze aan toe zijn, op elke pagina. Dat verhoogt het vertrouwen én de gebruiksvriendelijkheid.

Test, leer en optimaliseer

Geen doelgroep is hetzelfde. Wat voor de één werkt, slaat bij de ander misschien niet aan. Daarom is testen zo belangrijk. Probeer verschillende opmaken en verzamel feedback van echte gebruikers. Zo ontdek je wat écht werkt voor jouw bezoekers, en kun je gericht de typografie voor de scanbaarheid van jouw website optimaliseren.

Veelgestelde vragen over website typografie

Hulp nodig om jouw typografie voor een scanbare website te verbeteren?

Neem contact (opent in nieuw tabblad) met ons op. We denken graag met je mee.