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.
TLDR; 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.
#Webtypografie en leesbaarheid
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.
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.
#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 */ #Tekstkleur & achtergrond
Kleur is essentieel in webtypografie omdat het hiërarchie creëert, aandacht stuurt en emoties oproept, zonder dat je lettertype grootte of letterdiktes hoeft aan te passen. De color eigenschap definieert de tekstkleur zelf, terwijl background-color de achtergrond erachter zet. Samen zorgen ze voor leesbaarheid, branding-consistentie en visuele rust.
h1 {
color: #ED9121; /* Hex of een andere CSS kleurcode */
background-color: hsl(348, 83%, 54%);
}
#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 */ Letterspatiëring is het proces waarbij de ruimte tussen tekens in een tekstblok wordt aangepast om de leesbaarheid, esthetiek of de algehele visuele balans te verbeteren. Een goede letterspatiëring (witruimte tussen twee letters) zorgt ervoor dat het woord als een eenheid overkomt.
Letterspatiëring wordt vaak gebruikt om een specifiek visueel effect te bereiken, bijvoorbeeld om een strakker uiterlijk te creëren of om belangrijke elementen zoals kopteksten of call-to-action tekst te benadrukken.
Hoeveel je de letterspatiëring vermindert of vergroot, hangt af van het lettertype en de grootte, maar over het algemeen geldt: hoe groter de tekst, hoe meer je de letterspatiëring kunt verkleinen.
h1 { letter-spacing: -0.125em; }
/* 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 */ #Hoofd- en onderkastletters
text-transform is een CSS property die de visuele presentatie van tekst verandert door hoofd- en kleine (onderkast) letters te manipuleren, zonder de onderliggende HTML content aan te passen. Het is een krachtige tool in webdesign voor consistente typografische hiërarchie en branding.
text-transform: uppercase; /* hoofdletters */ /* Waarde: none | capitalize | uppercase | lowercase | full-width | full-size-kana | math-auto | inherit | initial | unset */
#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.
Wereldwijd is ongeveer 8% van de mannen kleurenblind en slechts ongeveer 0,4–0,5% van de vrouwen. Dat betekent grofweg 1 op de 12 mannen versus 1 op de 200 vrouwen, wat gigantische implicaties heeft voor hoe veilig en toegankelijk kleurgebruik in bijvoorbeeld interfaces, datavisualisaties en bewegwijzering moet zijn.
Vertrouw dus nooit alleen op kleur om betekenis over te brengen, maar combineer kleur altijd met contrast, iconen, patronen of tekstlabels, omdat een substantieel deel van je mannelijke doelgroep anders letterlijk niet ziet wat jij bedoelt.
#(Wit)ruimte
Witruimte is een term uit de grafische vormgeving en betekent de ruimte tussen of rondom tekst of afbeeldingen. Het is ruimte die expres leeg wordt gelaten. Witruimtes worden ingezet om verschillende delen van de layout van elkaar te scheiden en de compositie meer rust te geven.
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.
