Google Fonts-combinaties: 25 lettertypeparen die werken

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 uit waarom contrast wint van gelijkenis, en serif vs sans serif behandelt wat elke familie meebrengt.

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.

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.

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.

Vriendelijke en afgeronde combinaties

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 en kop-lettertypen gaan verder.

Technische en luxe combinaties

Fouten die een combinatie breken

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

1. 1

   Kies gewichten

   Meestal één kopgewicht en twee gewichten voor lopende tekst. Elk extra gewicht is nog een bestand om te downloaden.

2. 2

   Kopieer de embed

   Selecteer de families op Google Fonts en kopieer de link die je krijgt, of pas de code hieronder aan.

3. 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. 4

   Test met echte tekst

   Controleer een lange alinea, een kop van twee regels en je langste productnaam voordat je je vastlegt.

<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>

Google Fonts zijn gratis voor commercieel gebruik, maar lees lettertypelicenties 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 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 accepteert, en de Designer gebruikt ze als hij een ontwerp opmaakt.