Typografie in webdesign: lettertype combinaties voor jouw inspiratie

Grafisch ontwerp Geplaatst op: 3 april 2025

In dit artikel 6 perfecte lettertype combinaties voor je volgende webdesign project. Leer hoe je fonts kunt combineren.

Lettertype combinaties en inspiratie voor jouw design

Wat is typografie?

“Typografie is de kunst van het vormgeven, zetten en drukken van tekst, zowel voor functionele als esthetische doeleinden.” Deze definitie van Wikipedia omschrijft perfect het doel. Maar hoe zorg je ervoor dat je tekst er mooi uitziet en fijn leesbaar is? Welke lettertypes passen goed bij elkaar? In dit artikel lees je hoe je lettertypes kunt combineren.

Tips voor het kiezen en combineren van lettertypes

Zorg dat je tekst goed leesbaar is

Deze tip klinkt heel logisch, maar wordt nog weleens vergeten. Kijk naar de vormen van de verschillende letters en zorg ervoor dat ze goed herkenbaar zijn, ook op kleinere groottes. Let ook op de kleur en zorg voor voldoende contrast tussen de tekst- en achtergrondkleur.

Zorg voor voldoende contrast

Contrast is het verschil tussen verschillende elementen. Bij typografie kun je contrast toepassen door de grootte, dikte of kleur aan te passen van je tekst. Bij lettertypes onderling kun je ook nog kijken naar vormcontrast: verschillende soorten lettertypes zien er qua vorm ook heel anders uit. Deze kun je dus vaak goed met elkaar combineren.

Gebruik niet teveel lettertypes door elkaar

In de meeste gevallen heb je genoeg aan 2 lettertypes. Gebruik in ieder geval niet meer dan 3 lettertypes in je design. Meer heb je echt niet nodig en je loopt het risico dat het geheel rommelig gaat ogen.

Websites met prachtige lettertype combinaties

Goede typografie is prettig leesbaar en zet tegelijkertijd een bepaalde sfeer neer die past bij de rest van de website. Dit is soms erg lastig te bereiken. Om je hierbij een handje te helpen hebben we een aantal voorbeelden bij elkaar gezocht van lettertypes die met elkaar zijn gecombineerd voor het perfecte resultaat. We hebben er de links naar Google Fonts en Adobe Fonts bijgedaan zodat je de lettertypes makkelijk in je eigen project kunt gebruiken.

Gaming on Avalanche

Gaming on Avalanche

Met Gaming on Avalanche is het mogelijk voor game ontwikkelaars om hun eigen blockchain te maken en deze te integreren in hun games.

De website maakt een technische en moderne indruk, die onder andere wordt bereikt door het kleurenpalet en de kleurrijke afbeeldingen.

Ook de typografie draagt bij aan het moderne gevoel die de website uitstraalt. Eén van de lettertypes, die voornamelijk in koppen wordt gebruikt, maakt indruk door de grote vette letters en kapitalen (hoofdletters). Hiernaast wordt een traditioneel schreefloos lettertype gebruikt dat een stuk prettiger leesbaar is. Voor details, zoals buttons en bijschriften, wordt een monospace lettertype gebruikt dat de link met gaming versterkt. Door de schuine lijnen en pixelachtige vormen krijgt de typografie meer dynamiek.

Lettertypes:

Typografie op website van Lancia

Lancia

Lancia is een Italiaans automerk, dat na jaren alleen in Italië actief te zijn geweest, vanaf 2024 nieuwe modellen uit zal brengen. Lancia is een premium merk: de modellen hebben doorgaans een luxe uitrusting en verregaande individualisatie.

Op de website probeert Lancia het exclusieve en premium gevoel te versterken met het design. Door een minimalistische aanpak met veel witruimte, een select kleurenpalet en kwalitatieve fotografie wordt een goede basis gelegd.

De typografie draagt ook bij aan het premium gevoel. Een klassiek lettertype met schreef wordt gecombineerd met een sans serif font die in kapitalen (hoofdletters) wordt gebruikt. Door de kapitalen een grote letterafstand te geven zijn de kopjes goed leesbaar en krijgen ze tegelijkertijd een luxe gevoel. De focus op de typografie wordt extra benadrukt door hier en daar sierlijke lijnen te gebruiken onder de koppen.

Lettertypes:

Lettertypes combineren in druk design van Dogstudio

AI

Op deze mini-website laat Dogstudio zien dat generatieve AI creativiteit niet overbodig maakt, maar juist versterkt. Op de website laat de agency een aantal mooie projecten zien waarbij generatieve AI is gebruikt.

De website maakt een maximalistische indruk, vooral door de drukke header. Hier is een schermbrede afbeelding te zien die als een collage uit verschillende afbeeldingen is opgebouwd. Hieronder is een handgeschreven lettertype te zien in grote kapitalen (hoofdletters).

Het stukje tekst doet veel rustiger aan, bijna minimalistisch zelfs. Kleine hoofdletters in het rood vormen een bijschrift bij een titel in een lettertype met een schreef. Hiernaast wordt een ander lettertype gebruikt (weer met serifs). Door dit stukje tekst in een andere kleur en schuingedrukt te gebruiken ontstaat er genoeg contrast tussen de teksten.

Zoals je ziet, combineert deze website maar liefst 4 lettertypes. Door deze op een bewuste manier te combineren passen de fonts goed bij elkaar.

Lettertypes:

Klassieke lettertypes op website van Brown Forman

Brown-Forman Corporation

De Brown-Forman Corporation is het bedrijf achter de merken Jack Daniel's whiskey en Herradura tequila. Het bedrijf bestaat al sinds 1870 en heeft een lange geschiedenis.

De website van de Brown-Forman Corporation heeft een retro uitstraling. Dit wordt deels bereikt door het kleurenpalet, maar de typografie heeft hier ook een belangrijk aandeel in. Er worden op de website twee lettertypes met elkaar gecombineerd: een klassieke serif en een modernere schreefloze font. Allebei deze lettertypes worden in verschillende groottes en diktes gebruikt, waardoor een gevarieerd beeld ontstaat. Door het klassieke lettertype voornamelijk in koppen te gebruiken zorgt de website voor een duidelijke hiërarchie, terwijl de leesbaarheid goed blijft.

Lettertypes:

Vette hoofdletters op de website van Wayne Parker Kent

Wayne Parker Kent

Wayne Parker Kent is een creatief bureau dat voornamelijk social content maakt voor merken. Hiernaast doen ze aan merkpositionering en -ontwikkeling.

De website van Wayne Parker Kent valt vooral op door het kleurgebruik en de typografie. Fel geel wordt hier gecombineerd met wit, zwart en grijs. Vooral het geel trekt hierbij de aandacht.

Ook de typografie helpt mee bij de herkenbare uitstraling. Een vet lettertype wordt in kapitalen (hoofdletters) gebruikt wat de website een moderne uitstraling geeft. Door de tekst in de header in het midden uit te lijnen ontstaat een fijne symmetrie. In de lopende teksten maakt de website gebruik van een rond lettertype met een vriendelijke uitstraling. Dit lettertype contrasteert mooi met het font dat in de koppen is gebruikt.

Lettertypes:

Sierlijke lettertype combinatie op website van Tadaaz

Tadaaz

Met Tadaaz kun je makkelijk kaartjes voor je trouwen, geboorte of andere feestelijke gelegenheden laten maken. Je kunt kiezen uit kant-en-klare kaarten of een eigen ontwerp maken.

De website van Tadaaz maakt een rustige indruk. Dit komt onder andere door het kleurenpalet waarin beige, zwart en wit zijn verwerkt.

Ook de typografie draagt bij aan de uitstraling van de website. Op de website worden twee lettertypes met elkaar gecombineerd. Een klassiek lettertype met schreef, die voornamelijk in koppen wordt gebruikt en een schreefloze variant die vooral terugkomt in langere stukken tekst. Voor een goede leesbaarheid is de tekst bijna altijd in het zwart weergegeven. Af en toe wordt hier vanaf afgeweken, bijvoorbeeld als de witte tekst over een afbeelding heen wordt gelegd. Om hierbij de leesbaarheid te verhogen wordt de tekst van een zachte schaduw voorzien.

Lettertypes:

Meer typografie inspiratie?

Heb je nog steeds geen genoeg gehad van mooie typografie op websites? Bekijk dan onze typografische websites of meer Google Font combinaties.

Verder lezen