Hoe Je de Perfecte Lettertype Combinatie Kiest
Een stap-voor-stap gids voor het kiezen van twee lettertypen die elkaar aanvullen en professioneel overkomen.
Een consistent typografisch systeem is niet zomaar een verzameling lettertypen. Het’s eigenlijk de visuele identiteit van je merk — hoe het spreekt, hoe het voelt, hoe het zich onderscheidt. Als je website, app, brochures en social media allemaal verschillende lettertypes gebruiken, voelt je merk inconsistent en onprofessioneel aan.
We gaan je laten zien hoe je een typografisch systeem bouwt dat werkelijk werkt. Dit gaat verder dan alleen twee lettertypen kiezen. Het gaat om schaalgrootten, regelafstanden, gewichten en hoe alles samen op verschillende schermgroottes functioneert. Wanneer je dit goed doet, herkent iedereen jouw merk meteen — zelfs zonder logo.
Er zijn vier elementen die je systeem vormen. Veel designers slaan dingen over, maar je hebt ze allemaal nodig voor echte consistentie.
Kies één typeface voor lichaamstekst en één voor koppen. Don’t mix drie verschillende lettertypen — dat creëert chaos. Zorg dat je typefaces minstens 3-4 gewichten hebben (regular, medium, bold) zodat je schaalverschillen kunt maken.
Definieer exact welke grootte h1, h2, h3, body text en labels zijn. Gebruik geen willekeurige nummers — werk met een schaalladder van 1.125x of 1.25x zodat alles proportioneel voelt.
Body text moet 1.5x tot 1.75x regelafstand hebben. Koppen kunnen strakker — 1.2x is prima. Dit zorgt ervoor dat je tekst echt leesbaar is, vooral op mobiel.
Zorg dat je tekstkolommen niet breder dan 75 tekens zijn. Dat’s ongeveer 600-700 pixels op desktop. Langere regels maken lezen echt moeilijk — je oog verliest de plaats.
Theorie is leuk, maar laten we concreet worden. Stel je voor dat je een fashion-merk bent. Je kiest:
Lettertypen: Inter (body) + Playfair Display (koppen)
Schaal: h1=48px, h2=36px, h3=28px, body=16px (desktop)
Regelafstand: Body=1.6x, Koppen=1.3x
Regellengte: Max 65 tekens
Nu wordt het interessant. Documenteer dit alles in een design system — een PDF, een Figma-bestand, of zelfs gewoon een HTML-pagina. Dit wordt je typografische bijbel. Iedereen in je team — designers, developers, content writers — werkt hiermee. Geen improvisatie meer.
Je kan’t dezelfde lettergrootte op mobiel gebruiken als op desktop. 48px headers zijn onleesbaar op een telefoon. Hier’s waar veel designers mislopen.
Gebruik CSS clamp() voor responsive schaling. Dit zorgt ervoor dat je type smooth groeit met het scherm, zonder je systeem te breken. Bijvoorbeeld:
font-size: clamp(1.5rem, 5vw, 3rem);
Dit betekent: minimaal 1.5rem, maximaal 3rem, en 5% van de viewport-breedte ergens in het midden. Je header past zich vanzelf aan — geen breakpoints nodig voor elke grootte. We’ve tested dit en het werkt beter dan traditionele media queries voor type.
Een goed typografisch systeem voelt niet als beperkend — het voelt als bevrijding. Je hoeft niet meer te gokken welk lettertype je moet gebruiken of hoe groot iets moet zijn. Het systeem doet dat voor je.
Start met deze vier pijlers, documenteer alles en blijf eraan vasthouden. Je merk zal direct sterker en professioneler aanvoelen. Geloof ons — we’ve built deze systemen voor tientallen merken en het verschil is altijd enorm.
Volgende stap? Maak je eerste design system document. Zet alles op papier (digitaal of fysiek) en test het op je website, app en marketing materiaal. Pas het aan waar nodig, maar change het niet zonder reden. Consistency is de sleutel.
Dit artikel is bedoeld als educatieve gids voor typografisch systeemontwerp. De richtlijnen en best practices worden aangeboden voor informatiedoeleinden. Elk merk en project is uniek — zorg ervoor dat je deze principes aanpast aan je specifieke behoeften, doelgroep en technische mogelijkheden. Raadpleeg indien nodig een professioneel designer voor implementatie in jouw project.