Lilian Timmers

Het belang van typografie op het web

door Lilian Timmers

Heb jij dat ook wel eens? Dat je met je neus tegen je beeldscherm gedrukt zit omdat de tekst zo klein is? Ik betrap mezelf er vaak genoeg op dat ik inzoom op webpagina’s, omdat ik de tekst niet kan lezen. En dat is héél irritant.

De leesbaarheid van tekst op je website of online publicatie is ontzettend belangrijk voor het gedrag van lezers. Niet alleen woordkeuze, maar ook een geschikt, gangbaar lettertype speelt hierin een grote rol. Daarnaast bepalen ook de lettergrootte, regellengte en regelafstand of je tekst beter te lezen is.

Online is niet hetzelfde als print

Toen ik de overstap maakte van print naar online, moest ik zelf eerlijk gezegd ook even wennen aan het feit dat het allemaal een stuk groter mag op het web. Oorspronkelijk kom ik namelijk uit de krantenwereld, waar een lettergrootte van 9 of 10px groot vrij gewoon is als het gaat om de broodtekst, oftewel de normale leestekst. Ik kon me mijn eerste online publicatie nog goed herinneren: grote koeienletters voor de koppen en minilettertjes voor de broodtekst. Niet helemaal de bedoeling. De broodletters moesten bijna twee keer zo groot, 16px maar liefst. De koppen mochten wat subtieler uiteraard. In het begin vond ik dat gek, maar inmiddels is dat heel gewoon. 

Typography

Logisch uiteraard, want de verhouding is heel anders op het web. Denk er maar eens over na: je zit vaak verder van je beeldscherm dan van je krant of magazine. In een web publicatie heb je daarom een groter lettertype nodig, omdat de letters vanwege de afstand een stuk kleiner zijn. Maar dat niet alleen. Ook de regellengte is belangrijk, net als de regelafstand. Maar hoe vind je nu de ideale grootte, regellengte en -afstand? Ik denk dat het per font verschilt, omdat deze onderling nog willen verschillen in maten. Of er nu echt ideale richtlijnen zijn weet niet ik niet, maar na wat bronnen te hebben geraadpleegd, kwam ik op de volgende lijst:

Richtlijnen

Lettergrootte: 16px of groter
Regellengte: 45 tot 75 karakters
Regelafstand: 1,4 keer de lettergrootte

Bovenstaande gegevens gelden als gemiddelde groottes, maar is je lettertype nu bijvoorbeeld iets aan de kleine of krappe kant? Dan kun je gerust een pixel hoger gaan zitten.

Processing fluency: mooi versus leesbaar

Tijd voor wat wetenschap. Onze hersenen zijn erg gevoelig voor veranderingen in een boodschap. Hierbij denk je misschien direct aan woordgebruik, maar ook het gekozen lettertype speelt een grote rol. Wil je je lezer meer het artikel in trekken, gebruik dan het juiste font. Processing fluency, oftewel de ‘makkelijkheid waarop onze hersenen informatie verwerken’, is hierbij van groot belang. Het lijkt misschien een onbelangrijke handeling om een goed lettertype te kiezen voor jouw webproductie, maar onbewust heeft het in ons brein grote invloed op ons handelen.

Processing Fluency

Een font heeft namelijk invloed op de leesbaarheid van een tekst. Zo worden leesbare letters zoals Helvetica en Verdana in een split second verwerkt. Dit in tegenstelling tot de wat creatievere fonts (denk aan handgeschreven varianten) die moeilijker te lezen zijn.

Toch heeft het kiezen van een creatief, handgeschreven font wel een ander positief effect op de leesbaarheid van een tekst. Zo komt het namelijk veel persoonlijker over en maakt het de betekenis van een boodschap geloofwaardiger. Moet je dan kiezen voor mooi of leesbaar? Kies voor the best of both worlds, dus een duidelijk, leesbaar lettertype zoals Arial, Helvetica of Verdana en wissel af met creatieve fonts, zoals bijvoorbeeld in een quote.

"Want een quote kan zorgen voor een rustpunt in je tekst."

En dan hebben we het nog niet eens gehad over alle lettertypes die je kunt gebruiken! Want naast de klassieke fonts zijn er door de komst van de tools Typekit en Google Fonts talloze nieuwe webfonts als paddestoelen uit de grond geschoten. Deze zijn meestal net iets frisser dan de klassieke fonts, waardoor jouw publicatie of website misschien een wat luchtigere uitstraling krijgt.

Door het tooltje Skyfonts te installeren voor Windows of Mac OSX is het mogelijk om webfonts van Google Fonts met slechts een muisklik te kunnen downloaden. Zo voeg je lettertypes makkelijk toe door op het plusje te klikken en worden ze netjes voor je bewaard in de tool. Het ultieme voordeel van Skyfonts is dat je de fonts, na het installeren, direct kan gebruiken in de projecten waar je mee bezig bent. Je herkent het vast wel: als je een lettertype los installeert, moet je het eerst opzoeken tussen je ‘downloads’ en vervolgens in je ‘font library’ openen en opslaan. Plus het feit dat je alle regular-, bold- en italicversies allemaal los moet opslaan, terwijl je in Skyfonts complete fontfamily’s kunt opslaan die direct werken. Ideaal toch? Plus het voordeel dat de websites van Fonts.com, Linotype, Monotype en My Fonts ook zijn aangesloten bij Skyfonts, zodat je ook betaalde lettertypes kunt toevoegen.

Mind your words

Let op je woorden!

Last but not least, het belang van je woordkeuze. Dat is iets dat we je misschien niet hoeven te vertellen, maar niet iedereen zorgt ervoor dat de teksten die zij schrijven geschikt zijn voor de lezer die zij bedienen. Schrijf luchtig voor jonge lezers bijvoorbeeld, maar misschien wat uitgebreider voor de oudere lezers die behoefte hebben aan meer verdieping. Denk aan de doelgroep waar je voor schrijft, want uiteindelijk wil je ze aan je binden. Als dat je lukt, komt een lezer zeker terug voor meer.

Hoe je dat precies doet? Met verrassende en relevante content! Lees er meer over in ons blog De ingrediënten voor relevante en verrassende content

Houd rekening met je responsive design

Natuurlijk is het je niet ontgaan dat er een verschuiving op het gebied van webdesign plaatsvindt, waarbij bijna alle producties, websites en andere zaken op het web responsive zijn. Dit houdt in dat alle content op een pagina meeschaalt, zodat je het ook op je tablet en smartphone goed kunt bekijken. Dit heeft gevolgen voor de typografie in een webdesign, waarbij je rekening moet houden met kleuren, lettertypes en lettergroottes. Het maken van een responsive design is belangrijk, maar kost veel tijd om te realiseren.

Responsiveness

In de tool va Foleon kun je dit heel makkelijk toepassen in je online publicatie. Doordat je zowel in de overall Theme style, als in de Page style en Item style op paginaniveau, de kleuren, lettertypes en lettergroottes kan aanpassen voor mobile, heb je je pagina’s binnen no time responsive ingesteld. 

Benieuwd naar de mogelijkheden in onze tool? Log in en ga aan de slag! Nog geen account? Start meteen een gratis trial

Wil je meer weten over typografie? Bel (020) 303 2822 of mail naar lilian@foleon.com.

Lilian Timmers
As Editorial Designer Lilian supports and advises clients about designing their online magazines. She also works on writing blogs and other texts for our website.



Blijf op de hoogte

Laat je inspireren over de toekomst van interactieve webcontent door je aan te melden voor product- en blogupdates.




Get social

Volg ons voor toffe content, tips & tricks en mooie voorbeelden.

Ga verder naar:

Creëer content met maximale impact

Probeer 7 dagen gratis