Kies twee lettertypes die rust en hiërarchie geven

In deze stap kies je een combinatie van twee lettertypes voor koppen en lopende tekst, met goede leesbaarheid op elk scherm en een lichte karakterstempel.

Goede typografie is grotendeels onzichtbaar werk: bezoekers merken het pas als het misgaat. Een verkeerd lettertype maakt een professionele site onleesbaar of doet een serieus aanbod onserieus aanvoelen. In deze les kies je twee lettertypes die samen rust geven, hiërarchie creëren en bij je merk passen, zonder dat de keuze afleidt van de inhoud.

Leren: twee lettertypes, één indruk

In deze video leg ik uit welke combinaties werken voor websites en welke fouten je voorkomt door hoeveelheden en groottes consistent te houden.

Begrijpen: hoe kies je website-typografie?

Beperk je tot twee lettertypes: één voor koppen en één voor lopende tekst, om visuele rust te creëren. Voor koppen kun je iets karaktervol kiezen (Montserrat, Playfair, Inter, of een typografisch sterke serif), voor lopende tekst kies je leesbaarheid boven karakter (Open Sans, Source Sans, Lora, Merriweather). Test op echte schermen en op verschillende formaten, want wat in Figma rustig oogt kan in een browser dichtgekoekt aanvoelen.

Jan Rajtoral van Gonzo Design wijst op een onderscheid dat veel ondernemers missen: een lettertype dat in een logo werkt, werkt vaak niet als bodytekst. Een sterk lettertype voor één regel kan na drie alinea's vermoeiend worden om te lezen. Yard voegt daar een tweede regel aan toe: lettergrootte voor lopende tekst hoort boven de zestien pixels te liggen op desktop, en boven achttien op mobiel. Wie zijn body-tekst op veertien laat staan, vraagt om afgehaakte lezers.

De zes onderdelen van werkbare website-typografie:

1. Twee lettertypes maximaal. Eén voor koppen, één voor lopende tekst, niet meer.
2. Goede contrastverhouding. Een karaktervolle kop tegenover een rustige body voor leesbaarheid.
3. Lettergrootte boven 16px. Voor lopende tekst op desktop, en 18px op mobiel.
4. Voldoende regelhoogte. 1,5 tot 1,7 keer de lettergrootte voor body, krapper voor koppen.
5. Vaste schaal. Vier of vijf groottes maximaal (h1, h2, h3, body, klein), consequent toegepast.
6. Webfont-laadtijd. Geen tien gewichten maar twee of drie, en geoptimaliseerd ingeladen.

Blauwe Nacht herinnert eraan dat typografie de belangrijkste design-keuze is die de meeste mensen onderschatten. Een goed kleurenpalet werkt niet als de tekst onleesbaar is; een sterke kop werkt niet als de body eronder vermoeit. Investeer dus minstens evenveel tijd in typografie als in kleur, want je tekst is het meest aanwezige element op elke pagina.

Toepassen: de blueprint

Vul de Typografie Blueprint in: één A4 met je gekozen kop- en body-lettertype, de vier of vijf groottes en de regelhoogte. Eén pagina, in vijftien minuten klaar.

De eerste actie kost twee minuten: open je homepage op je telefoon en lees een alinea op armlengte. Moet je je ogen samenknijpen, dan staat je lettergrootte te laag of je regelhoogte te krap. Eén waarde aanpassen kan vandaag al meer leescomfort geven dan een hele lettertype-wissel.