Typografie MKB-website — Google Fonts of system-ui?

Wat MKB moet weten

Twee routes. System-ui (gratis, snel, lokaal-geïnstalleerd) — werkt prima voor 80% van MKB. Google Fonts (Inter, Manrope, DM Sans) — kost wel laad-tijd (~30-50ms), maar geeft merk-identiteit. Onze keus voor klanten: 1 hoofd-font + system-ui mono voor codes/cijfers. Vermijd: 3+ fonts (versnipperd), Comic Sans (oudbakken), zware display-fonts voor body-text (onleesbaar).

Veelgestelde vragen

Wanneer is dit relevant?

Bij elke MKB-website-keuze die je in 2026 maakt. Twijfel? Vraag de gratis audit aan — wij kijken concreet naar jouw situatie.

Waarom typografie meer doet dan kleur

Een bezoeker leest gemiddeld 28 procent van de tekst op een MKB-pagina voordat hij beslist of hij blijft of niet. Die 28 procent moet vlot binnenkomen. Typografische keuzes — letterfamilie, font-size, regelafstand, regellengte — bepalen hoeveel inspanning dat lezen kost. Slechte typografie voelt als waden, goede typografie voelt als glijden. Bezoekers merken het verschil zonder het te kunnen benoemen, en blijven langer op de site waar het glijdt.

Onderzoek van Nielsen Norman Group laat zien dat een toename van 14 naar 16 pixel body-tekst de leessnelheid op desktop met 11 procent verhoogt en bouncerates met 6 procent verlaagt. Een toename van 1.4 naar 1.6 line-height op body-tekst voegt nog eens 5 procent leessnelheid toe. Dat zijn kleine schroefjes met meetbare opbrengst. Het is een van de goedkoopste optimalisaties op een MKB-site omdat je niets nieuws hoeft te ontwerpen — je past alleen waardes aan.

Wat veel MKB-sites verkeerd doen: te kleine body-tekst (vaak 13 of zelfs 12 pixel) gecombineerd met te lange regels (90+ tekens per regel). Optimaal voor lezen op een breed scherm is 55 tot 75 tekens per regel, met 16 tot 18 pixel body op desktop en 17 tot 19 op mobiel. De regellengte regel je met een max-width op je tekstkolom, meestal tussen 65ch en 80ch.

System fonts versus webfonts in 2026

De system-font stack (San Francisco op Apple, Segoe op Windows, Roboto op Android, Cantarell op Linux) is gratis, snel en goed leesbaar. Hij laadt instant omdat het lettertype al op het apparaat staat. Nadeel is dat je site er per platform iets anders uitziet — niet erg verstorend, wel niet exact merkeigen. Voor 70 tot 80 procent van MKB-sites is dit de juiste keuze: je krijgt 95 procent van de typografische kwaliteit met 0 milliseconde extra laadtijd.

Een webfont voegt iets toe als hij echt onderdeel is van je merk. Inter, Manrope, IBM Plex en DM Sans zijn 2025-2026 de meest gebruikte commodity-webfonts — ze zijn betrouwbaar, gratis en je ziet ze overal. Voor differentiatie kies je liever iets minder gangbaar: Söhne als je budget hebt, Mona Sans (gratis, GitHub-gemaakt), Karrik (gratis, raw maar karaktervol), of Switzer (gratis, modern). Een eigen identiteit met een minder-gangbaar font kost extra moeite maar oogt minder gemiddeld.

De prijs van een webfont in performance: tussen 30 en 100 kilobyte per gewicht, en een blokkerende of zwaaiende render terwijl hij laadt. Mitigeren doe je met font-display: swap zodat tekst direct in een fallback verschijnt, preload op de kritieke gewichten, en strikte zelf-hosting in plaats van Google Fonts CDN. Google Fonts CDN voegt een third-party request toe die je niet kunt cachen tussen sites — zelf-hosten met een variable-font is in 2026 vrijwel altijd sneller.

Variable fonts: minder bestanden, meer flexibiliteit

Een variable font is één bestand dat alle gewichten en italic-varianten van een familie bevat. In plaats van Inter Regular, Medium, SemiBold en Bold los te laden (4 bestanden, ongeveer 200 KB totaal), laad je één variable Inter-bestand van ongeveer 90 KB. De browser pakt zelf de juiste as-positie. Voor moderne sites is dit de standaard. Vrijwel alle goede Google Fonts en commerciële families hebben in 2026 een variable variant.

Body-tekst op desktop minimaal 16 pixel, op mobiel minimaal 17
Line-height op body tussen 1.5 en 1.7 voor optimale leesbaarheid
Regellengte tussen 55 en 75 tekens via max-width 65ch tot 80ch
Maximaal twee letterfamilies (één voor headings, één voor body)
Maximaal drie gewichten per familie (regular, medium of bold, italic)
Variable font waar mogelijk om bestandsgrootte te beperken
Zelf-hosten in plaats van Google Fonts CDN voor snellere first paint
font-display: swap op alle webfonts om FOIT te voorkomen
Preload op kritieke gewichten (meestal regular en bold)
Tab-figures (variant-numeric: tabular-nums) op cijferreeksen voor uitlijning
Letter-spacing op grote headings iets negatief (-0.01em tot -0.03em)
Letter-spacing op all-caps positief (0.04em tot 0.08em) voor leesbaarheid
Typografische schaal van vier tot zes groottes, geen vrij verzonnen waardes
Headings in correcte hiërarchie (h1 één keer, daarna h2, h3, zonder sprongen)
Test je typografie op een goedkope Android-telefoon in fel zonlicht

Hoe je een font kiest dat bij je merk past

Begin met je merk-positie in één woord. Premium en serieus: een serif zoals GT Sectra, Söhne of New Spirit. Tech en sober: een geometrische sans zoals Inter, Mona Sans of Manrope. Warm en menselijk: een humanistische sans zoals Karrik, Source Sans of FreightSans. Editorial en intellectueel: een transitionele serif zoals PP Editorial, Tiempos of Newsreader. Speels en uitgesproken: een display-font alleen voor headings, gecombineerd met een sobere body.

De fout die MKB's maken is een display-font kiezen voor body-tekst. Display-fonts zijn ontworpen voor grote groottes — bij 16 pixel verliezen ze leesbaarheid. Ze horen alleen in headings of in occasioneel marketing-text. Voor body-tekst kies je een font dat in een paragraaf van 200 woorden niet vermoeit. Test dat door zo'n paragraaf op te zetten in je voorgenomen font en hem hardop voor jezelf te lezen — als je struikelt, hapert het lezen voor je bezoekers ook.

Bij Keurmeesters bijvoorbeeld is gekozen voor één moderne grotesk-sans voor zowel headings als body, met variable gewichten van 400 tot 700. Dat is bewust minimaal: één font, zelf-gehost, variable, in 90 kilobyte. De typografische identiteit ontstaat door consistentie en juiste schaalverhouding, niet door het exotisme van het font zelf.

Mag ik meer dan twee fonts gebruiken?

Technisch wel, esthetisch zelden. Drie fonts is mogelijk als één pure display (alleen voor titels), één voor body en één voor mono (cijfers, code). Vier of meer is bijna altijd inconsistent en kost laadtijd. Houd het op één of twee tenzij je een sterk visuele reden hebt.

Wat is het verschil tussen Inter en Inter Tight?

Inter is de bredere standaardversie, Inter Tight heeft krappere letterspacing en compactere proporties. Inter Tight is fijner voor headings en compacte UI, Inter is fijner voor body-tekst. Gebruik beide in dezelfde familie kan, vermijd dan andere fonts.

Hoe groot mag mijn hero-headline zijn?

Op desktop tussen 56 en 96 pixel voor balans tussen impact en zinslengte. Op mobiel tussen 32 en 48 pixel. Boven 96 pixel breekt de leesbaarheid en pas je headline-lengte slecht in een tweede regel. Gebruik clamp() in CSS om vloeiend te schalen tussen mobiel en desktop.

Wat doe je vandaag?

Open je site op je telefoon en meet je body-tekst — onder 16 pixel? Vergroot
Tel het aantal verschillende font-families in je CSS — meer dan twee? Snijd
Check of je webfonts via Google CDN of zelf-gehost komen — refactor naar zelf-hosten
Test je belangrijkste pagina met font-display: swap door je netwerk te throttlen
Vraag een gratis audit aan voor advies over typografische optimalisatie op jouw site