# Google Fonts-combinaties: 25 lettertypeparen die werken

[Canonical HTML page](https://gradiently.design/nl/guide/google-fonts-pairings)

Elk paar hier is gratis op Google Fonts en gekozen op hoe het zich gedraagt in echte koppen en lopende tekst. Gegroepeerd op het gevoel dat je wilt, met de gewichten die elk paar laten werken.

## The short version

- Een goede Google Fonts-combinatie geeft kop en lopende tekst duidelijk verschillende taken, meestal door een display- of schreeflettertype te laten contrasteren met een gewone schreefloze.
- Paren uit dezelfde superfamilie, zoals DM Serif Display met DM Sans of IBM Plex Sans met IBM Plex Mono, zijn de veiligste plek om te beginnen.
- Lopende tekst heeft een lettertype nodig met een ruime x-hoogte en open vormen in het gewone gewicht 400, koppen mogen meer persoonlijkheid dragen.
- Lettertypen op Google Fonts verschijnen onder open licenties die commercieel gebruik toestaan, ook in logo’s, producten en klantwerk.
- Laad alleen de gewichten die je gebruikt en voeg display=swap toe om pagina’s snel te houden.

De beste **Google Fonts-combinaties** laten een karaktervol koplettertype contrasteren met een rustig, leesbaar lettertype voor lopende tekst: Fraunces met Inter, Playfair Display met Source Sans 3, Space Grotesk met Inter of DM Serif Display met DM Sans. Hieronder staan 25 combinaties, gegroepeerd op sfeer, elk met de gewichten waarmee het werkt en waar het bij past. Allemaal zijn ze gratis, allemaal staan ze commercieel gebruik toe en allemaal laden ze met één regel code. Kies eerst een groep op gevoel en dan een paar op klus.

## Zo lees je deze combinaties

Elk paar heeft eerst de kop en dan de lopende tekst. Het kopgewicht is het gewicht voor grote formaten, lopende tekst blijft op 400 met 600 of 700 voor nadruk. Ken je de redenering nog niet, dan legt [lettertypen combineren](https://gradiently.design/nl/guide/font-pairing) uit waarom contrast wint van gelijkenis, en [serif vs sans serif](https://gradiently.design/nl/guide/serif-vs-sans-serif) behandelt wat elke familie meebrengt.

Een staande post in redactionele stijl met een grote displaykop boven kleinere, rustigere ondersteunende tekst

Een combinatie geeft de pagina twee stemmen. De kop trekt aan, de tekst legt uit. Ze mogen nooit concurreren.

## Redactionele combinaties: schreefkoppen met schreefloze tekst

De klassieke structuur. Een schreefkop voegt warmte en gezag toe, een schreefloze tekst houdt lang lezen op schermen makkelijk.

| # | Kop | Tekst | Past bij |
| --- | --- | --- | --- |
| 1 | Playfair Display 700 | Source Sans 3 400 | Tijdschriften, restaurants, bruiloften |
| 2 | Fraunces 600 | Inter 400 | Eten, ambachtsmerken, nieuwsbrieven |
| 3 | DM Serif Display 400 | DM Sans 400 | Bureaus, portfolio’s, landingspagina’s |
| 4 | Instrument Serif 400 | Instrument Sans 400 | Moderne redactionele stijl, studio’s, mode |
| 5 | Cormorant Garamond 600 | Work Sans 400 | Beauty, interieur, boetiekhotels |
| 6 | Libre Baskerville 700 | Libre Franklin 400 | Uitgeverij, juridisch, doordachte lange teksten |

Fraunces heeft een optische-grootteas: op grote formaten worden de details scherper. Cormorant Garamond is delicaat op schermen, dus houd het bij koppen.

## Moderne schreefloze combinaties voor tech en product

Voor software, startups en alles wat actueel moet voelen. De kop draagt het karakter via vorm, breedte of eigenzinnige details, de lopende tekst is een werkpaard.

| # | Kop | Tekst | Past bij |
| --- | --- | --- | --- |
| 7 | Space Grotesk 700 | Inter 400 | Ontwikkeltools, fintech, dashboards |
| 8 | Syne 700 | Manrope 400 | Creatieve studio’s, evenementen, muziek |
| 9 | Sora 600 | Figtree 400 | Apps, SaaS-sites, onboarding |
| 10 | Unbounded 600 | Plus Jakarta Sans 400 | Futuristische merken, gaming, lanceringen |
| 11 | Archivo Black 400 | Archivo 400 | Stevige productpagina’s, sport, retail |

Unbounded en Syne zijn breed en luid, houd koppen kort. Archivo past bij zichzelf omdat zijn zwarte gewicht een ander beest is dan zijn gewone.

## Schreefloze koppen met schreeftekst

De omgekeerde structuur past bij lang lezen: een schone schreefloze kop markeert secties en een schreeftekst voelt boekachtig en vertraagt het oog op een prettige manier.

| # | Kop | Tekst | Past bij |
| --- | --- | --- | --- |
| 12 | Poppins 600 | Lora 400 | Blogs, coaching, persoonlijke sites |
| 13 | Montserrat 700 | Merriweather 400 | Gidsen, non-profits, rapporten |
| 14 | Bricolage Grotesque 700 | Newsreader 400 | Essays, onafhankelijke media |
| 15 | Outfit 600 | Source Serif 4 400 | Documentatie, cursusmateriaal |

## Vriendelijke en afgeronde combinaties

| # | Kop | Tekst | Past bij |
| --- | --- | --- | --- |
| 16 | Fredoka 600 | Nunito 400 | Kindermerken, speelgoed, gezinscafés |
| 17 | Quicksand 700 | Mulish 400 | Welzijn, huisdieren, zachte diensten |
| 18 | Rubik 600 | Karla 400 | Community-apps, lokale diensten, goede doelen |

Afgeronde lettertypen voelen benaderbaar maar zacht. Quicksand ziet er onder 600 licht uit, gebruik de zwaardere gewichten voor alles wat moet lezen.

## Gedurfde displaycombinaties voor posters en social

Smalle en zware displaylettertypen krijgen grote woorden in kleine kaders, en daarom domineren ze thumbnails en posters. Ze hebben een rustige partner nodig. [Thumbnailtekst](https://gradiently.design/nl/guide/typography-for-thumbnails) en [kop-lettertypen](https://gradiently.design/nl/guide/headline-fonts) gaan verder.

| # | Kop | Tekst | Past bij |
| --- | --- | --- | --- |
| 19 | Anton 400 | Roboto 400 | Thumbnails, sport, posts in nieuwsstijl |
| 20 | Bebas Neue 400 | Montserrat 400 | Sportscholen, evenementen, gedurfde menukaarten |
| 21 | Oswald 600 | Lato 400 | Posters, campagnes, uitverkoop |
| 22 | Abril Fatface 400 | Poppins 400 | Modeposts, drankjes, uitgaan |

## Technische en luxe combinaties

| # | Kop | Tekst | Past bij |
| --- | --- | --- | --- |
| 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Ontwikkelaarsdocs, data, onderzoek |
| 24 | Space Grotesk 500 | Space Mono 400 | Indie-software, zines, portfolio’s |
| 25 | Bodoni Moda 500 | Jost 400 | Juwelen, parfum, exclusieve retail |

Bij 24 is de mono de lopende tekst: dat werkt voor korte notities en labels, niet voor essays. De haarlijnen van Bodoni Moda zijn het gelukkigst groot, boven ongeveer 32 px.

## Fouten die een combinatie breken

### Vermijd

- Twee gelijkende schreefloze lettertypen, die op een fout lijken
- Twee displaylettertypen die om aandacht vechten
- Een haarlijnschreef voor lopende tekst op schermen
- Elk gewicht van beide families laden
- Een derde lettertype voor één speciale kop

### Doe

- Duidelijk contrast in structuur, gewicht of breedte
- Eén luid lettertype en één rustig
- Lopende tekst op 400 in een lettertype met een ruime x-hoogte
- Alleen de twee tot vier gewichten die je gebruikt
- Gebruik gewicht of grootte van je twee lettertypen in plaats daarvan

## Zo voeg je een Google Fonts-combinatie toe aan je site

1. **Kies gewichten** Meestal één kopgewicht en twee gewichten voor lopende tekst. Elk extra gewicht is nog een bestand om te downloaden.
2. **Kopieer de embed** Selecteer de families op Google Fonts en kopieer de link die je krijgt, of pas de code hieronder aan.
3. **Stel rollen in CSS in** Geef koppen en lopende tekst eigen variabelen voor de lettertypefamilie, zodat een latere wissel een wijziging van één regel is.
4. **Test met echte tekst** Controleer een lange alinea, een kop van twee regels en je langste productnaam voordat je je vastlegt.

```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:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>
```

Paar 2, Fraunces met Inter, met slechts drie gewichten geladen. Verwissel de familienamen voor elk paar hierboven.

Google Fonts zijn gratis voor commercieel gebruik, maar lees [lettertypelicenties](https://gradiently.design/nl/guide/font-licensing) voordat je er een aanpast of als onderdeel van een product verkoopt. Om de keuze over een heel merk te laten blijven, maak je er een [typografiesysteem](https://gradiently.design/nl/guide/brand-typography-system) van met benoemde rollen.

Voor socialposts en presentaties stel je je paar één keer in een Gradiently-merkkit in (onderdeel van Pro), die een kop- en een lopendetekstlettertype bevat en [geüploade lettertypebestanden](https://gradiently.design/nl/guide/custom-fonts-upload) accepteert, en de Designer gebruikt ze als hij een ontwerp opmaakt.

## FAQ

### Wat zijn de beste Google Fonts-combinaties?

Betrouwbare beginpunten zijn Fraunces met Inter, Playfair Display met Source Sans 3, DM Serif Display met DM Sans en Space Grotesk met Inter.

### Welk lettertype past goed bij Montserrat?

Merriweather voor lopende tekst geeft een klassiek contrast van schreefloos en schreef. Bebas Neue werkt boven Montserrat als gedurfde posterkop.

### Wat past goed bij Playfair Display?

Een gewone, open schreefloze voor lopende tekst, zoals Source Sans 3, Lato of Inter. Combineer het niet met een andere schreef met hoog contrast.

### Zijn Google Fonts gratis voor commercieel gebruik?

Ja. Lettertypen op Google Fonts gebruiken open licenties, meestal de SIL Open Font License, die commercieel gebruik toestaan, ook voor logo’s, websites, druk en klantwerk. Lees de licentie op de pagina van elk lettertype als je de bestanden wilt aanpassen of herdistribueren.

### Hoeveel lettertypen moet een website gebruiken?

Twee is voor de meeste sites ruim voldoende: één voor koppen en één voor lopende tekst, in alleen de gewichten die je nodig hebt.