Een lettertype kiezen voelt als smaak. Deze vind ik mooi, die niet. In de praktijk is het een van de weinige keuzes die je op elke pagina terugziet. Elke kop, elke alinea, elke knop. Kies je verkeerd, dan merk je dat niet aan een cijfer. Je merkt het aan een gevoel dat niet klopt.
Waar het echt misgaat is bij een merk dat op papier en op scherm anders oogt. Dan valt je huisstijl uit elkaar zonder dat iemand kan aanwijzen waarom.
Bij Vrienden van het Markermeer speelde dat. Ik verzorgde daar het logo, het webdesign, het drukwerk en de vindbaarheid. Een vereniging communiceert via een folder, een bord langs het water en een website.
Ik heb daarom een huisstijlletter gekozen die alle drie aankan. Genoeg karakter voor het logo, genoeg rust voor een lange tekst op scherm. Zo herken je dezelfde hand, of je nu een folder vasthoudt of op je telefoon kijkt.
Een lettertype bepaalt hoe je merk klinkt op papier en op scherm.
Wat is een font?
Een font is de digitale letterset waarmee tekst wordt weergegeven. Het bestand bevat de vorm van elke letter, elk cijfer en elk leesteken.
In het dagelijks gebruik zeggen we lettertype en font door elkaar. Strikt genomen is een lettertype de familie, zoals Arial. Een font is een specifieke uitvoering daarvan, zoals Arial vet cursief.
Waar het vandaan komt
Bij het webfont laden haalt de browser dat bestand op. Dat gebeurt vanaf je eigen server of vanaf een externe dienst. Pas als het binnen is, ziet je bezoeker de juiste letters.
Wat werkt op een scherm
Papier en scherm stellen andere eisen. Een letter met dunne haartjes leest prachtig in een boek en valt weg op een telefoon.
Waar ik op let bij het lettertype kiezen
Onderscheid tussen hoofdletter i, kleine letter L en het cijfer een.
Voldoende ruimte tussen de letters, ook op klein formaat.
Minimaal vier gewichten, zodat je hierarchie kunt maken.
Ondersteuning voor accenten en het euroteken.
Een cursieve variant die echt getekend is, niet scheefgezet.
Die eerste bepaalt de leesbaarheid op scherm meer dan je denkt. Een adres of een ordernummer wordt onleesbaar als die drie tekens gelijk zijn.
Hoeveel gebruik je er?
Twee is genoeg, en vaak is een er ook prima. Meer dan twee families maakt een pagina rommelig en zwaar.
Variatie maak je met lettergewicht en grootte, niet met een derde lettertype. Een kop van achthonderd naast een tekst van vierhonderd geeft al genoeg verschil. Leg die keuzes vast in je design system.
Vergeet de regelafstand niet
Regels die te dicht op elkaar staan lezen zwaar. Ik houd voor lopende tekst ongeveer anderhalf keer de lettergrootte aan. Voor grote koppen mag het juist strakker.
Wat het kost aan snelheid
Elk lettertype is een bestand dat opgehaald moet worden. Vier gewichten zijn vier bestanden.
Laad daarom alleen wat je echt gebruikt. Ik zie sites die negen varianten inladen en er drie tonen. Zet de bestanden op je eigen server en gebruik een modern formaat. Meer daarover lees je bij pagespeed.
Rechten en privacy
Niet elk lettertype mag zomaar op een website. Een licentie voor drukwerk dekt vaak geen webgebruik. Controleer dat voordat je bouwt.
Laad je lettertypen van een externe dienst, dan gaat er informatie over je bezoeker naar die partij. Dat raakt hetzelfde vraagstuk als bij cookie. Ik host lettertypen daarom standaard zelf.
In WordPress stel je dit in via je thema of via CSS. Controleer daarna het contrast, want een dunne letter op een lichte achtergrond valt weg. Dat hoort bij accessibility.
Wat je vastlegt voor later
Noteer welke gewichten je gebruikt en waarvoor. Anders sluipt er na een jaar een vierde variant in via een campagnepagina.
Bewaar ook je licentiebewijs op een vaste plek. Bij een controle of een herontwerp wil je binnen een minuut kunnen aantonen wat je mag gebruiken.
Test op echte tekst
Beoordeel een lettertype nooit op de losse letters. Zet er een echte alinea in, met een adres, een bedrag en een telefoonnummer.
Daar zie je pas of cijfers en leestekens meewerken. Een letter die er in een kop prachtig uitziet, kan in een prijslijst onbruikbaar zijn.
Meer vragen over Font
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een font?
Welk lettertype kun je het beste gebruiken voor een website?
Hoeveel lettertypen gebruik je op een website?
Vertragen webfonts je website?
Wat is het verschil tussen een font en een lettertype?
Mag je elk lettertype zomaar gebruiken op je website?
Wat is een font?
Papier en scherm stellen andere eisen. Een letter met dunne haartjes leest prachtig in een boek en valt weg op een telefoon.
Ik let op vijf dingen bij het kiezen. Is er onderscheid tussen de hoofdletter i, de kleine letter L en het cijfer een? Die drie zien er in veel lettertypen identiek uit.
Is er voldoende ruimte tussen de letters, ook op klein formaat? Zijn er minimaal vier gewichten beschikbaar, zodat je hierarchie kunt maken?
Worden accenten en het euroteken ondersteund? Dat lijkt vanzelfsprekend, maar bij gratis lettertypen ontbreken ze regelmatig.
En is de cursieve variant echt getekend, of alleen scheefgezet? Dat laatste zie je meteen als je het weet.
Die eerste bepaalt de leesbaarheid meer dan je denkt. Een adres of ordernummer wordt onleesbaar als die drie tekens gelijk zijn.
Beoordeel een kandidaat altijd op echte tekst en niet op een mooi voorbeeldwoord. Zet er een alinea in met een adres, een bedrag en een telefoonnummer. Daar zie je pas of het werkt.
Welk lettertype werkt op een website?
Een font is de digitale letterset waarmee tekst op je scherm wordt weergegeven. Het bestand bevat de vorm van elke letter, elk cijfer en elk leesteken.
In het dagelijks gebruik zeggen we lettertype en font door elkaar. Strikt genomen is een lettertype de familie, zoals Arial. Een font is een specifieke uitvoering daarvan, zoals Arial vet cursief.
Dat onderscheid komt uit de drukkerij, waar elke uitvoering vroeger een aparte kast met loden letters was. Voor je website maakt het weinig uit welk woord je gebruikt.
Wat wel uitmaakt is waar dat bestand vandaan komt. De browser haalt het op van je eigen server of van een externe dienst. Pas als het binnen is, ziet je bezoeker de juiste letters.
Daarom zie je op sommige sites een fractie van een seconde een ander lettertype. Dat is het reservelettertype dat wordt getoond terwijl het echte nog onderweg is.
Voor jou als ondernemer maakt het woord weinig uit. Wat telt is dat je weet dat die bestanden ergens vandaan komen, en dat die keuze gevolgen heeft voor je snelheid en je privacy.
Hoeveel lettertypen gebruik je op een website?
Twee is genoeg, en vaak is een er ook prima. Meer dan twee families maakt een pagina rommelig en zwaar.
De klassieke opzet is een lettertype voor de koppen en een voor de lopende tekst. Dat werkt, maar het is geen wet. Een goed gekozen familie met genoeg gewichten kan het alleen af.
Variatie maak je namelijk met gewicht en grootte, niet met een derde lettertype. Een kop van achthonderd naast een tekst van vierhonderd geeft al genoeg verschil.
Elke extra familie kost je bovendien laadtijd. Vier gewichten zijn vier bestanden die opgehaald moeten worden.
Leg je keuzes vast in je design system. Anders sluipt er na een jaar een derde lettertype in via een campagnepagina, en dan is het hek van de dam.
Kijk ook of je thema of paginabouwer niet stiekem een extra lettertype meelaadt. Dat gebeurt vaker dan je denkt en je ziet het alleen in de laadtijd terug.
Vertragen webfonts je website?
Ja, en meer dan de meeste mensen verwachten. Elk lettertype is een bestand dat opgehaald moet worden voordat je tekst goed staat.
Ik zie regelmatig sites die negen varianten inladen en er drie tonen. Dat is puur verlies, want de rest wordt nooit gebruikt.
Laad daarom alleen de gewichten die je echt toepast. Meestal zijn dat er drie: normaal, vet en extra vet voor je koppen.
Zet de bestanden op je eigen server in plaats van ze bij een externe dienst op te halen. Dat scheelt een extra verbinding en het lost meteen een privacyvraagstuk op.
Gebruik daarnaast een modern bestandsformaat, want dat is fors kleiner dan de oude varianten. En stel in dat je tekst zichtbaar blijft terwijl het lettertype laadt. Meer daarover lees je bij pagespeed.
Meet het effect zelf een keer. Haal een ongebruikt gewicht weg en vergelijk je laadtijd voor en na. Het resultaat verrast de meeste mensen.
Mag je elk lettertype zomaar gebruiken op je website?
Nee, en dit wordt vaker over het hoofd gezien dan me lief is. Lettertypen zijn auteursrechtelijk beschermd en worden verkocht met een licentie.
Een licentie voor drukwerk dekt vaak geen webgebruik. Dat zijn twee aparte rechten en je koopt ze los. Gebruik je een letter zonder weblicentie, dan kan de rechthebbende je daarop aanspreken.
Controleer dit dus voordat je bouwt, niet erna. Bij gratis lettertypen staat meestal duidelijk vermeld wat is toegestaan.
Er speelt nog een tweede kwestie. Laad je je lettertypen van een externe dienst, dan gaat er informatie over je bezoeker naar die partij voordat er toestemming is gevraagd.
Dat raakt hetzelfde vraagstuk als bij cookie. Ik host lettertypen daarom standaard op de eigen server van de klant.
Vraag bij een nieuw ontwerp altijd expliciet naar de licentie. Een ontwerper levert soms een letter aan die alleen voor drukwerk is gekocht, zonder dat iemand daarbij stilstaat. Bewaar dat bewijs op een vaste plek, zodat je het bij een herontwerp terugvindt.
Twijfel je of jouw lettertype goed leest of goed gelicentieerd is? Stuur me je website via het formulier hieronder. Ik kijk welke varianten er worden geladen, wat dat kost aan laadtijd en of ze van je eigen server komen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Lettertype, letterfamilie, typografie
