Geschreven door

Typografie is onderdeel van de gebruikerservaring

Een goed gekozen font maakt een website rustig, herkenbaar en leesbaar. Maar fonts zijn ook bestanden die een browser moet ophalen, verwerken en tonen. Vooral meerdere families, veel gewichten en externe fontdiensten kunnen een pagina vertragen. De Websheriff ziet regelmatig een merkwebsite die vijf varianten laadt terwijl de vormgeving er twee gebruikt. Dat is onzichtbare ballast die mobiele bezoekers wel degelijk voelen.

Performance en ontwerp hoeven geen tegenstanders te zijn. De kunst is om bewust te kiezen wat werkelijk nodig is. Een beperkt en goed ingesteld lettertypesysteem ziet er vaak consistenter uit dan een uitgebreide verzameling die alleen in een ontwerpbestand bestaat.

Inventariseer wat er werkelijk wordt geladen

Begin met een technische check. Welke fontfamilies komen binnen, in welke bestandsformaten en voor welke tekensets? Veel sites laden automatisch een volledige verzameling gewichten, cursief en meerdere talen. Als je website alleen Nederlands en Engels toont, hoef je niet altijd ieder tekenbereik mee te sturen. Als koppen alleen in 700 worden gebruikt, is 600 misschien overbodig.

Beperk het aantal families meestal tot één of twee.
Laad alleen gewichten en stijlen die zichtbaar worden gebruikt.
Gebruik moderne WOFF2-bestanden.
Verwijder oude CSS-verwijzingen naar ongebruikte fonts.

Test na iedere versobering verschillende pagina’s. Een vergeten bold tekst kan anders door de browser worden gesimuleerd en daardoor minder mooi ogen. Kleine controles houden de winst netjes.

Kies een leveringsmethode die past

Fonts vanaf je eigen domein hosten geeft controle over caching, privacy en beschikbaarheid. Je voorkomt een extra externe verbinding en bent minder afhankelijk van een derde partij. Een externe dienst kan gemakkelijker zijn, maar kijk dan goed naar privacy, toestemming en de prestaties van die extra request. “Het staat bij een bekende leverancier” is geen technische afweging.

Zelf hosten betekent ook dat je licentie in orde moet zijn. Niet ieder commercieel font mag zomaar als webfont worden gebruikt. Leg vast welke bestanden je inzet en houd een fallback klaar voor het geval een font niet kan laden.

Voorkom verspringende tekst bij laden

Wanneer de browser eerst een fallback toont en later het webfont, kan tekst verspringen. Dat is vervelend voor lezers en schaadt de visuele stabiliteit. Met de CSS-instelling font-display: swap blijft tekst direct leesbaar, maar er kan een korte wisseling ontstaan. Bij font-display: optional kiest de browser soms voor snelheid boven het latere vervangen. Welke keuze goed is, hangt af van je merk en gebruik.

Stem de fallback zo goed mogelijk af op de uiteindelijke lettervorm. Vergelijk breedte, hoogte en regelafstand. Met moderne CSS kun je die metrics verder bijstellen. Test dit op een langzame mobiele verbinding; op een snelle laptop zie je het probleem vaak niet.

Variable fonts zijn niet automatisch lichter

Een variable font kan meerdere gewichten in één bestand bevatten en geeft ontwerpers veel flexibiliteit. Dat is handig wanneer je echt verschillende tussenwaarden gebruikt. Maar één groot variabel bestand kan zwaarder zijn dan twee zorgvuldig gekozen statische bestanden. Vergelijk dus de bestandsgrootte en niet alleen het marketingverhaal van de techniek.

Gebruik subsetting wanneer dat verantwoord is: maak een kleiner bestand met de tekens die je site nodig heeft. Let op accenten, valuta, pijlen en andere symbolen. Een ontbrekende é of een kapot icoon in een knop is een kleine fout met een grote uitstraling.

Meet op een echte pagina

Kijk naar de impact op de eerste zichtbare tekst, Largest Contentful Paint en layout shifts. Meet met een lege cache en op mobiel. Controleer ook of cache headers lang genoeg zijn, want fonts veranderen doorgaans minder vaak dan pagina-inhoud. Geef bestanden een versie in de naam zodat je veilig lang kunt cachen en bij een wijziging toch de nieuwe versie laadt.

Snelle typografie valt niet op, en dat is precies de bedoeling. De bezoeker leest direct, de vormgeving blijft overeind en je merk hoeft geen snelheid in te leveren voor karakter.