Mobiele Navigatie

Typografie is een ‘dienende kunst’ die de lezer moet ondersteunen in de overdracht 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 tekstverzorging voor die media besteden.

Helaas wordt het belang van webtypografie op de meeste websites miskend. Terwijl webtypografie essentieel is voor de leesbaarheid van uw 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 uw webtypografie, zodat de content van uw 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.

Tip: Gebruik nooit meer dan 2 verschillende lettertypes in de opmaak van de content van uw website: één voor de kopteksten (headings) en één voor de ‘broodtekst’.

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.

Afbeelding die de Webtypografie beschrijft, zoals x-hoogte, spatiëring, etc

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.

CSS
p { font-size: 16px; } 
/* Waarde: absolute grootte | relatieve grootte | lengte | percentage | inherit */

Tip: Kies een lettertype met grote x-hoogte (zoals bijv. Lucida Grande en Verdana) voor de broodtekst van uw website.

Regelhoogte

Om gemakkelijk 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 kunt u natuurlijk aanpassen in CSS om een goede leesbaarheid te krijgen.

CSS
 p { line-height: 140%; } 
/* Waarde:  normal | getal | lengte | percentage */

Tip: een goede vuistregel is een regelhoogte van tenminste 140% van de tekstgrootte.

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.

CSS
.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 u de tekst uitvult, wordt de afstand tussen woorden te groot.

CSS
 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).

CSS
 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.

CSS
 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.

CSS
p { hyphens: auto; }
/* Waarde: none | manual | auto */

Tip: Soms is het goed het regelverloop een handje te helpen en manueel van regel te veranderen om de leesbaarheid wat te verbeteren.

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 uw pagina’s, maken heel erg duidelijk aan uw 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. Uw website dient ook voldoende kleurcontrast tussen tekst en de achtergrond bieden, zodat de content kan worden gelezen door mensen met een verminderd gezichtsvermogen.

Tip: Lees meer over contrast in mijn Artikel: Tips voor een betere Webtoegankelijkheid.

(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.

CSS
p { white-space: normal; }
/* Waarde: normal | pre | nowrap | pre-wrap | pre-line | inherit */

Tip: Laat uw tekst ademen, wees niet bang om delen van de pagina leeg te laten. Deze witruimte zal de tekst meer op laten vallen.

Samenvatting

Niet alleen met beeld maar dus ook met letters creëert u een totaalbeeld op uw 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ëert u een ijzersterke website, die veel wordt bezocht en goed converteert.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

Nog Geen Reacties

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Leerschoon M/V