Font

Website en techniek

Website en techniek

Een font is het lettertype waarin je tekst wordt weergegeven: de vormgeving van letters, cijfers en tekens, in verschillende diktes en stijlen.

Een font doet meer dan tekst leesbaar maken. Het bepaalt voor een groot deel de sfeer en uitstraling van een merk. Een schreefloos (sans serif) font voelt vaak zakelijk en modern, een schreefletter (serif) klassieker en betrouwbaarder, een display- of handgeschreven font opvallender en persoonlijker. Bezoekers zien dat verschil binnen een seconde, nog voor ze een woord hebben gelezen. Daarom hoort de fontkeuze bij je merkidentiteit, net als kleur en beeld.

Er zijn betaalde fonts, waarbij je een licentie koopt per website, app of aantal bezoekers. Maar er zijn ook heel veel goede gratis fonts. Google Fonts is de bekendste bron: honderden families die je vrij mag gebruiken, ook commercieel. Andere gratis bronnen zijn Fontshare en de open-source releases van type foundries. Een gratis font is niet automatisch minder: veel bekende sites draaien op families als Inter, Manrope of Source Serif.

Techniek speelt mee in de snelheid. Elk font dat je laadt is een extra bestand, en per stijl (regular, bold, italic) kan dat een apart bestand zijn. Een variabel font bundelt alle diktes in één bestand en is daardoor vaak lichter dan drie losse gewichten. Moderne formaten als WOFF2 zijn kleiner dan oudere. Fonts van je eigen domein laden (self-hosted) is meestal sneller dan een externe bron, en het laden van alleen de tekens die je nodig hebt (subsetting, bijvoorbeeld alleen Latijn) scheelt opnieuw. Systeemfonts laden per definitie het snelst, want er is niets te downloaden.

Let ook op wat er gebeurt tijdens het laden. Als de tekst pas verschijnt zodra het font binnen is, ziet een bezoeker even niets; springt de tekst daarna van vervangend font naar het echte font, dan verschuift je layout. Dat raakt Core Web Vitals. Een fallback-font kiezen met vergelijkbare afmetingen houdt die sprong klein.

Praktisch: houd het bij twee families (één voor koppen, één voor tekst) en maximaal drie of vier gewichten. Test op mobiel, controleer of cijfers en speciale tekens netjes staan, en check de licentie voordat je een font in een logo of app gebruikt.

Tip

Beperk je tot twee lettertypefamilies en een paar gewichten. Zo blijft je pagina snel en je merk juist herkenbaar.

Hoort hierbij

Alle begrippen