CodeKitHubWat is deze tool?
Fontcombinatie betekent het kiezen van twee (soms drie) lettertypen om samen op een pagina te gebruiken — meestal één voor titels en één voor de lopende tekst — zodat de pagina visuele hiërarchie krijgt zonder dat het onsamenhangend of eentonig oogt.
Elke combinatie hieronder toont een live weergegeven voorbeeld: bovenaan het titellettertype, daaronder het tekstlettertype, met de echte Google Fonts-bestanden, zodat wat je ziet ook is wat je op je site krijgt.
Elke combinatie wordt geleverd met een kant-en-klare Google Fonts `<link>`-embedtag en een bijpassend CSS-fragment met `font-family`-declaraties voor titels en lopende tekst — kopieer beide en je bent klaar.
Waarom gebruiken?
- 28 handgekozen combinaties, geen automatisch gegenereerde lijst — elk gekozen omdat de twee lettertypen elkaar echt aanvullen.
- Live voorbeeld: elke combinatie wordt weergegeven met de echte lettertypen geladen vanaf Google Fonts, geen statische afbeelding of gok naar de fontnaam.
- Filter op sfeer — Modern, Elegant, Gedurfd, Minimalistisch, Klassiek — om te versmallen naar het gevoel dat je project nodig heeft.
- Kopiëren met één klik voor zowel de `<link>`-embedtag als de CSS `font-family`-regels.
- Gratis, werkt in je browser, geen account of login vereist.
Hoe te gebruiken
- Klik eventueel op een sfeerfilter (Modern, Elegant, Gedurfd, Minimalistisch, Klassiek) om de lijst te versmallen, of laat "Alle" geselecteerd om alles te bekijken.
- Bekijk de live voorbeeldkaarten — de bovenste regel toont het titellettertype, de regel eronder het tekstlettertype.
- Open een combinatie die je bevalt en klik om de embed-codesectie uit te klappen.
- Kopieer de `<link>`-tag naar de `<head>` van je HTML, en kopieer het CSS-fragment naar je stylesheet om de lettertypen toe te passen op je titels en tekst.
Voorbeeld
Invoer
Elegante blogUitvoer
Playfair Display (titels) + Source Sans Pro (tekst)Filteren op "Elegant" toont titels met een schreefletter met hoog contrast, gecombineerd met een strak, goed leesbaar schreefloos lettertype voor de tekst — een veelvoorkomende combinatie voor redactionele en bloglay-outs.
Principes van goede fontcombinaties
- Contrast boven gelijkenis: twee lettertypen die er bijna identiek uitzien (bijvoorbeeld twee vergelijkbare geometrische schreefloze lettertypen) ogen eerder als een vergissing dan als een bewuste keuze. Combineer een schreefletter met een schreefloos lettertype, of een zwaar display-lettertype met een lichter tekstlettertype, zodat het verschil bedoeld overkomt.
- Match x-hoogte en verhoudingen: lettertypen waarvan de kleine letters een vergelijkbare visuele hoogte hebben, voelen vaak alsof ze bij elkaar horen op dezelfde pagina, ook al verschillen hun stijlen — een niet-overeenkomende x-hoogte is een van de meest voorkomende redenen waarom een combinatie "niet klopt".
- Beperk jezelf tot twee families (soms drie): één voor titels, één voor tekst, en hooguit een derde voor accenten zoals knoppen of labels. Meer dan dat en de pagina begint ongepland te ogen.
- Denk niet alleen aan de vorm, maar ook aan de sfeer: een ronde, vriendelijke schreefloze letter gecombineerd met een formele schreefletter zendt gemengde signalen uit, zelfs als de lettervormen technisch samengaan — kies lettertypen die zowel qua toon als structuur overeenkomen.
- Test op werkelijke groottes: een combinatie die er geweldig uitziet in een groot voorbeeld kan contrast verliezen op tekstgrootte, of een display-lettertype kan onleesbaar worden op kleine formaten — controleer altijd beide uitersten.
Een combinatie kiezen op basis van toepassing
Landingspagina's en marketingsites profiteren meestal van de filters "Gedurfd" of "Modern" — een sterk titellettertype met hoog contrast trekt de aandacht boven de vouw, gecombineerd met een strak, neutraal tekstlettertype dat langere tekst makkelijk scanbaar houdt.
Blogs en redactionele content lezen vaak het best met combinaties in de stijl "Elegant" of "Klassiek" — een verfijnde schreefletter voor titels wijst op een doordachte, geredigeerde stem, terwijl een prettige schreefletter of schreefloos lettertype voor de tekst artikelen leesbaar houdt tijdens langere leessessies.
E-commerce- en productsites neigen naar "Minimalistisch" combinaties — ingetogen, neutrale lettertypen houden de focus op productfotografie en prijzen in plaats van op de typografie zelf, wat belangrijk is wanneer er tientallen productkaarten op één pagina staan.
Portfolio's en creatieve sites hebben de meeste ruimte om te experimenteren — "Gedurfd" of "Elegant" combinaties met meer karakter kunnen goed werken, omdat het publiek er deels is om visuele smaak te beoordelen.
Opmerkingen over prestaties en licenties
De embed `<link>`-tag laadt lettertypen vanaf Google's CDN, wat snel is en al gecached op veel sites die je bezoekers waarschijnlijk al eerder hebben bezocht — maar het voegt wel een extern verzoek toe. Voor sites waar elke milliseconde telt, verwijdert het downloaden en zelf hosten van de lettertypebestanden (met handmatig ingestelde `font-display: swap`) die externe afhankelijkheid, ten koste van wat extra installatiewerk.
Alle lettertypen op Google Fonts zijn opensource en gratis voor commercieel gebruik zonder verplichte naamsvermelding, al is het een aardig gebaar om de lettertypeontwerper te crediteren wanneer dat eenvoudig kan.
Veelgestelde vragen
Wat maakt dat twee lettertypen "goed samengaan"?
Goede combinaties balanceren contrast en harmonie. Contrast — een schreefletter combineren met een schreefloos lettertype, of een gedurfd display-lettertype met een eenvoudig tekstlettertype — creëert visuele hiërarchie zodat titels en tekst duidelijk van elkaar te onderscheiden zijn. Harmonie — een vergelijkbare x-hoogte, vergelijkbare lijndikte en een gedeeld gevoel van formaliteit of speelsheid — voorkomt dat de twee met elkaar botsen. De combinaties hier zijn samengesteld met beide aspecten in gedachten.
Moeten titels en tekst altijd verschillende lettertypen gebruiken?
Nee, één lettertypefamilie voor beide gebruiken (zoals de combinatie "Rubik + Rubik" van deze tool) werkt ook goed, zolang het lettertype voldoende gewichtsvariatie heeft om titels van tekst te onderscheiden. Het is een geldige, minimalistische keuze — geen vergissing.
Hoe pas ik een combinatie daadwerkelijk toe op mijn site?
Kopieer de `<link>`-embedtag naar de `<head>` van je pagina om de lettertypen vanaf Google's CDN te laden, kopieer daarna het CSS-fragment naar je stylesheet — dit stelt `font-family` in voor titels (h1, h2, h3) en voor tekst (body, p). Pas de CSS-selectors aan als je markup afwijkt.
Vertraagt het laden van Google Fonts mijn site?
Elk extra lettertypebestand voegt een netwerkverzoek toe en enig risico op het blokkeren van de weergave. Beperk je tot één titelgewicht en een of twee tekstgewichten, gebruik `display=swap` (al opgenomen in de embed-code) zodat tekst in een vervangend lettertype verschijnt terwijl het weblettertype laadt, en overweeg om de lettertypebestanden zelf te hosten voor productiesites die de snelst mogelijke laadtijd nodig hebben.
Mogen deze lettertypen gratis commercieel gebruikt worden?
Ja. Elk lettertype in Google Fonts, inclusief alle hier getoonde combinaties, is gelicentieerd onder de SIL Open Font License of de Apache License — beide staan gratis commercieel gebruik, wijziging en herdistributie toe zonder royalty's.