Typografie is een ‘dienende kunst’ die de lezer moet ondersteunen in de leesbaarheid en begrijpelijkheid van de geschreven boodschap. Nu we een zeer groot deel van onze dagelijkse informatie niet meer vanaf papier tot ons nemen, maar via beeldschermen van laptops, tablets en smartphones, heeft webtypografie dus ook een grote invloed op de aandacht die we aan tekst verzorging voor die media besteden.
Helaas wordt het belang van webtypografie op de meeste websites miskend. Terwijl webtypografie essentieel is voor de leesbaarheid van je webteksten én daardoor dus ook voor de conversie.
#Webtypografie en leesbaarheid
Hoe vermijden we de meest voorkomende fouten als het gaat om de leesbaarheid van tekst op het web? De leesbaarheid van de tekst valt of staat niet alleen met de keuze van het lettertype (font), maar zeker ook met de opmaak van de tekst.
In dit artikel wil ik een aantal richtlijnen meegeven voor het verbeteren van je webtypografie, zodat de content van je website te allen tijde gemakkelijk leesbaar is.
#Lettertype (Font)
Bepaalde lettertypes zijn eenvoudiger te lezen dan andere, denk daaraan bij het kiezen van een webfont. Voor lange paragrafen wordt vaak een schreefloze letter (sans-serif) gebruikt zoals bijv. Arial of Helvetica omdat deze op een digitaal scherm beter leesbaar is.
#Lettergrootte
De grootte van de letter bepaalt in grote mate de leesbaarheid van de (brood)tekst. Voor beeldschermen gelden bijvoorbeeld andere regels dan voor drukwerk. Een algemene stelregel is dat het lezen van lange teksten op een scherm als niet-prettig wordt ervaren (zie ook: Regellengte).
Kortom, de grootte moet zich dus eigenlijk aanpassen aan de resolutie van het scherm. De te gebruiken lettergrootte hangt ook af van factoren als zetbreedte, x-hoogte, regelafstand en de leesafstand.
De x-hoogte is de hoogte van de niet uitreikende kleine letters, bijvoorbeeld de a, e, m, o, w of x. Hoe hoger of groter deze letters hoe meer informatie ze weergeven voor de lezer en hoe gemakkelijker de tekst leest. Dit is essentieel bij lage resoluties zoals bij schermen.
p { font-size: 16px; }
/* Waarde: absolute grootte | relatieve grootte | lengte | percentage | inherit */#Regelhoogte
Om lekker te kunnen lezen moeten de tekstregels op een bepaalde afstand van elkaar staan. De regelhoogte is de afstand van de onderste x-lijn van de eerste regel tot de onderste x-lijn van de volgende regel.
De minimumafstand tussen twee tekstregels wordt door de lengte van de stok- en staartletters bepaald. Deze afstand is niet gelijk voor alle lettertypes en hangt nauw samen met de gekozen lettergrootte. Deze witruimte tussen de regels kun je aanpassen in CSS om een goede leesbaarheid te krijgen.
p { line-height: 140%; }
/* Waarde: normal | getal | lengte | percentage */#Regellengte
De regellengte (ook wel zetbreedte genoemd) is de maximale breedte van een tekstblok of kolom waarin de tekst gezet is. Een ideale zetbreedte in pixels of andere lengte-eenheden (zoals o.a. em of rem) voorstellen is moeilijk.
Een regellente van 45 tot 75 karakters (min. 8 tot max. 15 woorden) ervaren lezers als prettig. Een regellengte van 66 karakters, inclusief spaties, is optimaal. De ogen leggen dan een prettige afstand naar het begin van de volgende regel af en hoeven dit niet te vaak te doen.
.container { max-width: 660px; }
/* Waarde: getal | lengte | percentage */ #Uitlijning
Tekst is links, gecentreerd, rechts of uitgevuld uit te lijnen. Links is het meest gebruikelijk. Uitgevulde teksten moeten alleen gebruikt worden in combinatie met afbreken, waarbij niet teveel afbrekingen achter elkaar mogen voorkomen.
Een (optimale) regellengte van 66 karakters is vrij kort en zodra je de tekst uitvult, wordt de afstand tussen woorden te groot.
h4 { text-align: center; }
/* Waarde : left | right | center | justify | inherit */#Letter- en woordspatiëring
Letter- en woordspatiëring dragen ook in belangrijke mate bij tot de leesbaarheid van een tekst. Een goede woordspatiëring (witruimte tussen twee woorden) zorgt ervoor dat we de zinnen niet zien als een verzameling van losstaande woorden, waardoor we ons niet op ieder woord apart hoeven te concentreren.
De zinnen moeten als een geheel gezien worden. Ons oog moet zonder onderbreking over de zin kunnen vloeien. De ideale spatie tussen twee woorden is de ruimte die de letter “e” inneemt (van hetzelfde lettertype en in dezelfde grootte vanzelfsprekend).
p { word-spacing: 5px; }
/* Waarde: normal | lengte */Een goede letterspatiëring (witruimte tussen twee letters) zorgt ervoor dat het woord als een eenheid overkomt en niet als een aantal losstaande letters. Het is niet zo dat alle letters even ver van elkaar staan. De afstand tussen de letters hangt af van de vorm van de letter.
p { letter-spacing: .2em; }
/* Waarde: normal | lengte */ #Regelverloop
Met regelverloop bedoelen we de overgangen van de ene regel naar de andere. Een niet correct regelverloop is zeer storend voor de lezer en kan zelfs voor verwarring zorgen. Smalle regellengtes in combinatie met relatief grote letters zorgen voor een minder goed regelverloop.
p { hyphens: auto; }
/* Waarde: none | manual | auto */#Hiërarchie
Variatie in lettergrootte voor de verschillende (sub)kopteksten is de beste manier om inhoud te onderscheiden. Kleur en mooie kadertjes kunnen helpen, maar verschillende lettergroottes, mits consequent toegepast op al je pagina’s, maken heel erg duidelijk aan jouw lezers wat de belangrijke onderdelen op een pagina zijn.
Het zorgt er ook voor dat lezers met weinig tijd snel de belangrijke stukjes vinden, en dat kan er toe leiden dat ze langer blijven en verder lezen. De meeste mensen scannen nml. eerst een webpagina (vooral kopteksten) en lezen pas verder als een artikel interessant is.
Vanzelfsprekend heeft een ‘Call-To-Action’ een ander gewicht of opmaak dan de broodtekst. Maak datgene wat moet aanzetten tot actie bijvoorbeeld vet- of schuingedrukt of maak gebruik van alleen hoofdletters, ook wel ‘uppercase’ genoemd.
#Contrast
Tekst is er om gelezen te worden. Jouw website dient ook voldoende kleurcontrast tussen tekst en de achtergrond te bieden, zodat de content kan worden gelezen door mensen met een verminderd gezichtsvermogen.
#(Wit)ruimte
Papier leest makkelijker dan een beeldscherm. Witruimte is belangrijk voor een fijne leeservaring. Witruimte geeft rust voor het oog, en vestigt tegelijkertijd de aandacht op de belangrijke (tekst-) elementen. Korte paragrafen, duidelijke regelafstand, veel witruimte en af en toe een afbeelding om het ‘tekstbeeld’ te doorbreken.
p { white-space: normal; }
/* Waarde: normal | pre | nowrap | pre-wrap | pre-line | inherit */Samenvatting
Niet alleen met beeld maar dus ook met letters creëer je een totaalbeeld op jouw webpagina. Zo is uit onderzoek gebleken dat de leesbaarheid van de informatie ervoor zorgt dat de lezer deze informatie uiteindelijk begrijpt en beoordeelt.
Met een uitgebalanceerd gebruik van webtypografie creëer je een ijzersterke website, die veel wordt bezocht en goed converteert.
Deel dit Bericht:
Nog Geen Reacties
Sorry, maar het is niet (meer) mogelijk te reageren op dit artikel.