Lettertypecombinatie-verkenner

Wat is Lettertypecombinatie-verkenner?

De Lettertypecombinatie-verkenner is een gratis tool in de browser voor webdesigners, ontwikkelaars en contentmakers die een verzorgde combinatie van kop en body willen zonder lettertypebibliotheken uit te kammen. Twee onafhankelijke, doorzoekbare kiezers laten je 48 samengestelde Google Fonts filteren op serif, sans, display of mono en voor elke rol een lettertype kiezen, terwijl bedieningselementen per rol het gewicht, de grootte, de regelhoogte en de letterafstand instellen. Een live voorbeeld geeft je kop en alinea weer in de echte lettertypen, en een hussel-knop stelt willekeurige combinaties voor wanneer je inspiratie nodig hebt. Als het je bevalt, kopieer je de gegenereerde CSS in het gewenste formaat — een @import-regel, een HTML-link-tag of Fontsource-achtige npm-imports — en zet je die in een landingspagina, blogthema, diavoorstelling of designsysteem.

Lettertypecombinatie-verkenner gebruiken

1. Filter in de kopkiezer op serif, sans, display of mono, typ om te zoeken en klik op een lettertype om het te selecteren.
2. Doe hetzelfde in de bodykiezer om een aanvullend lettertype voor de alineatekst te kiezen.
3. Open de instellingen om het gewicht, de grootte, de regelhoogte en de letterafstand per rol in te stellen.
4. Typ je eigen kop en zin in het voorbeeldveld, of laat het leeg voor de standaardtekst; druk op Husselen voor willekeurige combinatie-ideeën.
5. Kies het uitvoerformaat — @import, <link> of Fontsource — en kopieer de gegenereerde CSS naar je stylesheet of project.

Voorbeelden

Kop: Playfair Display 700 · Body: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Formaat: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Veelgestelde vragen

Hoe kies ik de twee lettertypen?

Elke rol heeft een eigen kiezer. Filter de catalogus op serif, sans, display of mono, typ een deel van een familienaam om te zoeken en klik op een resultaat om het te selecteren. Kop en body worden onafhankelijk gekozen, en de hussel-knop kiest een willekeurig paar voor je.

Kan ik gewicht, grootte, regelhoogte en letterafstand instellen?

Ja. Open de instellingen om het gewicht, de grootte in pixels, de regelhoogte en de letterafstand (in em) apart voor de kop en de body in te stellen. Elke wijziging verschijnt zowel in het live voorbeeld als in de gekopieerde CSS.

Welke uitvoerformaten kan ik kopiëren?

Drie: een CSS-@import-regel, een HTML-<link>-tag met preconnect-hints, en Fontsource-achtige npm-imports (npm i @fontsource/… plus importregels per gewicht). Alle drie bevatten dezelfde font-family-, gewicht-, grootte-, regelhoogte- en letterafstand-regels voor h1–h3 en body.

Waar komen de lettertypen vandaan en is mijn tekst privé?

Wanneer je een combinatie kiest, laadt je browser alleen die twee families rechtstreeks via de openbare Google Fonts CSS-API op fonts.googleapis.com — een verzoek aan derden vanuit je browser, niet via onze servers. Je voorbeeldtekst en instellingen blijven volledig op je apparaat.

Welke lettertypen zijn inbegrepen?

Een samengestelde set van 48 populaire Google Fonts over serif, sans-serif, display en monospace — waaronder Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono en meer.