Lettertypes kiezen voor uw website: leesbaarheid, karakter en laadsnelheid

Een goed lettertype voor een website is eerst leesbaar, ten tweede passend bij uw merk en ten derde licht voor de laadsnelheid. Lettertypes hebben karakter, want schreefletters worden vaak als traditioneel gelezen en afgeronde schreefloze letters als vriendelijk, maar die indrukken zijn zachter dan ze klinken en leesbaarheid wint altijd. Twee lettertypes, een tekstgrootte van minimaal 16 pixels en een klein aantal fontbestanden dekken de meeste bedrijfssites.

Belangrijkste punten

• Leesbaarheid gaat voor karakter: kies een heldere tekstletter en leg het karakter in de koppen.
• Gebruik hooguit twee lettertypefamilies en weinig gewichten, voor een rustiger beeld en een snellere pagina.
• Lopende tekst is minimaal 16 pixels met ruime regelafstand.
• Lettertypes zijn bestanden die elke bezoeker downloadt, dus ze beïnvloeden snelheid en stabiliteit van de opmaak.
• Dezelfde lettertypes horen terug te komen in uw website, documenten en presentaties.

Wat lettertypes uitstralen

Schreefletters, met kleine streepjes aan de uiteinden, voelen vaak gevestigd en redactioneel. Schreefloze letters voelen modern en direct. Afgeronde vormen voelen vriendelijk en smalle vette letters voelen luid. Advocatenkantoren en adviesbureaus kiezen vaak voor koppen met schreef, terwijl softwarebedrijven en ontwerpstudio's vaak geometrische schreefloze letters kiezen.

Dit zijn tendensen, en een bekwame ontwerper kan ze bewust doorbreken. Zie karakter als reden om te kiezen tussen twee leesbare lettertypes en niet als reden om een slecht leesbaar lettertype te accepteren.

Leesbaarheid beslist

Bezoekers scannen voordat ze lezen, en elk klein obstakel kost aandacht. Kies voor lopende tekst een lettertype met heldere letters, open spatiëring en onderscheidbare tekens, zodat een hoofdletter I en een kleine l niet op elkaar lijken. Stel de grootte in op minimaal 16 pixels, gebruik een regelhoogte van ongeveer 1,5 en houd regels op een prettige lengte, grofweg 50 tot 75 tekens.

Ook contrast telt. Ons artikel over de psychologie van kleur behandelt de verhouding van 4,5 op 1 voor gewone tekst. Houd tekst bovendien links uitgelijnd, want uitgevulde tekst geeft ongelijke gaten die het lezen moeilijker maken.

Combineren: hou het bij twee

Een gangbare aanpak is één lettertype voor koppen en één voor lopende tekst, gekozen op contrast. Een kop met schreef met een schreefloze tekst is een klassieke combinatie, en omgekeerd ook. Gebruik één familie met meerdere gewichten als u het zekerste pad wilt. Meer dan twee families laat een site ongepland ogen en maakt de download zwaarder.

Gebruik grootte, gewicht en spatiëring voor hiërarchie, en geen extra lettertypes.

Lettertypes en laadsnelheid

Elk fontbestand dat een bezoeker downloadt, kost tijd. Elk gewicht en elke stijl is een apart bestand, dus een familie in zes gewichten is zes downloads. Laad alleen de gewichten die u gebruikt, kies voor moderne formaten als WOFF2 en host de bestanden op uw eigen domein waar de licentie dat toestaat, wat een extra verbinding met een derde partij scheelt.

Het laden van lettertypes beïnvloedt ook de stabiliteit van de opmaak. Wordt een reservelettertype nadat de pagina verschijnt vervangen door het echte, dan kan tekst verspringen, wat meetelt bij Cumulative Layout Shift. De grens van Google voor een goede score is 0,1 of lager. Het lettertype zo instellen dat snel een reservevariant verschijnt en een reservevariant kiezen met vergelijkbare verhoudingen verkleint de sprong. Onze gids over websitesnelheid legt deze maatstaven uit.

Licenties en consistentie

Controleer de licentie voordat u een lettertype gebruikt. Veel lettertypes zijn gratis voor webgebruik onder een open licentie, andere vragen een betaalde licentie die websites dekt. Bewaar de licentiegegevens bij uw merkbestanden.

Gebruik daarna dezelfde lettertypes in uw website, documenten, voorstellen en presentaties. Ontbreekt uw lettertype in een programma, noem dan een vergelijkbaar reservetype in uw merkhandboek. Ons artikel over merksystemen legt uit waarom die consistentie herkenning opbouwt.

Een eenvoudig recept

Kies één leesbaar lettertype voor de tekst en één voor de koppen, of één familie voor beide. Stel lopende tekst in op 16 pixels of meer met regelhoogte 1,5, laad alleen de gewichten die u nodig heeft en test het resultaat op een telefoon. Wilt u een second opinion, dan controleert onze gratis website-audit snelheid en opmaak, en in een gratis kennismakingsgesprek van 30 minuten bespreken we een merkvernieuwing. Zie onze diensten voor hoe wij merk en web samen aanpakken.