Een geschikt lettertype maakt je website niet alleen visueel veel interessanter. Fonts hebben een beslissende invloed op het feit of tekstgedeelten worden genegeerd of gelezen. In deze post laat ik je zien hoe je de perfecte font voor je website kunt vinden!

Een goede typografie is het resultaat van een jarenlange studie van fonts en design. Een paar basistips kunnen je echter helpen om je oog te trainen en het juiste lettertype voor je webproject te gebruiken.

De allereerste website ...

Of: Wat gebeurt er als je een website zonder CSS laadt? In het verleden werden websites weergegeven in de lettertypes die in het besturingssysteem waren ingebouwd. Deze worden vandaag de dag nog steeds geladen als de font niet toegankelijk is. De allereerste website is tegenwoordig nog steeds online en ziet er nog precies zo uit als toen hij in december 1990 live ging:

Hoe de website wordt weergegeven in je browser is niet afhankelijk van de website - maar van het besturingssysteem dat je gebruikt. En of je wijzigingen hebt aangebracht in de Default Settings.

Voor Windows-gebruikers worden Serif Fonts standaard weergegeven in Times New Roman. Op Mac OS X is het standaardlettertype daarentegen Times of Times Roman. Arial wordt door Windows gebruikt als Sans Serif lettertype. Mac OS X gebruikt Helvetica als standaardlettertype.

Zach Leatherman heeft een project ontwikkeld waarin hij verschillende besturingssystemen en de bijbehorende lettertypen heeft getest. De Font Family tool geeft je een interessant inzicht in fallback fonts - en hoe ze er uiteindelijk uitzien. 

Georgia en Verdana

In het midden van de jaren '95 werden de standaardlettertypen aangevuld met Georgia en Verdana, speciaal voor het web ontworpen door Matthew Carter. Het bouwen van goede websites met een schamele keuze uit vijf lettertypes gaf de - uit nood geboren - aanleiding tot een tegenwoordig twijfelachtige gewoonte: zo werden fonts die meestal niet op het web bestonden, als afbeeldingsbestanden ingebouwd.

De nadelen hiervan liggen voor de hand:

• De geschikte weergave op verschillende apparaten kan ontaarden in vervelend detailwerk.
• De woorden kunnen door de zoekfunctie niet worden ontdekt of vertaald.
• Bovendien betekent elke tekstwijziging een enorme extra uitgave.

Designing for the Unknown

Gelukkig is de technologie intussen veel verder ontwikkeld. Ondanks dit alles is ook hier een fundamentele kennis van het technische vakgebied noodzakelijk. Want het is belangrijk om te begrijpen wat er op je website gebeurt als het gewenste lettertype niet beschikbaar is. Dit kan verschillende redenen hebben. Bijvoorbeeld een slechte internetverbinding, die tot vertraging bij het laden van je CSS-bestand leidt.

In tegenstelling tot grafisch ontwerp geldt op het web: slecht (ongeschikt) lettertype is beter dan helemaal geen lettertype.

Dus terwijl je worstelt met welke font jouw site visueel het beste ondersteunt, zijn er ook fundamentele technische vragen om te stellen:

• Wordt je tekst ook weergegeven als het CSS-bestand niet is geladen? 
• Is je pagina nog steeds leesbaar in Standard Serif en Sans Serif? 
• Lever je een alternatief lettertype aan? Hoe wordt het weergegeven? Kun je nog andere instellingen doen die je meer controle geven over de  fallback-lettertypen?

Want allereerst is het belangrijk dat de inhoud überhaupt weergegeven wordt. De algemene leesbaarheid is beslissend bij het kiezen van het lettertype. 

Interessante basisprincipes over FOUT versus FOIT (wanneer het lettertype wordt geladen) worden gegeven door Robin Rendle in zijn artikel Loading Web Fonts with the Web Font Loader.

Meer informatie over dit onderwerp vind je hier:

• https://www.filamentgroup.com/lab/font-events.html
• https://css-tricks.com/almanac/properties/f/font-size-adjust/

Waar komt je font vandaan?

Nu je de technische achtergrond en fallback fonts hebt behandeld, blijft er één heel belangrijk aspect over. Namelijk waar je lettertype eigenlijk vandaan wordt geladen. Zoals gezegd heeft elk besturingssysteem zijn eigen standaard lettertypen. Bovendien kan elke gebruiker lettertypen op zijn computer installeren. Het is daarom onmogelijk te weten welke lettertypen beschikbaar zijn - of niet. 

Om onze websites niet alleen in Arial en Times New Roman te hoeven weergeven, wenden we ons steeds vaker tot webgebaseerde font services. Het voordeel is duidelijk: de beperkingen, die we hebben door het gebruik van standaardlettertypen, worden omzeild. De keuze uit de beschikbare lettertypes wordt vergroot.

De bekendste hier zijn waarschijnlijk Google Fonts (gratis) en Adobe Fonts (betaald). Maar er zijn nog andere aanbieders. Vooral in Europa leiden de strengere richtlijnen voor gegevensbescherming er vaker toe dat er een alternatief voor Google wordt gezocht. Er worden niet alleen lettertypes voor het inbedden aangeboden, maar ook platforms die de fonts voor jou hosten, zodat jouw creativiteit niet begrensd wordt. Voorwaarde is natuurlijk wel dat je de rechten of licenties bezit.

Smashing Magazine heeft verschillende aanbieders uitgeprobeerd en zijn ervaringen hier verzameld.

Ontwerpelementen van fonts

Om een geschikte font te kiezen, moet je enkele kenmerken van typografieën kennen. Hier kun je in principe zeggen dat alinea's uit gemakkelijk te lezen lettertypes moeten bestaan. Als het te vermoeiend wordt, stopt de bezoeker met het lezen van je pagina. De informatie die door jou gepresenteerd wordt, wordt niet geconsumeerd. 

Een ander aspect waar je rekening mee moet houden, is hoe het lettertype verandert als het wordt verkleind. Een lettertype dat leesbaar is op een desktop kan moeilijk te lezen zijn in een kleiner formaat op een mobiele telefoon. 

Er zijn indicatoren waar je op kunt letten en die je helpen bij het kiezen van het juiste lettertype.

X-hoogte

In het volgende voorbeeld zie je drie verschillende voorbeelden. De x-hoogte beschrijft de verticale hoogte van de letter x. Als de deze te klein is, wordt de tekst moeilijker toegankelijk, vooral bij kleinere lettergroottes. Als de x-hoogte te groot is, wordt het moeilijker om onderscheid te maken tussen hoofdletters en kleine letters.

Apertures

Apertures zijn de openingen die we in letters vinden. In het algemeen geldt: hoe royaler ze zijn, hoe prettiger het is om lange stukken tekst met dit lettertype te lezen.

Letter Spacing en Kerning

Terwijl letterafstand de algemene afstand tussen letters beschrijft, verstaan we onder kerning de afstand tussen bepaalde letters. Deze tussenruimte kan groter zijn dan tussen andere door de natuurlijke vorm van de letters:

Gelijkmatige afstanden zorgen ervoor dat je fonts een harmonieuzere indruk maken. Dit maakt het leesbaarder. Beide kunnen overigens via CSS worden aangepast, mocht je het gevoel hebben dat het lettertype, dat je gekozen hebt, nog verbeterd moet worden:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminals, stijgers en dalers

Terminals komen voor in de letters a, ä, c, f, j, r, en y:

Ascenders en descenders zijn vergelijkbaar, maar betekenen de verlenging bij bijvoorbeeld f, q en j:

Voor hen geldt: hoe onopvallender ze zijn, hoe minder geschikt ze zijn voor het gebruik bij uitgesproken teksten. Vooral bij Serif Fonts zijn terminals, ascenders en descenders bijzonder goed zichtbaar, en daarom golden deze lettertypen lange tijd als een veilig compromis voor langere tekstgedeelten.

Contrast

Lettertypes met veel contrast (links) zijn minder geschikt voor kleine lettergroottes, zoals die in alinea's worden gebruikt en zijn beter geschikt voor kopteksten.

Bold und Italic

Bij de keuze van je fonts moet je er ook op letten dat ze in verschillende sterktes en stijlen beschikbaar zijn. Dit komt omdat lettertypestijlen die niet beschikbaar zijn, door de browser vervalst kunnen worden en er dan zo uit kunnen zien:

(Telkens aan de rechterkant het lettertype dat door de browser "vervalst" is)

Op basis van deze criteria kun je nu op zoek gaan naar de Body Font voor je website. Aangezien de keuze hiervan meestal ingewikkelder is en er hier op meer dingen gelet moet worden, raad ik aan om te beginnen met het kiezen van de Heading Font(s) gebaseerd op de Body Font (en niet andersom).

Een uitgebreider overzicht en verdere uitleg van termen vind je hier: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif en Monospace

Er is een breed scala aan categorieën voor lettertypes. De drie meest voorkomende zijn waarschijnlijk

• Serif, bijvoorbeeld Times New Roman
• Sans Serif, bijvoorbeeld Arial
• Monospace, bijvoorbeeld Source Code

Als het gaat om font-combinaties zijn er twee eenvoudige werkwijzes die je kunt volgen. Die zijn geen must, maar slechts richtlijnen die je kunnen helpen. Vooral als je niet veel ervaring hebt met het combineren van fonts:

1. Gebruik dezelfde font voor de Body en de Headings - maar verander de sterkte, de letterafstand en de grootte, bijvoorbeeld Lato:

2. Combineer een Serif en een Sans Serif font, bijvoorbeeld Baskerville en Open Sans:

Er is ook een online hulpmiddel waarmee je snel verschillende lettertypecombinaties kunt ontdekken en uitproberen: https://fontjoy.com/#.

Conclusie over typografie op het web

Een ander belangrijk onderwerp dat ik volledig buiten beschouwing heb gelaten, is het gebruik van kleuren. Afhankelijk van het feit of je lettertype op een lichte of donkere achtergrond staat, ziet het er natuurlijk anders uit. Je kunt ook variaties uit fonts maken door hetzelfde lettertypes te nemen en niet alleen in verschillende sterkte weer te geven, maar ook in verschillende kleuren. Houd bij de keuze van een kleur rekening met de Style Guide en de branding van je merk.

Naast het analyseren van andere websites, is het ook een goed idee om te kijken naar huidige trends voor inspiratie. U zult snel merken dat bepaalde combinaties van lettertypes hier steeds herhaald worden en dat er weinig nieuws is. Afhankelijk van het project en de eisen kan het echter nodig zijn terug te vallen op het vertrouwde in plaats van bijzonder innovatief te zijn - meer details vindt u in dit artikel.

Verdere bronnen over het onderwerp

• Meer over kleurtheorie: https://rb001.dev.360vier.net/blog/webdesign-development/web-design-principles/
• Alles over professionele webtypografie: https://prowebtype.com/
• Variabele lettertypen voor responsief ontwerp: https://alistapart.com/blog/post/variable-fonts-for-responsive-design/