NL

Lettertypen combineren – duo’s voor kop en lopende tekst

Kies een lettertypeduo en zie meteen hoe kop en lopende tekst samenwerken, desgewenst met je eigen tekst. Elk duo gebruikt uitsluitend vooraf geïnstalleerde systeemlettertypen: niets om te downloaden, geen verzoek naar Google of een andere server. Bij elk duo staat de onderbouwing, de gemeten x-hoogte en de beschikbaarheid per besturingssysteem.

px
De kop wordt 1,8 keer groter getoond.
Je invoer wordt alleen in deze browser opgeslagen.

Voorbeeld

De kunst van een goede kop

Goede typografie valt niet op. Ze leidt het oog rustig door de tekst, geeft een duidelijke hiërarchie en laat de inhoud spreken – op een telefoon net zo goed als op een groot beeldscherm.

Je tekst blijft in dit browservenster – hij wordt niet opgeslagen, niet verzonden en niet in de adresbalk gezet.

CSS om te kopiëren

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Alle lettertypeduo’s

Resultaat

Lettertypeduo
Georgia + Verdana
Waarom het werkt
Klassiek contrast tussen schreef en schreefloos: Georgia voor koppen, Verdana voor lopende tekst. Matthew Carter ontwierp beide voor het scherm, waardoor verhoudingen en ritme goed samengaan. Verdana heeft een zeer grote x-hoogte en loopt breed – zet lopende tekst ongeveer 1 px kleiner.
x-hoogte (gemeten)
Georgia: 0,481 em · Verdana: 0,545 em – lopende tekst oogt bij dezelfde grootte ongeveer 13% groter
Beschikbaarheid per besturingssysteem
SysteemKopLopende tekst
Windows 10/11GeorgiaVerdana
macOSGeorgiaVerdana
iPhone/iPadGeorgiaVerdana
AndroidNoto Serif (vervanging)Roboto (vervanging)

Zo wordt het berekend

Hoe combineer je lettertypen

Twee lettertypen werken samen als ze duidelijk verschillend maar vergelijkbaar opgebouwd zijn. De veiligste route is een schreefletter tegenover een schreefloos lettertype: het ene voor koppen, het andere voor lopende tekst. Twee vergelijkbare schreefletters of twee vergelijkbare schreefloze letters ogen daarentegen al snel als een vergissing.

Net zo belangrijk is de x-hoogte – de hoogte van kleine letters ten opzichte van de lettergrootte. Lettertypen met een grote x-hoogte (Verdana: 0,545 em) ogen bij dezelfde grootte merkbaar groter dan lettertypen met een kleine x-hoogte (Calibri: 0,464 em). Liggen de x-hoogtes van een duo ver uit elkaar, compenseer dat dan met de lettergrootte. De getoonde waarden komen uit de OS/2-tabel van de Windows 11-lettertypebestanden.

Waarom alleen systeemlettertypen?

Systeemlettertypen staan al op het apparaat: pagina’s laden sneller, tekst springt niet tijdens het laden, en er gaat geen verzoek naar een externe server. Webfonts rechtstreeks van een font-CDN laden stuurt het IP-adres van elke bezoeker naar die aanbieder – een privacykwestie onder de AVG in Europa. Wil je eigen webfonts, host ze dan zelf.

Font stacks: waarom meerdere namen?

Geen enkel lettertype staat op elk systeem geïnstalleerd. Daarom noemt CSS meerdere lettertypen achter elkaar (een font stack): de browser gebruikt de eerste die geïnstalleerd is, en een generieke familie zoals serif of sans-serif vangt de rest op. De tabel toont welk lettertype daadwerkelijk verschijnt op Windows, macOS, iPhone/iPad en Android, gebaseerd op de lettertypelijsten van Microsoft en Apple en de fontconfiguratie van Android (geraadpleegd op 27-09-2026). Android heeft geen Georgia of Verdana en toont in plaats daarvan Noto Serif of Roboto; Linux-distributies leveren afhankelijk van de installatie andere lettertypen.

Tips voor leesbare tekst

Veelgestelde vragen

Welke lettertypen combineren goed?

Duo’s van een schreefletter en een schreefloos lettertype zijn een veilige keuze, zoals Georgia met Verdana, Palatino met het systeemlettertype, of Cambria met Calibri. Belangrijk is duidelijk contrast en vergelijkbare x-hoogtes.

Hoeveel lettertypen moet een website gebruiken?

Hoogstens twee: één voor koppen, één voor tekst. Voeg een derde, zoals een monospace lettertype voor code, alleen toe als die een eigen functie heeft.

Zijn Georgia en Verdana op elk apparaat beschikbaar?

Op Windows, macOS en iOS wel. Android levert ze niet mee en toont Noto Serif of Roboto – daarom moet elke font stack eindigen met een generieke familie zoals serif of sans-serif.

Wat is x-hoogte?

De hoogte van een kleine letter x ten opzichte van de lettergrootte. Een grote x-hoogte maakt tekst bij dezelfde grootte leesbaarder, maar heeft iets meer regelafstand nodig.

Waarom niet gewoon webfonts van een CDN gebruiken?

Dan stuurt elke paginaweergave het IP-adres van de bezoeker naar de fontaanbieder en komt er een download bij voordat de tekst verschijnt. Systeemlettertypen voorkomen beide; eigen lettertypen kun je zelf hosten.

Wordt mijn voorbeeldtekst opgeslagen?

Nee. Je eigen kop en tekst blijven alleen in dit browservenster. Alleen het gekozen duo en de lettergrootte worden onthouden.

Bronnen en wettelijke basis

Bijgewerkt op:

Vergelijkbare tools