U bent hier: Home » Usability Update » Leesbare teksten op het web

Leesbare teksten op het web

Jaap van de Putte, 2 use it | 15 oktober 2007 | Redactie: Jasper Enklaar

pdf-icoontje Leesbare-teksten-op-het-web-2useIT-20071015.pdf (PDF-bestand: 273 kB)

Samenvatting

Te kleine letters, onduidelijke fonts, slecht contrast tussen tekst en achtergrond: problemen die we regelmatig tegenkomen bij teksten op websites. Hoe kan dat beter? Hoe kunt u ervoor zorgen dat teksten goed leesbaar zijn? Dit artikel helpt u op weg.

Het opmaken van een pagina voor een website is heel anders dan die voor print, zoals voor een boek of een tijdschrift. Ten eerste leest een beeldscherm minder makkelijk en dat stelt al grenzen aan onze mogelijkheden. Ten tweede kan een en dezelfde webpagina er op verschillende computersystemen - denk bijvoorbeeld aan Windows en Apple - er heel anders uitzien.

Toch is het goed mogelijk teksten zo vorm te geven dat ze goed leesbaar zijn. Enkele tips:

Een webpagina leest anders

Lezen vanaf een beeldscherm is anders dan lezen vanaf papier. Het kost meer moeite en het gaat langzamer. Lezers hebben voor het lezen vanaf een beeldscherm ongeveer 25 % meer tijd nodig en ze lezen oppervlakkiger en onrustiger.

Het lezen van een webpagina heeft daarbij nog een extra dimensie. U kunt namelijk niet spreken over "de" webpagina, want op elke computer en bij elke gebruiker kan een website er weer anders uitzien. Dat is afhankelijk van een aantal factoren:

Deze verschillen in lay-out zijn een gevolg van de kracht van het internet, namelijk dat informatie leesbaar is voor iedereen, ongeacht technische of andere beperkingen. Moeten we de lay-outproblemen dan maar op de koop toe nemen? Nee, want u kunt er wel degelijk voor zorgen dat uw site in elke browser goed getoond wordt. Daarvoor hebben we een aantal adviezen opgesteld.

Tekstopmaak in uw website

Eerst even wat technische achtergrondinformatie. Een webpagina is geschreven in de opmaaktaal HTML. HTML geeft structuur aan de inhoud van de tekst. Een kop boven een tekst heeft bijvoorbeeld een bepaalde HTML-opmaak:

Dit is de titel.

De lay-out van deze kop wordt gedefinieerd in een zogenaamde stylesheet of voluit: de Cascading Style Sheet, afgekort tot CSS. In de CSS kunnen we aangeven dat het opmaakprofiel h1 groot en vet moet zijn:

h1 {
    font-size:140%;
    font-weight:bold;
}

In de browser worden het HTML-bestand en het CSS-bestand samengevoegd tot een webpagina.

Het idee om inhoud en opmaak te scheiden is logisch: zo staat alle inhoud en informatie over structuur in de HTML en alle informatie over vormgeving in de CSS.

De CSS van een website is enigszins te vergelijken met de opmaakprofielen in een tekstverwerker. Ook daar kunt u instellen dat teksten standaard een bepaalde opmaak krijgen.

Lettertype: bij voorkeur schreefloos

Lettertypes of fonts zijn onderverdeeld in twee groepen: de schreefletters (serif) en de schreefloze letters (sans-serif): zie voorbeelden hieronder.

Dit is een voorbeeld van een lettertype met schreef, in dit geval Times New Roman.

Dit is een voorbeeld van een schreefloos lettertype, in dit geval Verdana.

Voor het beeldscherm - en daarmee voor het web - leest het schreefloze lettertype het beste.

Maar het lettertype dat de gebruiker ziet is niet per se het lettertype dat u heeft gekozen. De gebruiker moet het lettertype wel op zijn computer hebben. Kies daarom bij voorkeur een algemeen gebruikt schreefloos lettertype. De keuze voor het lettertype legt u vast in de stylesheet.

In de stylesheet of CSS wordt vaak ook een tweede en een derde font gekozen voor het geval het eerste lettertype niet aanwezig is op de computer van de bezoeker van de site. Verder sluit men de fontdefinitie af met de familienaam voor het font: sans-serif. Heeft de computer namelijk alle drie genoemde fonts niet, dan kiest de browser een sans-serif-lettertype. In de CSS ziet dat er als volgt uit:

font-family: Verdana, Arial, Helvetica, sans-serif;

Fontgrootte: niet absoluut maar relatief

Wat is de ideale corpsgrootte? Ook in dat opzicht is het web niet te vergelijken met print.

De werkelijke grootte van een 10-puntsletter verschilt per lettertype en per computersysteem. Bij lage resoluties wordt de corpsgrootte namelijk groter dan bij hoge resoluties. Verder verschillen browsers en besturingssystemen ook in fontgrootte. We kunnen dus geen lettergrootte afdwingen.

Daarom dient de lettergrootte niet in een absolute maat (punten of pixels) gedefinieerd te worden, maar in een relatieve maat. Dan kan de gebruiker eenvoudig de grootte aanpassen. Het gebruik van een relatieve fontgrootte is ook een eis vanuit de Waarmerk drempelvrij.nl-richtlijnen (www.drempelsvrij.nl icoontje voor externe site) en vanuit de Webrichtlijnen Overheid (www.webrichtlijnen.nl icoontje voor externe site).

Er zijn 2 relatieve maten: percentage en em (oftewel de M-hoogte, afgeleid van de grootte van de hoofdletter M). Kiest u voor 100 % of 1.0 em, dan gebruikt de browser zijn standaardlettergrootte. Dit is vrij groot, dus wordt in de meeste gevallen een lager percentage/ of lagere em-waarde aangehouden. 75 - 85 % (of 0.75 - 0.85 em) geeft een prettig leesbare grootte. Voor koppen is dit meestal hoger.

Wat is nu beter: em of %? Het vergroten en verkleinen van de tekst gaat in stapjes. Bij percentage zijn deze stapjes in Internet Explorer kleiner dan bij em. Doordat de stapjes kleiner zijn biedt dit meer mogelijkheden voor slechtziende mensen. Om die reden geven wij de voorkeur aan percentage.

In een stylesheet (CSS) ziet dat er als volgt uit:

font-size: 75%;

Regelafstand

Voor een goede leesbaarheid is de regelafstand van belang: de verticale afstand tussen de regels binnen een alinea. Ook deze kan in absolute en relatieve maten gedefinieerd worden en ook hier heeft de relatieve maat de voorkeur.

In een tekstverwerker is deze regelafstand vaak groter dan 100 %. De standaardwaarde die een browser hanteert (100 %) is te klein. Voor websites wordt vaak een grotere regelafstand gebruikt, bijvoorbeeld 160 %. Zie onderstaand voorbeeld.

Tekst met regelafstand 100% Tekst met regelafstand 160%
De trainer voor Kids (T4K) is een pre-orthodontische myofunctionele behandeling geschikt voor kinderen van 6 - 8 jaar. Met deze behandeling kan op eenvoudige wijze een orthodontische afwijking al tijdens de groei worden behandeld en kunnen de belangrijkste oorzaken hiervan zoals mondademhalen, tongpersen en foutieve slikpatronen worden gereguleerd. Het voordeel is dat de afwijking al op jonge leeftijd kan worden gestuurd en dat een behandeling met een vaste beugel soms kan worden voorkomen of kan worden geminimaliseerd. De meest voorkomende afwijkingen zijn overbeten en open beten. De trainer voor Kids (T4K) is een pre-orthodontische myofunctionele behandeling geschikt voor kinderen van 6 - 8 jaar. Met deze behandeling kan op eenvoudige wijze een orthodontische afwijking al tijdens de groei worden behandeld en kunnen de belangrijkste oorzaken hiervan zoals mondademhalen, tongpersen en foutieve slikpatronen worden gereguleerd. Het voordeel is dat de afwijking al op jonge leeftijd kan worden gestuurd en dat een behandeling met een vaste beugel soms kan worden voorkomen of kan worden geminimaliseerd. De meest voorkomende afwijkingen zijn overbeten en open beten.

In een stylesheet (CSS) ziet dat er als volgt uit:

line-height: 160%;

Regellengte (breedte website)

De regellengte is de horizontale lengte van een regel. Hoe langer de regellengte, hoe moeilijker het is om aan het einde van de regel het begin van de nieuwe regel te vinden. Vandaar dat kranten een korte regellengte hebben: op papier lezen smalle kolommen het beste.

Bij het gebruik van smalle kolommen op een website moet de lezer scrollen om een tekst te kunnen lezen. Dat maakt het lezen moeilijker. Een tekst opnemen in twee kolommen is ook geen oplossing, want uit onderzoek naar laaggeletterdheid icoontje voor externe site van Jakob Nielsen blijkt dat een tekst over 2 kolommen moeilijker leest.

In ieder geval mag de regellengte niet breder zijn dan de website. Want dan is een horizontale scrollbar nodig om de hele regel te kunnen lezen (zie onderstaande screenshot).

Voorbeeld van een pagina met een horizontale scrollbar
Voorbeeld van een pagina met een horizontale scrollbar

Tegenwoordig is de resolutie in de breedte van de meeste beeldschermen 1024 pixels hoger of meer. Het is voldoende om de sitebreedte onder de 1000 pixels te houden voor een goede weergave.

Bij voorkeur is de regellengte niet gelijk aan de breedte van het beeldscherm. Veel websites kennen een zogenaamd "liquid design". Daarbij "vloeit" de pagina mee met de horizontale resolutie van het beeldscherm. Wanneer de tekst uit één brede kolom bestaat, ontstaan er daardoor hele lange regels.

De ideale lengte varieert tussen 500 en 750 pixels. Een mogelijkheid is te kiezen voor een variabele regellengte, waarbij de regellengte niet langer wordt dan ongeveer 760 pixels (restricted liquid design). Op www.joomla.org icoontje voor externe site hiervan een mooi voorbeeld te zien.

Tekstkleur en achtergrond

Een zwarte tekst op een witte achtergrond leest nog altijd het beste. Witte tekst op een zwarte achtergrond kan weliswaar een mooie uitstraling hebben, maar de randen van de letters versmelten met de zwarte achtergrond. Daardoor is de leesbaarheid minder.

Elke afwijking van zwarte tekst/witte achtergrond maakt het contrast kleiner en de leesbaarheid minder. Maar een andere letterkleur (donkerblauw, donkerpaars) of andere achtergrondkleur (bijvoorbeeld cremekleurig) geeft de site wel een eigen uitstraling. Als er voldoende contrast is blijft de tekst ook goed leesbaar. Als richtlijn kunt u als minimale contrastwaarde aanhouden de contrastwaarde die de Webrichtlijnen Overheid hanteren: 1 : 4,5.

Een afbeelding als achtergrond achter de tekst lijkt leuk, maar door de verschillen in contrast zijn teksten daardoor minder goed leesbaar. Plaats daarom tekst liever op een effen achtergrond.

Weergave van hyperlinks

Het is belangrijk om hyperlinks duidelijk te onderscheiden van de andere tekst. Het moet ook duidelijk zijn dat er op geklikt kan worden. Het hoeft niet per se blauw en onderstreept. Er zijn veel verschillende mogelijkheden. Voor ouderen of mensen met weinig computerervaring is de weergave van blauw en onderstreept toch nog steeds het meest duidelijk.

Onderstrepen van tekst die geen hyperlink is, is uiteraard uit den boze.

Structureren van de tekst

Een boek is ingedeeld in hoofdstukken en paragrafen. Ook webpaginas zijn ingedeeld en gebruiken daar koppen en subkoppen voor. Voor webpaginas is het belangrijk dat deze (sub-)koppen als opmaakprofiel een heading krijgen:

Gebruik geen andere opmaakinformatie om een kop te maken.

Nog enkele tips

Gebruik van een CMS

Als u voor het vullen van de website gebruik maakt van een Content Management Systeem (CMS), dan zijn daarin de algemene stylesheet(s) voor de juiste opmaak al opgenomen. Met bovenstaande kennis heeft u meer inzicht in tekstopmaak op het web en kunt u bij de leverancier van het CMS aangeven welke wensen u voor de tekstopmaak heeft.

Gebruikt u een CMS let dan op het volgende:

Opname van opmaakinformatie in een CSS (stylesheet)

Onderhoudt u zelf uw website met een HTML-programma, dan kunt u zelf de stylesheets aanpassen. Alle leesbare inhoud van een website staat tussen de HTML-tags «body» en «/body». Door in de CSS de opmaakinformatie in het body-element te plaatsen, stelt u met enkele regels de lay-out van de hele site in. Ook voor opmaak die vaak al standaard goed lijkt te gaan - zoals zwart voor tekstkleur - is het verstandig dit toch in de CSS vast te leggen.

Onderstaand een stukje uit een CSS, met een deel van het body-element:

body {
(...)
font-family: Verdana, Arial, Helvetica, sans-serif; // definieert het font
font-size: 75%; // lettergrootte
line-height: 160%; // regelafstand
background-color: #fff // achtergrondkleur: wit
color: #000 // kleur tekst: zwart
}

Om de opmaak van een titel (met een h1-opmaakprofiel) te definiêren hoeft u alleen de grootte en de dikte aan te geven:

h1 {
font-size:130%;
font-weight:bold;
}

De keuze van het font wordt overerft van de body (vandaar de term 'cascading' style sheets).

En voor de rekenaars: 130 % is 130 % van de waarde die in de body staat, dus is de fontgrootte eigenlijk 1,3 x 0,75 van de standaardlettergrootte van de browser.

De webrichtlijnen en dit artikel

Moet uw website voldoen aan de Webrichtlijnen Overheid, dan kunt u dit artikel uitstekend gebruiken. Alle aanbevelingen in dit artikel zijn in lijn met de Webrichtlijnen. De richtlijnen beschrijven wel meer dan dat hier genoemd is. Wilt u een specifiek advies op basis van de Webrichtlijnen, neem dan contact met ons op.

Alle artikelen