Zo kies je het beste lettertype voor je website

Het kiezen van het juiste lettertype voor je website is een minder eenvoudige taak dan het op het eerste gezicht lijkt.

Een paar lettertypes kiezen die jij er mooi uit vindt zien en op je site plempen? Niet zo snel.

Lang niet ieder lettertype leent zich voor websites. En dan gaat het niet enkel om het visuele aspect: het lukraak lettertypes voor je site gebruiken kan ook tot technische problemen leiden (hierover later meer).

Na 30+ websites te hebben ontwikkeld, heb ik een vrij aardig idee wat er komt kijken bij het kiezen van lettertypes voor een website. In dit beknopte artikel lees je alles wat je moet weten.

7 tips voor het kiezen van een lettertype voor je website

Dit zijn mijn belangrijkste tips voor het kiezen van lettertype voor je site.

1. Leesbaarheid boven alles

Dit lijkt misschien een open deur. Maar toch kom je verrassend veel websites tegen met een lettertype wat niet heel makkelijk te lezen is.

Creatief ogende, zwierige lettertypes kunnen je site wellicht een uniek karakter geven. Maar zodra de leesbaarheid in het geding komt, doe je er verstandig aan te kiezen voor iets minder avontuurlijks.

Zorg er daarnaast voor dat je je lettertype minstens 16 pixels groot maakt (18 pixels, of zelfs nog meer, werkt vaak nog beter).

En dat het lettertype leesbaar is op iedere schermgrootte (check je site ook even op je telefoon) is ook zeer belangrijk.

2. Kies niet meer dan twee lettertypes

Meer dan twee lettertypes kiezen brengt een paar problemen met zich mee:

• Je site gaat er rommelig uit zien
• Je gaat een negatieve impact merken op de laadtijden van je website

Kies een lettertype voor je titels, en kies er één voor de “body” tekst (wat gebruikt wordt in je paragrafen, etc.).

Op veel van mijn websites hou ik het zelfs bij slechts een enkel lettertype. Voor een groot deel kies ik hiervoor vanwege laadtijden. Echt een merkbare impact gaat een tweede lettertype niet hebben op de snelheid van je site, maar voor een snelheid aficionado zoals ikzelf telt iedere milliseconde.

3. Kies een lettertype wat aansluit op je merk

Is je merk:

• Modern en minimalistisch? Kies dan voor een sans-serif lettertype (bijvoorbeeld Lato, Open Sans).
• Elegant en professioneel? Dan past serif beter (bijvoorbeeld Merriweather, Playfair Display).
• Creatief en licht? Display of script lettertypes zouden kunnen werken (maar, zoals hierboven gezegd, blijf letten op de leesbaarheid!).

Je verwacht bij een yoga website een ander lettertype dan bij de site van een advocatenbureau.  

4. Creëer contrast door het combineren van lettertypes

Hier is een voorbeeld van een website die ik beheer waarbij ik twee sterk met elkaar contrasterende lettertypes heb gekozen:

PT Serif voor de body, en Montserrat voor de titels.

De stijlbotsing van deze lettertypes werkt heel goed. Wanneer je twee lettertypes kiest, wil je niet dat ze te veel op elkaar lijken.

Verderop in dit artikel vind je nog meer voorbeelden van lettertypes die goed met elkaar matchen.

EXTRA TIP: Iedere professioneel ontworpen website houdt een vaste verhouding aan als het gaat om de verschillende kopteksten (H1, H2, H3, etc) en de standaardtekst. Kies de grootte van je verschillende tekstsoorten dus niet aan de hand van wat “goed voelt”. Een tool als Typescale kan ervoor zorgen dat de grootte van je verschillende types tekst goed op elkaar afgestemd zijn qua grootte.

5. Bekijk je lettertype op verschillende browsers en verschillende apparaten

Soms wil een lettertype niet goed uit de verf komen op een bepaalde browser of apparaat. Daarom is het zaak dit goed te testen.

6. Let op de performance

Gebruik zogenaamde web safe fonts of fonts die zijn geoptimaliseerd voor snelle laadtijden.

Zowel Google Fonts als Adobe Fonts bieden gratis, voor websites geoptimaliseerde lettertypes (over Google Fonts lees je hieronder meer).

7. Denk aan toegankelijkheid

Aansluitende bij het eerste punt: het internet wordt natuurlijk ook gebruikt door slechtzienden en ouderen.

Vooral voor die groepen is de toegankelijk van je website zeer toegankelijk.

Zorg dat je de kleur van je lettertype sterk contrasteert tegen de achtergrond van je pagina. En zorg ervoor dat je tekst niet te dun of zwierig wordt.

Mijn advies: gebruik Google Fonts

Als website eigenaar zou ik als het even kan altijd van Google Fonts gebruik maken. Dit is waarom:

• Het aanbod is enorm. Gezien er meer dan 1.000 lettertypes zijn, moet je voor ieder project wel een geschikt lettertype kunnen vinden.
• Werkt goed op alle browsers en apparaten. Google fonts zijn web-safe waardoor je geen zorgen hoeft te maken dat het op een bepaalde browser of gadget er niet goed uit ziet.
• Snelle laadtijden. Google Fonts worden gehost op Google’s razendsnelle servers.
• Makkelijk te integreren. Google biedt eenvoudig te volgen instructies waarmee je hun lettertypes binnen een handomdraai werkend krijgt op je site.
• Het is gratis. Je hebt geen licentiekosten zoals met sommige andere lettertypes.

Gebruik je WordPress? Dan heb je mazzel. Veel populaire WordPress thema’s zoals Kadence en GeneratePress beschikken over een Google Fonts integratie.

Zelf gebruik ik Google Fonts op al mijn websites.

Erachter komen welk lettertype een website gebruikt

Ben je op een website terecht gekomen waarvan je het lettertype mooi vindt? Dit is hoe je (in Chrome) kunt zien welk lettertype er gebruikt wordt.

Selecteer het stuk tekst, klik op de rechtermuisknop en kies voor Inspect. Scrol omlaag in het scherm wat nu verschijnt bij de Styles afdeling, en op een gegeven moment kom je terecht bij het lettertype wat er wordt gebruikt.

Voorbeelden van lettertypes die goed met elkaar samengaan

Als je meerdere lettertypes wilt gebruiken, zou je een van de onderstaande paren kunnen uitproberen.

Via Google Fonts kun je nog meer lettertype paren samenstellen.