25. Opmaak van tekst

25.1 CSS en HTML: de techniek van de opmaak van tekst

De broncode van een webpagina is geschreven in HyperText Markup Language, afgekort tot HTML. De tekstopmaak hoort niet in de HTML, maar is vastgelegd in zogenaamde cascading style sheets, afgekort tot CSS.

Hieronder de HTML-code voor een titel bovenaan de pagina. De h1 in de html-code betekent dat de titel een heading1-opmaakprofiel heeft.

In de CSS staat welke tekstopmaak er bij de h1 hoort, namelijk:

In de browser wordt de HTML samengevoegd met de CSS tot een leesbare en opgemaakte tekst. Met de CSS leg je allerlei tekstopmaak vast, zoals de lettertypes, tekstkleur, achtergrondkleur, randjes, regelafstand en alinea-afstand.

25.2 Kies voor een schreefloos lettertype

Gebruik bij voorkeur een schreefloos lettertype, zoals Open Sans, Helvetica, Verdana of Arial.

Er zijn 2 soorten lettertypen of fonts:

• schreefletters (serif)
• schreefloze letters (sans serif)

Een schreef is een kort lijntje dat aan het uiteinde van letters zit. In de afbeelding hierboven zie je de streepjes omcirkeld.

Onze adviezen voor het kiezen van een lettertype voor het web:

• Kies een schreefloos lettertype (sans serif).
• Voor de printversie kan een serif-font gekozen worden.
• Probeer zo weinig mogelijk verschillende fonts te gebruiken. Te veel verschillende fonts maken een webpagina onrustig.

Via de CSS kun je het lettertype van je site aangeven. Dat doe je met font-family. Het font dat je kiest moet ook aanwezig zijn op de computer van degene die jouw website bekijkt. Daarom kies je voor de zekerheid in de CSS voor een aantal fonts, waarbij je afsluit met een generiek font:

In dit geval kijkt de browser van de bezoeker eerst of 'Open sans' beschikbaar is. Is dat niet zo, dan kijkt de browser of 'Helvetica' gebruikt kan worden. Lukt dat ook niet, dan kiest de browser een sans-serif-lettertype dat wel aanwezig is op de computer.

Organisaties hebben vaak hun eigen huisstijl en hun eigen 'huislettertype'. Het heeft de voorkeur om voor het web een lettertype te kiezen dat voldoet aan bovenstaande adviezen.

25.3 Regelafstand

Voor een goede leesbaarheid is de regelafstand van belang: de verticale afstand tussen de regels binnen een alinea. Ook die kun je in absolute en relatieve maten definiëren. Ook hier heeft de relatieve maat de voorkeur.

De standaardwaarde die een browser hanteert (100%) is te klein.

Voor websites gebruik je liever een grotere regelafstand, bijvoorbeeld 160%.

In de CSS ziet dat er als volgt uit:

25.4 Regellengte

De regellengte is de horizontale lengte van een regel. De ideale regellengte voor desktop is naar schatting maximaal 120 tekens als de content 1 kolom beslaat.

Over de regellengte bestaan veel misverstanden. Op de echo chamber van het internet schrijven veel auteurs dat de ideale lengte rond de 70 tot 80 tekens zou zijn. Echter, dit onderzoek is gebaseerd op tekst die van papier worden gelezen. Bij dit onderzoek kijken ze naar de hoofdbeweging, een grote bewegingsuitslag is minder prettig dan een kleine (Ga bij een tenniswedstrijd niet helemaal vooraan zitten ...).

Maar de leesafstand bij papier is 30 tot 50 cm en bij een beeldscherm tussen de 50 en 90 cm (hoe groter het scherm, hoe groter de afstand). Door de grotere leesafstand bij het lezen vanaf een beeldscherm is de bewegingsuitslag minder groot dan bij papier. De conclusies uit dit onderzoek zijn dus niet goed bruikbaar voor de regellengte op een scherm.

In het artikel The Line Length Misconception van M. Jackson Wilkinson citeert hij onderzoek dat aangeeft dat voor online de regellengte langer kan zijn. Echt sluitend onderzoek op dit onderwerp konden wij niet vinden, maar aannemelijk is dat een regellengte tot 120 tekens nog uitstekend leest. Dit gebruiken wij overigens ook in dit e-book.

Bij lezen vanaf een beeldscherm speelt ook mee dat kortere regels leiden tot eerder scrollen. Onnodig scrollen wil je ook voorkomen.

Een tekst opnemen in 2 kolommen is ook geen oplossing, want uit het artikel Lower-Literacy Users van Jakob Nielsen blijkt dat een tekst over 2 kolommen moeilijker leest. Het gebruiken van 1 kolom heeft de voorkeur.

25.5 Lange woorden op mobiel

Sommige woorden zijn zo lang dat ze op de mobiele versie van een website niet op 1 regel passen.

Je kunt dit oplossen met een klein beetje extra code. Op een plek waar het lange woord grammaticaal gezien afgebroken kan worden zet je de code '­', zoals in het voorbeeld hieronder:

Op desktop zie je dan gewoon 'Echtscheidingsprocedure' en op mobiel Echtscheidings-procedure.

25.6 Kies de lettergrootte niet te klein

Als richtlijn kun je aanhouden minimaal 80% van de standaard lettergrootte.

De laatste jaren is het lettertype steeds groter geworden. Dat komt enerzijds door de hogere resolutie van beeldschermen, waardoor tekst steeds kleiner werd. Anderzijds ook om mobiel gebruik makkelijker te maken (ook al kiezen de meeste websites voor een eigen opmaak voor mobiel).

Maak ook andere teksten, zoals een bijschrift, niet kleiner dan de gewone tekst.

25.7 Cursief en vet

Gebruik vet alleen om een woord of zinsdeel nadruk te geven, bijvoorbeeld:

Gebruik vet niet om een tussenkop op te maken. Als je dat doet, weten zoekmachines en mensen met spraak-/braille-uitvoer niet dat je een kopje bedoeld.

Maak ook niet hele hele zinnen of alinea's cursief. Onderbouwing daarvan vinden we onder andere in de WCAG-richtlijnen. In de richtlijn 3.1: Make text content readable and understandable staat 'Avoiding chunks of italic text'.

Over cursief en vetgedrukt staat op gov.uk:
Don’t use italics, as this text can be difficult for dyslexic users to read. ALL CAPS should be used sparingly for similar reasons, and never used for full paragraphs or blocks of text. Bold text is the best option for emphasis within a paragraph.

Ook Nielsen toont met onderzoek aan dat cursief minder goed leest op het web (zie Prioritizing Web Usability van Jakob Nielsen).

Enkele woorden cursief of vet maken om deze extra aandacht te geven is juist wel goed.

Er zijn nogal eens misverstanden over het gebruik van vet en cursief, namelijk dat het vanwege toegankelijkheid niet gebruikt kan worden. Voor toegankelijkheid is een woord vet of cursief geen enkel probleem. In de meeste gevallen doen screenreaders hier helemaal niets mee, dus er is geen andere stem of andere tekst te horen bij vet of cursief. Dat betekent echter ook dat we belangrijke betekenis niet kunnen overbrengen met alleen vet of cursief.

Tot slot nog een technische toevoeging: wanneer spreken we nu in html/css precies over vetgedrukt? In css kun je met font-weight aangeven of een tekst wel of niet vetgedrukt is. Dat kan ook met een getal: font-weight 100 is bijvoorbeeld normaal en font-weight 700 is vetgedrukt.

Wel of niet vet is ook belangrijk voor het vaststellen of een contrastwaarde toegankelijk is. Voor die situatie kun je aanhouden dat alles vanaf 700 vetgedrukt is en alles van 100 t/m 600 normaal (niet -vetgedrukt)

25.8 Gebruik een aparte stijl voor de opmaak van de lead

Een artikel heeft een lead (een samenvatting), direct onder de titel. Vaak is er behoefte om de lead een andere opmaak te geven. Gebruik daar een apart opmaakprofiel voor en maak de lead niet handmatig op. Overleg eventueel met je webbouwer hoe dit technisch kan worden opgelost.

In de HTML-code ziet dat er dan bijvoorbeeld als volgt uit:

Bij voorkeur is er in het cms een apart invoerveld voor deze lead.

25.9 Gebruik een [Enter] om naar een nieuwe alinea te gaan

In bijna elk contentmanagementsysteem (cms) start een Enter een nieuwe alinea. In plaats van een Enter gebruiken mensen vaak ook een Shift-Enter (of 2 x keer een Shift-Enter) om zo minder of juist meer afstand te krijgen tussen 2 alinea's. Met een Shift-Enter gaat de cursor naar een nieuwe regel, maar niet naar een nieuwe alinea. Je maakt dan in de html een zogenaamde break : <br>. Er wordt geen nieuwe alinea gestart.

Het is beter om echt een nieuwe alinea te starten, om verschillende redenen:

• Vanuit taalkundig perspectief: het is over het algemeen beter echte alinea's te gebruiken en niet een pseudo-nieuwe alinea te starten. Kies voor dezelfde alinea óf voor een nieuwe.
• Vanuit usability: het is ook goed zichtbaar dat een nieuwe alinea is gestart en je houdt een uniforme huisstijl op de site.
• Vanuit vindbaarheid: zoekmachines interpreteren een alinea als een zelfstandige teksteenheid. Wanneer bepaalde trefwoorden samen in een alinea voorkomen, geeft een zoekmachine deze een zwaarder gewicht.
• Vanuit toegankelijkheid: als je de tekst in echte alinea's opmaakt, kunnen gebruikers van screenreaders gemakkelijker van alinea naar alinea springen. Het is zo gemakkelijker om de tekst te scannen.

Als de afstand tussen alinea's te groot is, vraag dan de webbouwer om de alineastijl in de css aan te passen. Dan is de afstand direct in de hele website goed.

Gebruik liever geen lege alinea's om ruimte te creëren. Dat regel je beter door met css extra witruimte aan de opmaakprofielen toe te voegen.

Er zijn situaties waarin je wel een break (Shift-Enter) kunt gebruiken, bijvoorbeeld bij het weergeven van adresgegevens, zoals hieronder.

25.10 Gebruik bij opsommingen de opsommingsopties van de teksteditor

De meeste cms'en (en tekstverwerkingsprogramma's) hebben aparte knoppen om opsommingen op te maken. Er is een ongeordende opsomming en een geordende opsomming (zie afbeelding hieronder voor een voorbeeld in een editor). De internetterm voor een opsomming is 'Lijst', een slechte vertaling van het Engelse woord 'list'.

Om te zorgen dat ook in de html-code de tekst als een opsomming gecodeerd wordt, is het belangrijk de opsommingsmogelijkheden uit de editor te gebruiken en opsommingen niet op een andere manier op te maken.

De html van een ongeordende opsomming is bijvoorbeeld:

En op de site ziet dat er als volgt uit:

Een genummerde lijst of geordende opsomming heeft als html-code bijvoorbeeld:

En op de site ziet dat er als volgt uit:

Omdat een opsomming niet altijd de gewenste opmaak heeft, kiezen webredacteuren er soms voor om de opsomming op een andere manier te maken, bijvoorbeeld door voor een gewone alinea een streepje (min-teken) te plaatsen. Of bij genummerde opsommingen door er gewoon een cijfer voor te zetten.

Dat heeft enkele nadelen:

• Vanuit toegankelijkheid: omdat de tekst niet opgemaakt is als een echte lijst herkent de spraak- en braille-uitvoer hem ook niet als opsomming.
• Vanuit gebruiksvriendelijkheid: opsommingen zijn visuele ankerpunten bij het lezen, net als kopjes en hyperlinkteksten. Niet goed vormgegeven opsommingen kunnen makkelijk over het hoofd gezien worden bij het snel scannen van een pagina. En als elke redacteur de opsommingen weer anders invoert, maakt dat de site slordig en inconsistent.
• Vanuit vindbaarheid: goed opgemaakte opsommingen krijgen in zoekmachines een zwaarder gewicht.

Soms heeft een opsomming niet de gewenste opmaak, zoals te veel witruimte of te veel inspringen. De oplossing is ook hier: pas dit aan in de css.

25.11 Gebruik HTML-headings voor de opmaak van koppen

Een kop moet altijd een kopopmaak hebben. Dat is een eis vanuit de WCAG. In HTML kies je dan voor bijvoorbeeld een h1, h2 of h3.

Deze opmaak zelf mag wel vet of cursief zijn. Het gaat niet om de visuele weergave, het gaat er om dat de onderliggende code goed is. Dit kun je zelf makkelijk onderzoeken met een tool als Web Developer.

25.12 Zorg voor een goed contrast

Een zwarte tekst op een witte achtergrond leest nog altijd het beste (zie Prioritizing Web Usability, pagina 240). Witte tekst op een zwarte achtergrond (diapositief) kan weliswaar een mooie uitstraling hebben, maar de randen van de letters versmelten (blurring) met de zwarte achtergrond. Daardoor is de leesbaarheid minder.

Elke afwijking van zwarte tekst/witte achtergrond maakt het contrast kleiner en verslechtert de leesbaarheid. Er zijn mensen die last hebben van een witte achtergrond, maar zij zijn meestal gewend om hun browser zo in te stellen dat de witte achtergrond vervangen wordt door een minder witte.

Het contrast tussen voorgrond en achtergrond kun je berekenen. Je krijgt dan de contrastwaarde of contrastratio. Als minimale contrastwaarde geldt 4,5 bij gewone tekst en 3,0 bij vette en/of grotere tekst. Dit is namelijk de waarde die in de WCAG wordt aangehouden, de internationale webrichtlijnen. Maar ook met dit contrast is tekst soms moeilijk te lezen, bijvoorbeeld als je beeldscherm niet zo goed is, de omgeving waarin je werkt niet optimaal of je ogen minder goed zijn. Daarom is ons advies voor gewone tekst: kies minimaal 7,0 als contrastwaarde. Dit is ook de contrastwaarde die de WCAG aanhoudt voor niveau AAA.

De contrastwaarde kun je testen met verschillende tools.

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

25.13 Weergave van hyperlinks

Een hyperlink in een lopende tekst moet duidelijk te onderscheiden zijn van gewone tekst. Je kunt hiervoor de criteria uit de WCAG gebruiken:

• De contrastratio tussen hyperlinks en de omliggende tekst is minimaal 3,0 : 1. Dat geldt ook voor de kleur van bezochte hyperlinks.
• Behalve kleur moet er nog een ander onderscheid van links met omliggende tekst zijn. Bijvoorbeeld een onderstreping. Deze onderstreping kan op desktop zichtbaar worden bij mouseover, maar in mobiele weergave moet die onderstreping dan al direct zichtbaar zijn.

Onderstreep in een lopende tekst geen tekst die geen hyperlink is. In websites komt dit tegenwoordig minder voor, maar in pdf-bestanden nog wel heel veel. En dit advies geldt ook voor pdf.

Voor links die niet in een lopende tekst staan, zoals een menu-item, gelden geen extra eisen. Vaak is de lay-out al zo dat het duidelijk is dat het een link is. Onderstreping is dan niet nodig.

25.14 Schrijf niet alles in hoofdletters

Alles in hoofdletters is meestal geen goed idee. Ten eerste denk je dat de schrijver naar je schreeuwt, maar nog belangrijker is dat alles in hoofdletters minder goed leesbaar is.

Hoe komt dat eigenlijk? Met hoofdletters gaat de woordvorm verloren. En de woordvorm maakt het lezen makkelijker. We laten dat hieronder zien met een voorbeeld.

Readability geschreven in kleine letters (met starthoofdletter) gaat makkelijker. Door de variatie in de vorm van de letters is het woord makkelijker te herkennen:

• De hoofdletter bij de start is hoger dan de andere letters
• De ‘d’, ‘b’, ‘l’ en ‘t’ steken naar boven uit, de ‘y’ naar beneden

Als dit woord volledig in hoofdletters is geschreven, ontbreken de uitsteeksels naar boven en de beneden. En onderzoek laat zien dat het lezen van het woord minder makkelijk gaat. Vooral mensen met dyslexie blijken hier extra moeite mee te hebben.

En er is nog een reden om complete woorden niet in hoofdletters te schrijven. Schermlezers lezen hoofdletters soms letter voor letter voor. Dus "GA VERDER" wordt dan opgelezen in losse letters: G A V E R D E R.

Vermijd daarom om alles in hoofdletters te schrijven.

25.15 Call-to-action

Sites bieden niet alleen veel informatie, ze stimuleren ook interactie. Denk aan het invullen van een formulier, een bestelling in een webshop, een inschrijving voor een cursus of een zoekactie. In al deze gevallen is er een knop die leidt tot een actie, bijvoorbeeld de knop 'Versturen' onder aan een webformulier. De knop die de actie in gang moet zetten noemen we de “call-to-action”-button.

Hieronder een voorbeeld van zo'n button (Maak afspraak) op de website van de gemeente Venlo.

Een goede call-to-action voldoet aan de volgende eisen:

• De button nodigt uit tot actie door kleurgebruik, grootte en andere vormaspecten.
• De button ziet er ook als een button, als iets waarop je kunt klikken.
• De button is groot genoeg, zodat het makkelijk is om erop te klikken.
• De tekst van de button is goed leesbaar, vaak groter dan de omringende tekst.
• De button zit het liefst zo dicht mogelijk bij de bijbehorende content.

In een contentpagina staat de call-to-action bij voorkeur direct na de lead. Ook is er bij voorkeur slechts 1 call-to-action.

25.16 Een goed opgemaakte tekst leest makkelijker

Een tekst die goed opgemaakt is, lezen mensen makkelijker. In het boek Thinking, fast and slow van Kahnemann staan verschillende onderzoeken naar het effect van leesbare tekst beschreven. Samengevat blijkt dat alles wat cognitief gemak ('cognitive ease') verhoogt, jouw boodschap geloofwaardiger maakt en ervoor zorgt dat mensen tevredener zijn over jouw tekst.

Kahnemann geeft het volgende voorbeeld met 2 zinnen:

Welke klopt?

Beide beweringen zijn onwaar (Hitler werd geboren in 1889), maar experimenten toonden aan dat meer mensen de vetgedrukte versie geloofden. Dat noemt Kahnemann de illusie van waarheid. Ook een beter contrast en een makkelijker leesbaar lettertype verhogen deze illusie van waarheid.

Nielsen toont aan dat mensen eerder stoppen met lezen als teksten slecht leesbaar zijn (zie zijn boek Prioritizing Web Usability).

Slecht leesbare teksten kunnen echter ook zorgen voor een beter begrip. Ook dat blijkt uit onderzoek dat Kahnemann bespreekt. Bij teksten die slecht leesbaar zijn is de cognitieve inspanning hoger, en dat leidt tot een beter begrip van de tekst.

Nu je dit hebt gelezen, ben je wellicht even in verwarring: moet je nu wel of niet een tekst goed leesbaar maken? Het grote nadeel van slecht leesbare teksten is dat ze meer inspanning vragen bij je bezoekers. Niet iedereen wil die inspanning doen en de inspanning zorgt er voor dat mensen minder tekst lezen ('de batterijen zijn op').

De intentie van de bezoeker is dus ook belangrijk: is de content voldoende belangrijk om je als lezer in te spannen? Moet iemand een tekst echt lezen, bijvoorbeeld de procedure bij een aanmelding voor een opleiding, dan zal die persoon de tekst echt uitlezen en misschien wel begrijpen, ook als is de lay-out van de tekst niet optimaal. Maar meestal zoekt de bezoeker de laagst mogelijke cognitieve inspanning. Als jouw tekst makkelijk leesbaar is, zal hij over het algemeen beter worden gelezen en hoger worden gewaardeerd.

25.17 Verder lezen over leesbaarheid van tekst

Een interessant artikel over dit onderwerp is Legibility, Readability, and Comprehension: Making Users Read Your Words.