# Lettertypen combineren: eenvoudige regels die werken

[Canonical HTML page](https://gradiently.design/nl/guide/font-pairing)

Twee lettertypen die los mooi zijn, kunnen botsen als ze een pagina delen. Een paar regels en een handvol beproefde combinaties halen het giswerk eruit.

## The short version

- Lettertypen combineren werkt het best als elk lettertype een duidelijke rol heeft, meestal één voor koppen en één voor lopende tekst.
- Een goede combinatie contrasteert duidelijk op één manier, zoals schreef tegenover schreefloos of zwaar tegenover licht, en deelt verhoudingen en sfeer.
- Eén letterfamilie in meerdere diktes, of een superfamilie met bijpassende schreef- en schreefloze versies, is de veiligste manier om lettertypen te combineren.
- Twee lettertypen die op elkaar lijken maar niet identiek zijn, zoals twee neutrale schreefloze letters, zien er meestal uit als een vergissing in plaats van een combinatie.
- Twee lettertypen zijn genoeg voor bijna elk merk, elke post of website; een derde hoort een smalle taak te hebben, zoals code of labels.

Goed **lettertypen combineren** komt neer op drie regels: geef elk lettertype een eigen rol, laat de twee op één manier duidelijk contrasteren en laat ze het over al het andere eens zijn, zoals verhoudingen en sfeer. Een kop met schreef boven lopende tekst zonder schreef is het klassieke voorbeeld. Twijfel je, gebruik dan één familie in twee diktes; die kan niet met zichzelf botsen.

## Begin bij rollen, niet bij lettertypen

Bepaal voordat je een lettertype kiest welke taken de letters hebben. De meeste ontwerpen hebben er twee: koppen die de toon zetten en lopende tekst die prettig moet lezen. Sommige voegen een derde, kleine taak toe, zoals labels of code. Kies eerst de letter voor lopende tekst, want die draagt de meeste woorden, en zoek daarna een koppenletter die hem aanvult.

| Rol | Taak | Wat het zwaarst weegt |
| --- | --- | --- |
| Kop | De toon zetten, als eerste gezien worden | Karakter, dikte, hoe hij groot oogt |
| Lopende tekst | Lang prettig gelezen worden | Leesbaarheid, een gelijkmatige textuur, een goede regular en cursief |
| Labels en kleine tekst | Snel gelezen worden op kleine formaten | Duidelijke vormen, open spatiëring, stevige diktes |
| Code of cijfers | Uitlijnen en ondubbelzinnig blijven | Monospaced of tabelcijfers |

Rollen van letters. Twee lettertypen kunnen alle vier dekken; de letter voor lopende tekst doet vaak ook de labels.

Een redactionele post met een grote kop, een klein label en een ondersteunende regel in een rustigere stijl

Rollen zichtbaar gemaakt: een grote kop met karakter, een klein label erboven en een rustige ondersteunende regel eronder. Het contrast zit in grootte en rol voordat het in het lettertype zit.

## Contrasteer op één manier, stem de rest af

Een combinatie heeft een zichtbaar verschil nodig, anders lijkt het tweede lettertype een ongelukje. Maar verschillen ze op alle vlakken tegelijk, dan lijken ze uit verschillende projecten te komen. Kies één as van contrast en houd de rest dicht bij elkaar.

- **Classificatie:** een schreefletter met een schreefloze. Het betrouwbaarste contrast. [Schreef of schreefloos](https://gradiently.design/nl/guide/serif-vs-sans-serif) legt uit wat elk meebrengt.
- **Dikte:** een zware displaysnede met een gewone tekstsnede, zelfs uit dezelfde familie.
- **Breedte:** een smalle koppenletter met lopende tekst van normale breedte.
- **Stem verhoudingen af:** een vergelijkbare x-hoogte, de hoogte van de kleine letters, laat de twee prettig samen op een regel staan.
- **Stem de sfeer af:** een warme, zachte schreefletter past bij een warme, humanistische schreefloze; een scherpe, geometrische schreefloze past bij een strakke schreefletter met veel contrast.

## Eén familie, of twee

De eenvoudigste combinatie is geen combinatie: één familie in twee of drie diktes. Die is per definitie consistent en moeilijk verkeerd te doen. Superfamilies gaan een stap verder, met een schreef- en een schreefloze letter die samen zijn getekend en dezelfde verhoudingen delen, zodat je het contrast van twee classificaties krijgt met de harmonie van één ontwerp.

### Eén familie

- Contrast alleen uit dikte en grootte
- Gegarandeerde harmonie
- Rustigere, eenvormigere stem
- Voorbeeld: koppen in Archivo Black, lopende tekst in Archivo

### Twee families

- Contrast uit classificatie of karakter
- Vraagt om passende verhoudingen en sfeer
- Expressiever, meer persoonlijkheid
- Voorbeeld: koppen in Fraunces, lopende tekst in Inter

## Beproefde lettertypecombinaties uit Google Fonts

Deze combinaties gebruiken lettertypen die gratis zijn op [Google Fonts](https://fonts.google.com/) en veel worden gebruikt, waardoor je ze makkelijk test. Zie ze als startpunt: zet je eigen woorden erin en beoordeel het resultaat.

| Kop | Lopende tekst | Contrast | Gevoel |
| --- | --- | --- | --- |
| Playfair Display | Source Sans 3 | Schreefletter met veel contrast en een strakke schreefloze | Redactioneel, klassiek |
| Fraunces | Inter | Zachte schreefletter met karakter en een neutrale schreefloze | Warm, eigentijds |
| DM Serif Display | DM Sans | Display-schreefletter met zijn bijbehorende schreefloze | Vriendelijk, verzorgd |
| Instrument Serif | Inter | Smalle schreefletter met een neutrale schreefloze | Mode, redactioneel |
| IBM Plex Serif | IBM Plex Sans | De schreef- en schreefloze letter van één superfamilie | Precies, technisch |
| Space Grotesk | Inter | Eigenzinnige grotesk met een eenvoudige | Tech, product |
| Archivo Black | Archivo | Dikte binnen één familie | Krachtig, direct |

Zeven combinaties uit Google Fonts. Elk contrasteert duidelijk op één manier en stemt de verhoudingen af.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  h1, h2 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    line-height: 1.1;
  }
  body {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.55;
  }
</style>
```

Een combinatie laden en toepassen: Fraunces voor koppen, Inter voor lopende tekst, elk met een verstandige terugval. Alleen de diktes die je gebruikt worden opgevraagd.

## Combinaties om te vermijden

### Vermijd

- Twee neutrale schreefloze letters die maar een beetje verschillen
- Twee displayletters die om aandacht strijden
- Een derde en vierde lettertype voor de afwisseling
- Lettertypen met heel verschillende x-hoogtes op één regel

### Liever

- Eén schreefloze in twee diktes, of een schreefletter erbij
- Eén displayletter, één rustige tekstletter
- Twee lettertypen, met diktes en groottes voor afwisseling
- Lettertypen met vergelijkbare verhoudingen

Displayletters zijn het verleidelijkst om te veel te gebruiken. Ze zijn gemaakt voor grote formaten en korte regels; lopende tekst in een displayletter vermoeit het oog snel. [Displayletters](https://gradiently.design/nl/guide/display-fonts) laat zien waar ze schitteren.

## Zo test je een lettertypecombinatie in tien minuten

1. **Gebruik echte woorden** Zet een echte kop en een echte alinea uit je werk, geen opvultekst.
2. **Zet ze op echte groottes** De kop groot, de lopende tekst op leesgrootte, op het formaat dat je echt gebruikt.
3. **Kijk naar de textuur** Doe een stap terug. De lopende tekst moet eruitzien als een gelijkmatig grijs; de kop moet er duidelijk los van staan.
4. **Probeer het op een telefoon** Veel combinaties die op een monitor elegant ogen, vallen op telefoonformaat uit elkaar. [Lettertypen voor sociale media](https://gradiently.design/nl/guide/fonts-for-social-media) laat zien wat standhoudt.
5. **Controleer de details** Cijfers, leestekens, cursief en elke taal waarin je publiceert.

Heb je gekozen, schrijf het dan op met diktes en groottes, zodat iedereen het op dezelfde manier gebruikt; [merklettertypen](https://gradiently.design/nl/guide/brand-fonts) behandelt licenties en talen, en [basis van typografie](https://gradiently.design/nl/guide/typography-basics) de schaal. In Gradiently staan lettertypen in je merkkit en gelden ze voor elk nieuw ontwerp.

## FAQ

### Wat is lettertypen combineren?

Lettertypen combineren is twee lettertypen kiezen, meestal één voor koppen en één voor lopende tekst, die op één manier duidelijk contrasteren en qua verhoudingen en sfeer overeenkomen.

### Hoeveel lettertypen moet ik gebruiken?

Twee is genoeg voor bijna alles. Een derde hoort een smalle taak te hebben, zoals code of kleine labels.

### Is het oké om maar één lettertype te gebruiken?

Ja. Eén familie in twee of drie diktes is de veiligste combinatie die er is, en veel sterke merken doen precies dat.

### Wat is een goede combinatie uit Google Fonts?

Betrouwbare startpunten zijn Fraunces met Inter, Playfair Display met Source Sans 3 en IBM Plex Serif met IBM Plex Sans.

### Waarom zien mijn twee lettertypen er samen verkeerd uit?

Meestal lijken ze te veel op elkaar, zodat het verschil als een vergissing oogt, of verschillen ze op alle vlakken tegelijk. Houd één duidelijk contrast en stem de verhoudingen af.