Hoe ontwerp je de beste tekst?

Hoe ontwerp je de beste tekst?

3 juni 2015

Het ontwerpen van ‘tekst’ is misschien niet het eerste waar je aan denkt bij webdesign. Toch is het belangrijk om hier goed bij stil te staan. In de tijd van video en fotografie, blijft tekst op veel sites nog steeds het meest gebruikte type content. Het tekstdesign is dus niet alleen belangrijk voor de gebruiker, ook voor de uitstraling van de website en merkidentiteit van de opdrachtgever.

Tips voor een goed tekstontwerp

Er bestaat natuurlijk geen standaard recept en het blijf een kwestie van ‘gezond verstand’. Toch een aantal tips:

1. Gebruik een grotere fontsize

Wanneer je leest in een magazine of boek houd je de tekst dichter bij je ogen dan wanneer je leest op een computerbeeldscherm (in mindere mate geldt dit ook voor tablet en smartphone). Dit betekent dat je letters op een website beter wat groter kunt maken dan dat ze in een boek staan. Een methode is om een boek op leesafstand te houden en de tekstgrootte te vergelijken met de tekst op het computerscherm op de achtergrond. Op het web wordt gespeculeerd over de perfecte fontsize van 16 pixels.

2. Maak scanbare brokken

Een lange homepage (single page) of een uitgebreide detailpagina (long read) passen we tegenwoordig veel toe. Tijdens het scrollen op deze lange pagina’s, is het prettig wanneer je bewust of onbewust kunt bijhouden welke alinea’s je al hebt gelezen. Voldoende witruimte (lucht/ rust) tussen alinea’s (met goede scanbare koppen) en afwisseling in type content (tekst, video, beeld) kan daar bij helpen. Ook een ‘jump-to’ navigatie helpt je bij het navigeren over de lange pagina en het overzicht te behouden.

3. Ruime (maar niet té ruime) interlinie

Een interlinie die in balans is, is belangrijk voor het leesgemak. De standaard HTML interlinie is te klein voor goede leesbaarheid (op internet wordt er gesproken over een ideale interlinie van 140% ten opzichte van de standaard HTML interlinie). Ook gaat het vaak fout met de interlinie tussen een subkop (een H2 of H3 bijvoorbeeld) en de alinea. De ruimte tussen de voorgaande alinea en de alinea waar de kop over gaat, is vaak bijna even groot. Hierdoor is het voor de lezer niet altijd duidelijk waar de subkop betrekking op heeft. Is het een losse kreet? Een link?

4. 66 karakters op 1 regel

Belangrijk voor het leesgemak is de regellengte. Het gaat dan om de moeite die de gebruiker moet doen om met z’n ogen van de ene regel naar de andere regel te schakelen. Is de regel te lang? Dan wordt het moeilijk om met je ogen de regel te zoeken waar het verhaal verder gaat. Is de regel te kort? Dan moet iemand te veel oogbewegingen maken bij het lezen van de alinea. De ideale tekstlengte voor een regel is tussen de 45 en 75 karakters voor een ‘grid’ met 1 kolom en bij meerdere kolommen tussen de 40 en 50 karakters. De ideale regellengte volgens tekstgoeroes schijnt 66 karakters te zijn (inclusief spaties). Bij de ontwikkeling van responsive websites is dit een belangrijk aandachtspunt. Wat gebeurt er bij een extra breed computerscherm of televisiescherm waarop een webbrowser is opgestart? Loopt de tekstregel oneindig door over de volledige breedte of moet je een limiet instellen? Let op: deze blogpost heeft meer dan 66 karakters op 1 regel. Is het nog goed leesbaar? 

5. Gebruik gecentreerde tekst met mate

Om dezelfde reden als het bovenstaande punt, moet je gecentreerde tekst met mate gebruiken. Wanneer de alinea veel tekst bevat of een lange regellengte heeft, bemoeilijkt een gecentreerde tekst de oogbeweging naar de volgende tekstregel. De gebruiker moet niet alleen verticaal zoeken naar waar de volgende tekstregel begint, ook zal de gebruiker zich horizontaal moeten oriënteren om het begin van de regel te vinden. Gecentreerde tekst zien we steeds vaker terugkomen in responsive websites. Dan is bijvoorbeeld de gecentreerde tekst niet vervelend wanneer je de website op een smartphone bekijkt, maar leest het op een desktop vervelend doordat de regellengte toeneemt. Wij beperken ons vaak tot het centreren van een inleidende tekst en gebruiken daar vaak een grotere fontsize voor.

6. Begin vroeg met vullen

Een wat meer praktische tip is het in een vroeg stadium vullen van de website met realistische teksten. Zo kun je nog in het ontwikkelproces qua design de puntjes op de i zetten en de koppen, tussenkoppen en tekst visueel zo goed mogelijk neerzetten. Dit kan het verschil betekenen tussen een website die visueel nét niet in balans is (omdat in de praktijk bleek dat de koppen 2 x zo lang zijn geworden) en een website waarop alles tot in de puntjes is verzorgd.

Handige tools en goede voorbeelden

Er zijn verschillende tools om een gevoel te krijgen bij de fontgrootte en regellengte. Een van de tools die je kunt gebruiken om het zelf uit te testen is de Golden Ratio Typography Calculator. Een echte ontwerper heeft dat natuurlijk niet nodig (een projectleider of opdrachtgever soms wel). Je kunt natuurlijk ook naar een goed voorbeeld kijken: www.brandgrens.nl kijk dan vooral naar een detailpagina over het bombardement.