Tool voor lettertypecombinaties
Vind de perfecte lettertypes voor je site, bekijk ze live en kopieer gebruiksklare CSS.
Pa’s wijze lynx bezag vroom het fikse aquaduct
Goede typografie valt niet op, maar blijft bij. De juiste combinatie verbetert hiërarchie, leesbaarheid en merkidentiteit en bepaalt de toon van je site.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )
/* Heading */
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
h1 {
font-size: 48px;
}
/* Body */
body, p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
}
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400&display=swap');Creëer contrast
Combineer verschillende karakters, zoals een decoratieve kop met een helder tekstlettertype.
Beperk lettertypefamilies
Gebruik hooguit 2-3 families; te veel oogt rommelig.
Kies voor leesbaarheid
Lopende tekst moet ook klein leesbaar zijn. Kies schermvriendelijke lettertypes.
Test op meerdere apparaten
Wat op desktop werkt, werkt niet altijd mobiel. Bekijk meerdere schermformaten.
Pas bij je merk
Serif straalt traditie uit; sans-serif voelt modern. Kies wat bij je merkstem past.
Let op het gewicht
Gebruik verschillende gewichten voor nadruk en hiërarchie.
Zo gebruik je de tool
Verfijn je typografiesysteem in vier eenvoudige stappen. De interface is gemaakt voor ontwerpers, ontwikkelaars en productteams die snelheid en precisie waarderen.
Stap 1: Kies je koplettertype
Kies een lettertype voor koppen, zoals Archivo Black, en pas grootte en gewicht aan terwijl je realtime meekijkt.
Stap 2: Pas het tekstlettertype aan
Kies een aanvullend lettertype en verfijn grootte, gewicht en regelhoogte voor goede leesbaarheid en balans.
Stap 3: Gebruik willekeurig voor inspiratie
Klik op Willekeurig voor geselecteerde combinaties en bekijk rechts direct het bijgewerkte voorbeeld.
Stap 4: Kopieer direct nette CSS
Kopieer de gegenereerde CSS naar je stylesheet zodra je typografie klopt.
Waarom deze tool gebruiken?
Verbind creatieve verkenning met technische uitvoering en werk sneller volgens professionele normen.
Realtime visueel voorbeeld
Zie direct hoe kop- en tekstlettertypen samenwerken en beoordeel contrast, hiërarchie en ritme.
Geavanceerde typografie-instellingen
Verfijn grootte, gewicht en regelhoogte voor leesbare, toegankelijke lay-outs op elk apparaat.
Geselecteerde combinaties ter inspiratie
Ontdek bewezen combinaties van klassieke schreefletters, schreefloze letters en moderne geometrische stijlen.
Productieklare CSS
Exporteer nette, gestructureerde CSS die direct in je ontwerpsysteem past.