Typografie voor B2B-websites: lettertypes die vertrouwen wekken

Goede typografie op een website wekt vertrouwen nog voor iemand begint te lezen.

Voor een B2B-site betekent dat: weinig, goed gekozen lettertypes, een heldere groottehierarchie en genoeg contrast en ruimte om op scherm te lezen.

Het oordeel: typografie voor je website is geen smaakkwestie achteraf. Het is een van de eerste signalen waarmee een bezoeker beslist of je betrouwbaar overkomt.

Dat klinkt eenvoudig, maar precies hier gaan veel zakelijke sites de mist in.

Hieronder: hoe je lettertypes kiest, koppelt, schaalt en leesbaar maakt, zodat je site geloofwaardig oogt en je inhoud converteert.

Waarom bepaalt typografie of een bezoeker je vertrouwt?

Typografie is het eerste wat een bezoeker visueel verwerkt, vaak nog voor hij echt begint te lezen.

Een rommelig of slecht gekozen lettertype voelt meteen amateuristisch. Een verzorgde, consistente typografie straalt professionaliteit uit.

In B2B telt dat dubbel

Je vraagt mensen om je een offerte-aanvraag, een demo of een meeting toe te vertrouwen.

Die beslissing begint bij een gevoel van betrouwbaarheid.

Vertrouwen ontstaat onbewust

Een bezoeker denkt niet “dit lettertype past goed bij dit merk”. Hij voelt gewoon dat de site klopt of niet klopt.

Consistente typografie betekent: elke pagina gebruikt dezelfde fonts, groottes en stijlen. Dat signaleert aandacht voor detail.

En aandacht voor detail vertaalt een bezoeker door naar hoe je waarschijnlijk ook met klanten omgaat.

Typografie is daarmee een van de bouwstenen om vertrouwen te wekken op je B2B-website, naast bewijs, duidelijkheid en een verzorgd ontwerp.

Welke lettertypes passen bij een zakelijke website?

Het beste lettertype voor een B2B-website is rustig, helder en goed leesbaar op scherm. Niet een die opvalt.

Voor zakelijke geloofwaardigheid kies je doorgaans een neutraal, robuust lettertype. Geen uitgesproken karakter dat de aandacht van je boodschap afleidt.

Schreefloos of schreef?

Grofweg heb je twee families:

• Schreefloos (sans-serif): zonder dwarsstreepjes aan de letteruiteinden; oogt modern, helder en technisch
• Schreef (serif): mét die streepjes; straalt traditie, autoriteit en degelijkheid uit

Schreefloze letters lezen vlot op scherm. Schreefletters passen goed bij sectoren zoals juridische dienstverlening, finance of consultancy.

Geen van beide is “beter”. Het hangt af van wat je merk wil uitstralen, en bij wie je geloofwaardig wil overkomen.

Hoe zo’n verzorgde uitstraling concreet werkt, zie je op een website voor een accountantskantoor. Daar maken transparante tarieven en certificeringen mee het verschil.

Kies je een eigen merkletter? Lees dan eerst een merklettertype kiezen.

Drie praktische richtlijnen

Hou deze drie regels aan:

• Kies leesbaarheid boven originaliteit. Een eigenzinnig display-lettertype kan werken voor een logo of een korte koptekst, maar nooit voor lopende tekst.
• Let op een ruime tekenset. Voor de Benelux heb je correcte accenten en tekens nodig (é, ë, ç, en het euroteken). Niet elk gratis font ondersteunt die volledig.
• Test op echte schermen. Een lettertype dat strak oogt in een ontwerpprogramma kan op een gewone laptop of telefoon ineens dun of wazig aanvoelen.

Let op: de tekenset telt dubbel op een tweetalige site in het Nederlands en Frans. Een font zonder tekens zoals ç of è breekt je Franse pagina’s.

Webfont of systeemlettertype?

Veel zakelijke sites gebruiken bewust een breed beschikbaar, degelijk webfont. Of zelfs een systeemlettertype: het standaardlettertype van het toestel van de bezoeker.

Dat laatste laadt meteen. Het voorkomt dat tekst kort onzichtbaar is of verspringt tijdens het laden.

Dat komt de Core Web Vitals en daarmee de gebruikservaring ten goede.

Wat webfonts met je laadtijd doen

Kies je toch een webfont, dan kan het laden ervan je tekst ophouden.

Volgens web.dev over fonts blijft tekst in Chromium en Firefox tot 3 seconden onzichtbaar terwijl het font laadt. Safari wacht zelfs onbeperkt.

Is tekst het grootste element op je pagina, dan wordt dat wachten je LCP. Zo ziet dat eruit in PageSpeed Insights:

De LCP-opsplitsing in PageSpeed Insights voor een van onze eigen artikels, oktober 2026. Is een kop je LCP-element, dan houden fonts, CSS en scripts het eerste tekenen op.

Hier is de H1 het LCP-element, met 2.370 milliseconden vertraging bij het renderen. Fonts zijn een van de verdachten.

Wat LCP precies meet, lees je in wat is LCP.

Verspringende tekst

Een font dat laat inwisselt, kan je layout doen verschuiven. Dat meet Google als CLS.

Het rapport in Search Console groepeert getroffen URL’s per probleem:

Het Core Web Vitals-rapport in onze eigen Search Console, oktober 2026. Hier houdt layoutverschuiving (CLS boven 0,1) 349 mobiele URL’s uit het groen.

Niet elke verschuiving komt van fonts. Maar een fallbackletter met een andere breedte dan je webfont is een klassieke oorzaak.

Drie technische keuzes beperken de schade, volgens web.dev:

• WOFF2: het nieuwste formaat, ongeveer 30% kleiner dan WOFF
• font-display: bepaalt of tekst meteen in een fallbackletter verschijnt
• size-adjust: laat de fallbackletter dezelfde ruimte innemen

Meer over de oorzaken van verspringen staat in wat is CLS. Meet je eigen pagina’s met onze website-snelheidstest.

Hoeveel lettertypes gebruik je en hoe koppel je ze?

De vuistregel: twee lettertypes, soms drie, nooit meer.

Een set fonts die niet op elkaar is afgestemd, oogt onrustig. Ze ondermijnt precies de degelijkheid die je wil uitstralen.

Koppen en lopende tekst

Een beproefde aanpak is een koppeling van twee families. Een lettertype voor de koppen, een ander voor de lopende tekst.

Het contrast tussen die twee maakt je pagina visueel interessant zonder rommelig te worden.

Denk aan deze twee combinaties:

• een serif voor de koppen die autoriteit uitstraalt, met een rustige sans-serif voor de leestekst
• een markante sans-serif voor de koppen, met een goed leesbare serif voor de body

Of één familie

Wil je het simpel en veilig houden? Werk dan met één lettertypefamilie.

Je haalt je hierarchie dan volledig uit verschillende diktes (gewichten) en groottes.

Eén familie met een licht, een normaal en een vet gewicht geeft al genoeg variatie. Alles komt uit dezelfde familie, dus de harmonie is gegarandeerd.

Onze keuze: voor veel B2B-sites is dat de meest betrouwbare route.

Genoeg verschil, geen botsing

Zorg dat twee lettertypes genoeg van elkaar verschillen om duidelijk te zijn. Maar niet zo veel dat ze botsen.

Valkuil: twee sans-serifs die er net iets anders uitzien, lezen vaak als een fout in plaats van een keuze.

Kleur werkt op dezelfde manier. Hoe je dat afstemt, staat in een kleurenpalet voor je B2B-website.

Hoe bouw je een duidelijke groottehierarchie op?

Een goede typografische hierarchie toont in één oogopslag wat een titel is, wat een tussenkop is en wat lopende tekst is.

Die hierarchie stuurt het oog van de bezoeker. Ze bepaalt hoe makkelijk hij je pagina kan scannen.

Werk met een vaste schaal

Je bouwt de hierarchie op met een schaal: een vaste reeks groottes waarbij elke stap merkbaar groter is dan de vorige.

Van groot naar klein:

1. een grote H1 voor de paginatitel
2. een duidelijk kleinere H2 voor de hoofdsecties
3. een H3 voor subsecties
4. de lopende tekst

Het verschil tussen de niveaus moet groot genoeg zijn om meteen op te vallen. Anders oogt alles als één grijze massa.

Gewicht en ruimte versterken de schaal

Naast grootte gebruik je gewicht en ruimte.

Een vette kop met wat extra witruimte erboven leest meteen als een nieuw blok.

Hoe je het oog verder stuurt, lees je in visuele hierarchie op je website.

Koppen in de code

Die structuur helpt niet alleen mensen die scannen. Ze helpt ook zoekmachines en AI-systemen je pagina te begrijpen.

Koppen die ook in de code correct als H1, H2 en H3 zijn opgebouwd, geven betekenis aan je structuur.

Goede typografie en een nette koppenstructuur gaan dus hand in hand met vindbaarheid. En met de bredere UX-best practices voor B2B-sites.

Let op: kies een kop niet als H3 omdat hij “mooier klein” oogt. Grootte regel je in CSS, het niveau in de HTML.

Wat maakt tekst leesbaar op scherm?

Leesbaarheid op scherm draait om vier dingen: grootte, contrast, regellengte en regelafstand.

Krijg je die vier goed, dan leest je tekst comfortabel, welk lettertype je ook koos:

1. Grootte

Lopende tekst mag op een website gerust royaal zijn.

Te kleine tekst dwingt mensen te turen en jaagt ze weg.

Op mobiel is voldoende grootte extra belangrijk: het scherm is kleiner en de leesafstand korter. Meer daarover in mobiele conversie op je B2B-website.

2. Contrast

Tekst moet genoeg afsteken tegen de achtergrond.

De toegankelijkheidsrichtlijn WCAG vraagt voor gewone tekst een contrastverhouding van minstens 4,5 op 1.

Voor grote tekst is dat 3 op 1. Groot betekent vanaf ongeveer 24 pixels, of ongeveer 18,5 pixels vet.

Lichtgrijze tekst op wit mag modern ogen.

Maar lichtgrijs zoals #999999 op wit haalt maar 2,85 op 1. Voor een deel van je bezoekers maakt het je inhoud onleesbaar.

Controleer je kleuren met een contrastchecker voor je ze live zet:

Test ook je hele pagina met onze gratis toegankelijkheidstest.

3. Regellengte

Een regel die de volle breedte van een breed scherm beslaat, is vermoeiend om te lezen.

Een comfortabele leesregel telt volgens Baymard Institute grofweg 50 tot 75 tekens.

Beperk daarom de breedte van je tekstkolom. Baymard wijst daarbij op de WCAG-grens van 80 tekens of minder.

4. Regelafstand

Genoeg ruimte tussen de regels (de line-height) voorkomt dat tekst dichtgepakt en benauwd aanvoelt.

Voor lopende tekst werkt een regelafstand van ongeveer anderhalf keer de tekstgrootte prettig.

Norm: WCAG-criterium 1.4.12 noemt 1,5 keer de tekstgrootte voor de regelafstand en 2 keer voor de ruimte tussen alinea’s (W3C over tekstspatiëring).

Je site mag ook geen inhoud verliezen als een bezoeker die waarden zelf instelt.

Leesbaarheid is ook toegankelijkheid

Contrast en grootte zijn niet alleen een kwestie van comfort.

Onvoldoende contrast en te kleine tekst horen bij de meest voorkomende toegankelijkheidsfouten op websites. Die sluiten een deel van je publiek uit.

Voor een B2B-site die op leads mikt, is elke bezoeker die afhaakt een gemiste kans.

Een volledige lijst controles staat in onze WCAG-checklist. Wat de wet vraagt, lees je in de European Accessibility Act voor Belgische websites.

Hoe vertaalt typografie zich naar meer leads?

Typografie converteert niet rechtstreeks. Maar ze bepaalt of je boodschap überhaupt aankomt.

Een bezoeker die je tekst moeiteloos leest en je structuur meteen begrijpt, komt verder in je verhaal. En dus dichter bij een aanvraag.

Drie manieren waarop typografie helpt

Goede typografie werkt op drie niveaus:

• Eerste indruk: een professionele look, waardoor mensen blijven
• Scanbaarheid: mensen vinden sneller wat ze zoeken
• Actie: je waardepropositie en knoppen springen eruit

Een call-to-action in een duidelijk, leesbaar lettertype met genoeg contrast wordt nu eenmaal vaker aangeklikt dan een vage knop in een onleesbaar font.

De woorden op die knop tellen evenveel. Zie microcopy en UX-writing voor B2B.

Typografie staat nooit los

Ze ondersteunt je conversiegerichte copywriting, je navigatie en je hele paginastructuur.

De vorm moet de inhoud helpen, niet overstemmen.

Zo bouwen wij websites: keuzes die er voor de bezoeker toe doen, niet versiering om de versiering.

Typografie voor je website: de korte samenvatting

Sterke typografie op een B2B-website is rustig, consistent en leesbaar.

Zo straalt je site vertrouwen uit, blijft je boodschap overeind en help je bezoekers vlotter richting een aanvraag.

Veelgestelde vragen over typografie op een website

Hoeveel lettertypes mag een B2B-website hebben?

Twee, soms drie, nooit meer. Eén familie met verschillende gewichten is voor veel B2B-sites de veiligste keuze.

Serif of sans-serif voor een zakelijke website?

Allebei kan. Sans-serif oogt modern en technisch, serif straalt traditie en autoriteit uit. Kies op wat je merk wil uitstralen.

Welk contrast heeft tekst op een website nodig?

Volgens WCAG minstens 4,5 op 1 voor gewone tekst en 3 op 1 voor grote tekst.

Vertragen webfonts mijn website?

Ze kunnen het. Tekst kan onzichtbaar blijven tot het font geladen is. Een systeemlettertype of een WOFF2-webfont met een goede font-display beperkt dat.

Een website die verzorgd oogt en leads oplevert

Wil je dat je website er niet alleen verzorgd uitziet, maar ook leads oplevert?

Bekijk onze aanpak voor website laten maken of neem contact op. Je krijgt binnen 24 uur een eerste reactie op je huidige site.