Maak je website-teksten lekker leesbaar

Praktische voorbeeldcodes om ervoor te zorgen dat je bezoekers je teksten makkelijk kunnen lezen.

Hoewel we er tegenwoordig aan gewend zijn teksten te lezen vanaf een beeldscherm – of dat nu een desktop monitor is of een tablet of smartphone – het blijft altijd iets lastiger dan lezen vanaf papier. Lezen op een scherm vergt gewoon wat meer ‘mentale inspanning’ dan lezen van papier.

Het is dus belangrijk om het je bezoekers zo gemakkelijk mogelijk te maken als je wilt dat ze de teksten op je website lezen. Hieronder vind je wat praktische voorbeeldcodes.

Voldoende witruimte

Om een tekst visueel aantrekkelijk te maken, moet je in de eerste plaats zorgen voor voldoende witruimte. Dat doe je o.a. door witregels te gebruiken. Als je de verschillende alinea-teksten elk tussen een set paragraaf-tags zet (<p> en </p>), kun je de ruimte aan de onder- en bovenkant van zo‘n paragraaf vastleggen in je stylesheet. In dat stylesheet zet je bijvoorbeeld de code:

p { padding-top 0.8em; padding-bottom: 0.8em; }

Hiermee komt er zowel aan de boven- als aan de onderkant van elke paragraaf 0.8em ruimte.

Wil je geen nieuwe alinea beginnen, maar wel een nieuwe regel, dan doe je dat met de break-code. Deze zet je in je webpagina zelf, op de plaats waar een nieuwe regel moet beginnen (dus niet in je stylesheet):

<br> (zijn je webpagina‘s nog gecodeerd in html4 of xhtml, dan gebruik je de code <br />)

(Twee keer zo‘n break-code onder elkaar zorgt natuurlijk ook voor een witregel.)

Ook kun je witruimte inbrengen door de regelafstand van je tekst iets te vergroten. Zelf vind ik de standaard­regelafstand meestal net wat te klein en lees ik liever teksten met een grotere regelafstand. De regelafstand vergroten doe je door in je stylesheet de eigenschap line-height toe te voegen aan de stijlkenmerken van je alinea’s (experimenteer eens met een waarde van 120% of 130%):

p { line-height: 120%; }

Duidelijke structuur

Verder kun je ervoor zorgen dat je structuur aanbrengt in je tekst door op de juiste plaatsen koppen en subkoppen in te voegen. Die maken een tekst een stuk gemakkelijker te ‘scannen’. Koppen en subkoppen zet je tussen zgn. heading-tags: h1, h2, h3, enz. De vormgeving ervan regel je weer in je stylesheet. De stijlkenmerken voor een kop van het eerste niveau zouden er bijvoorbeeld zo uit kunnen zien:

h1 { 
        padding-top: 0.5em; 
        padding-bottom: 0.5em; 
        font-family: georgia, serif; 
        font-size: 1.4em; 
        font-weight: bold; 
        color: red; 
        }
        

Lijsten en kaders

Heb je erg veel tekst, maak dan bijvoorbeeld lijsten (waar dat kan), of aparte kaders voor voorbeelden of citaten. Zo’n kader valt dan een beetje buiten de normale tekst, en als je er ook nog eens een kop aan toevoegt, kunnen bezoekers snel beoordelen of ze het willen lezen of liever overslaan. De code voor een kader zou er zo kunnen uitzien:

<div class="kader">inhoud van kader</div>

En in het stylesheet komt dan de eigenschappen voor het kader zelf en voor de koppen en paragraaf-teksten ervan te staan:

.kader { 
        width: 300px; 
        max-width: 95%; 
        height: auto;
        float: right; 
        margin: 0.5em; 0 0.5em 0.5em; 
        padding: 0.5em; 
        border: 2px solid orangered; 
        border-radius: 10px; 
        }
        .kader h1 {
        font-family: arial, sans-serif; 
        font-size: 1em; 
        font-weight: bold; 
        color: indigo;
        }
        .kader p { 
        font-family: arial, sans-serif; 
        font-size: 0.9em; 
        font-weight: normal; 
        color: darkslategrey;
        }
        

Afwijkend woordbeeld

Ook kun je grote lappen tekst ‘breken’ door woorden vet of cursief te zetten, misschien zelfs in combinatie met een afwijkende kleur of lettergrootte. Een woord vet of cursief zetten doe je door het woord tussen de tags <strong> en </strong> of <b> en </b> te zetten; voor het cursiveren gebruik je de tags <em> en </em> of <i> en </i>.

Wil je een woord vet maken en een afwijkende kleur geven, dan zet je het eerst tussen een set span-tags (<span> en </span>) en daarna voeg je daaraan een stijl toe, op deze manier:

<span style="font-weight: bold; color: red;">woord met nadruk</span>

Regellengte

En ten slotte moet je ervoor zorgen dat je regels niet te lang worden. Want is dat het geval, dan hebben je lezers aan het eind van een regel moeite het begin van de volgende regel op te pakken. Is het ontwerp van je website zodanig dat de regels wel erg lang dreigen te worden, dan zou je het lettertype iets kunnen vergroten, of afbeeldingen rechts of links naast de alinea’s kunnen zetten.