Lettertypen combineren

Zo combineer je lettertypen

1. Begin met een van de Voorgestelde combinaties (Redactioneel, Moderne blog, Landingspagina, Nieuws, Elegant, Techmagazine, Boek, Klassiek, Documentatie, Speels). Elke knop toont het lettertype voor de koppen en dat voor de lopende tekst.
2. Of kies zelf een Lettertype koppen en een Lettertype lopende tekst. De lijsten zijn ingedeeld in schreefloze, schreef-, display-, monospace- en handschriftlettertypen. Lettertypen omwisselen verwisselt de twee.
3. Pas de Grootte koppen, de Grootte lopende tekst en de Regelhoogte aan, en kies het Gewicht koppen (Vet (700) of Normaal (400)). Vink Donkere achtergrond aan om de combinatie in de donkere modus te bekijken.
4. Vervang de Tekst van de kop en de Lopende tekst door je eigen woorden: een echte titel en een echte alinea zeggen veel meer dan een pangram. Laat een lege regel tussen alinea’s.
5. Kopieer de CSS-code en volg daarna Zelf hosten met Fontsource om de lettertypen aan je project toe te voegen.

De lettertypen worden geladen zodra je ze voor het eerst kiest (ongeveer 12 tot 50 kB per gewicht). Ze komen van deze site, nooit van een font-CDN.

Wat maakt een goede combinatie?

• Contrast, geen conflict. Het klassieke recept is een schreeflettertype voor de ene rol en een schreefloos lettertype voor de andere: Playfair Display boven Lato, of Montserrat boven Merriweather. Twee lettertypen die op elkaar lijken maar niet gelijk zijn (bijvoorbeeld twee geometrische schreefloze letters), zien er vaak uit als een vergissing.
• Een rustige letter voor de lopende tekst. Daar brengen lezers hun tijd door. Kies een lettertype met open lettervormen en een ruime x-hoogte (Inter, Lato, Open Sans, Source Serif 4, Merriweather) en bewaar displayletters zoals Playfair Display, DM Serif Display, Oswald of Caveat voor korte koppen.
• Passende verhoudingen. Lettertypen met een vergelijkbare x-hoogte gaan goed samen op dezelfde regel en in dezelfde kolom.
• Twee lettertypen zijn genoeg. Maak hiërarchie met grootte, gewicht en witruimte in plaats van met een derde lettertype.

Voor leesbare lopende tekst is 16 tot 20 px met een regelhoogte tussen 1,4 en 1,7 een goed vertrekpunt, met zo’n 60 tot 75 tekens per regel. Koppen hebben meestal een kleinere regelhoogte nodig (1,1 tot 1,3); de CSS-code stelt die voor je in.

De CSS-code

De code declareert twee custom properties, --font-heading en --font-body, elk met een reservestack: is het webfont nog niet geladen, dan toont de browser een vergelijkbaar systeemlettertype (Georgia voor schreefletters, het systeemlettertype van de interface voor schreefloze). Groottes worden in rem geschreven (16 px = 1rem), zodat ze de lettergrootte volgen die de lezer in zijn browser heeft ingesteld.

Zelf hosten en licenties

Alle 20 lettertypen komen van Fontsource, dat open-sourcelettertypen als npm-pakketten aanbiedt. Het installatievak geeft het commando npm install en de import-regels voor de latin-subset en alleen de gewichten die je gebruikt; je bundler kopieert de woff2-bestanden dan naar je build. Lettertypen vanaf je eigen domein serveren is sneller (geen extra verbinding), werkt offline en voorkomt dat je de IP-adressen van je bezoekers naar een externe fontdienst stuurt, een bekend AVG-probleem in de EU.

Volgens de metadata van hun pakket vallen alle lettertypen hier onder de SIL Open Font License 1.1: je mag ze gebruiken op websites, in apps en in drukwerk, commercieel of niet, en ze insluiten. Je mag de lettertypebestanden niet los verkopen. Pas je een lettertype aan, dan moet het onder de OFL blijven en mag het de oorspronkelijke gereserveerde naam niet gebruiken. Het licentiebestand zit in elk pakket.