Wat je moet weten over fonts op het web

Hoe typisch mag je lettertype zijn ?

In deze zomermaanden krijg ik vrij veel klanten die op zoek zijn naar een nieuwe website. Dat is natuurlijk logisch: Mijn doelgroep is de ondernemers, en ondernemers hebben het vaak zomers wat rustiger. Een goed moment dus om je website eens ‘op te frissen’ of te vervangen door een geheel nieuwe.

Soms komt een klant al met een duidelijk idee wat men hebben wil. En dat is natuurlijk heel fijn. Maar soms is het toch ook goed, om eens wat dieper stil te staan bij al die elementen van je website. Zoals bijvoorbeeld de kleurkeuze. Heb jij voldoende rekening gehouden met kleurenblinde mensen? En heb je stil gestaan bij de emoties die kleuren oproepen bij mensen?

Een ander belangrijk punt is de keuze van je lettertype. En ik heb het al eens eerder gehad over de typografie in WordPress. Maar hierbij heb ik mij tot de stilistische kanten beperkt. Waar ik het niet over heb gehad is het niet onbelangrijke technische aspect.

Ooit, in het begin…

Van oudsher was de webbouwer beperkt tot het aantal fonts wat hij op een website kon gebruiken. Hoewel het mogelijk is om ieder op het systeem beschikbare font te gebruiken, bleek dit nauwelijks een voordeel te zijn, omdat de fonts op de verschillende systemen sterk kon verschillen. Dit kon komen door verschillende besturingssystemen, en verschillen in geïnstalleerde software. Wanneer je Word hebt geïnstalleerd heb je heel wat meer fonts onder Windows dan wanneer je dit niet hebt gedaan. Voeg je daar nog eens Photoshop aan toe, dan wordt het aantal fonts exponentieel vergroot. Als webdesigner kun je je dus aardig uitleven, maar degene die de pagina bekijkt, moet het met heel wat minder fonts stellen.

Deze beperking is echter opgeheven: Sinds CSS3 is het mogelijk om downloadbare fonts te definiëren en de browser te vertellen, waar deze fonts gedownload kunnen worden. Hierbij is echter een nieuw probleem om de hoek komen kijken, waar jij als webdesigner of eigenaar van een website ook goed bij stil moet staan.

Niet ieder font mag gebruikt worden voor het web. En voor een groot aantal fonts wat wel gebruikt mag worden, moet je aparte licenties aanschaffen. Het is dus altijd goed om na te gaan of de door jou gebruikte fonts ook wel ‘kunnen’.

Verschillende bestandsformaten

Een tweede probleem is dat niet ieder font-bestand zichtbaar is in alle browsers. Er zijn heel wat font-formaten: ttf, fon, otf… en noem er nog maar een paar. De bedoeling is dat op termijn alle browsers het WOFF formaat gaan ondersteunen. Maar zover zijn we nog niet. Om jouw font ‘cross browser’ compatible te krijgen, is het vaak nodig dat je (online) tools gebruikt om fonts van één formaat in het ander te converteren. Maar dit gaat niet altijd vlekkeloos en er kan heel wat kwaliteitsverlies bij komen kijken.

Google Fonts

Alternatief is gebruik te maken van ‘online font bronnen’, waarvan de bekendste zonder enige twijfel ‘Google fonts’. Dit is een verzameling online fonts (inmiddels in het geval van Google al bijna 900), waarbij je van een aantal zaken zeker kan zijn:

• Het font mag vrijelijk gebruikt worden
• Het font wordt in alle moderne browsers op eenzelfde manier weergegeven.
• Het font-bestand legt geen al te grote belasting op het systeem.

Adobe Typekit

Een andere manier om fonts ‘veilig’ op je website te gebruiken is Adobe Typekit. Dit is echter een oplossing met een heel nest adders onder het gras. Wat is het probleem?

Adobe Typekit is niet gratis. Dat is op zich natuurlijk geen probleem, want een mooi font is best wat waard. Adobe Typekit is vaak ‘gekoppeld’ aan een abonnement op Creative Cloud en er is dus een redelijke kans, dat een webdesigner jou een bepaald Typekit font aan zal bevelen.

Het gebruik van dit font is dan gekoppeld aan het abonnement van jouw webdesigner op Typekit en -sterker nog- indien jij geen klant meer wilt zijn van je webdesigner bestaat er een kans, dat jij je ‘recht op gebruik’ van het font kwijt raakt. En aangezien ‘Typekit’ in staat is op afstand (door een knap stukje JavaScript) fonts te deactiveren, kan jouw mooi opgemaakte pagina ineens gevuld zijn met uitsluitend Verdana of Times New Roman.

Tenzij jijzelf een abonnement op Typekit hebt, raad ik je deze oplossing dan ook zeker niet aan.

Websafe fonts

En natuurlijk heb je ook de fonts die ‘websafe’ geacht worden en vrijelijk gebruikt kunnen worden.

Met fonts hebben we dus keuze genoeg! En altijd als je (meer dan voldoende) keuze hebt, bestaat de werkelijke kunst uit het jezelf weten te beperken.

Samenvattend

Wanneer je zelf op zoek gaat naar fonts voor je website, houd dan vooral rekening met de ‘vindplaatsen’ van deze fonts. De beste manier om een passend font te vinden is en blijft naar mijn mening ‘Google Fonts‘. Met bijna 900 fonts moet er ook zeker een mooi font voor jouw website te vinden zijn. Bijkomende voordelen zijn dat deze fonts gratis zijn, de Google servers waarop deze fonts staan geoptimaliseerd zijn voor download en je altijd ‘goed’ zit met de rechten. Je mag deze fonts altijd legaal gebruiken.