Dit blog heb ik eerder geschreven voor Refresh Interactions in Rotterdam.
Vorige keer heb ik gesproken over teksten en font-keuze. Inmiddels zijn we daar natuurlijk allemaal heel bewust mee bezig en is het tijd voor de volgende stap. Want niet alleen de keuze van het font draagt bij aan de leeservaring, de wijze waarop de tekst is opgemaakt heeft nog een veel grotere invloed. Eigenlijk ben ik vorige keer niet helemaal eerlijk geweest en staat of valt de leesbaarheid van de tekst niet met de fontkeuze, maar met de opmaak. Zo ‘eenvoudig’ als we een tekst goed leesbaar kunnen maken bij de opmaak, zo makkelijk kunnen we het ook tot een onleesbare brei van letters maken. Gelukkig zijn er aantal basisstappen die ons kunnen helpen om onze tekst niet direct om zeep te helpen.
De juiste grootte
Het is bijna zo logisch dat je het zou vergeten, maar de grootte van de letter bepaalt al in grote mate de leesbaarheid van de tekst. En het kan niet vaak genoeg gezegd worden, ook hiervoor geldt natuurlijk dat de toepassing bepalend is. Voor schermen gelden bijvoorbeeld andere regels dan voor drukwerk. En dan komen vervolgens verschillende schermgroottes ook om de hoek kijken.
Een algemene stelregel is dat lange teksten op een scherm lezen als niet-prettig wordt ervaren. Wat kunnen we er aan doen om die ervaring zo veel mogelijk veraangenamen? Laten we het er over eens zijn dat niemand het prettig vindt om piepkleine letters op een scherm te moeten lezen. Vroeger was er een soort standaard waarbij voor websiteteksten een lettergrootte 12 werd aangehouden. Met de hogere resoluties van tegenwoordig is dat eigenlijk veel te klein. Boeken worden opgemaakt met een grootte 10, maar die houd je veel dichter bij je ogen dan bijvoorbeeld het scherm van een laptop. De iphone hanteert een minimum grootte van 13 en die houd je al veel dichter bij je ogen dan bijvoorbeeld een desktop-computer. Dat beeldscherm staat al gauw een ruwe 50cm van je gezicht vandaan. Dus eigenlijk zouden de letters daarop veel groter moeten zijn. Denk aan een lettergrootte 16, hiermee kom je effectief op eenzelfde grootte als het boek dat je veel dichter bij je houdt. Kortom, de grootte moet zich dus eigenlijk aanpassen aan de resolutie van het scherm (hier komt responsive webdesign om de hoek kijken). Eigenlijk kun je simpel zeggen: op het moment dat je naar voren moet buigen om een tekst te lezen is het te klein (Ik ga hier even uit van platte tekst en niet van voetnoten en dergelijke). Er zijn zelfs artikelen geschreven waarin gezegd wordt dat te kleine teksten je bedrijf uiteindelijk geld zouden kosten. Mede omdat potentiële klanten de tekst überhaupt niet meer lezen.
In dit artikel wordt heel duidelijk en overtuigend uitgelegd hoe om te gaan met lettergroottes en het effect ervan.
Het hangt natuurlijk van het gekozen font af welke lettergrootte er precies gebruikt moet worden, maar over het algemeen kom je redelijk goed uit met onderstaand lijstje:
- Adresgegevens huisstijl(visitekaartjes) – 7pt
- Brochure teksten – 8 à 9 pt
- Boeken – 10 pt
- Webontwerp voor mobiel – 14 pt
- Webontwerp voor laptop & desktop – 16 pt
De juiste afstand
Wanneer de juiste grootte is bepaald kijken we naar de afstanden. Dit is eigenlijk het echte opmaken. Hierbij letten we op 3 afstanden:
1. De afstand rondom de tekst (ouderwets gezien de zetspiegel)
Bij de opmaak van boeken hanteert men de zetspiegel. Hiermee wordt de witruimte rondom de tekst op een pagina bepaald (het deel waar wel tekst staat is dus in feite de zetspiegel). Staat de tekst namelijk te ver naar de rand van de pagina, dan leest het boek niet prettig. Er zijn hele formules waarmee de zetspiegel op een bladzijde berekend kan worden. Voor websites geldt in feite hetzelfde, daarbij hanteren we ook een witruimte rondom de tekst (en ook tussen kolommen). Over het algemeen kun je stellen dat de afstand rondom de tekst links, rechts, boven en onder een tekst (optisch) gelijk moet zijn.
2. De afstand tussen de letters (spatiëring)
Vorige keer zei ik al dat de ruimte rondom de letters bepaalt hoe goed een font is. Om de tekst beter leesbaar te maken kunnen we die afstand tussen de letters zelf groter of kleiner maken. Dit moet alleen niet in het wilde weg gebeuren. Want staan de letters te dicht op elkaar kun je ze niet meer onderscheiden, staan ze te ver uit elkaar, dan kun je woorden niet meer onderscheiden. Kortom, alleen spatiëren wanneer nodig.
3. De afstand tussen de regels (interlinie)
Tot slot zorgt de regelafstand voor een luchtige uitstraling van de tekst. Is de afstand tussen de regels bijvoorbeeld te klein dan zijn de regels bijna niet meer te onderscheiden en dat leest niet prettig. Staan de regels daarentegen te ver van elkaar, dan valt de tekst uitéén en is de tekst ook niet meer te lezen. Zie onderstaande afbeelding.
Links is de afstand veel te ruim, de tekst valt bijna uit elkaar. In het midden is het juist veel te krap. Rechts is een stuk prettiger voor het oog.
Bovenstaande genoemde waarden staan natuurlijk niet vast. Er bestaan eigenlijk geen vaste waarden voor de opmaak, maar worden bepaald op basis van gevoel voor ruimte en vorm. Je kunt dit gevoel uiteraard wel “trainen”.
Hiërarchie
Na bovenstaande technische kennis tot slot – en misschien wel het belangrijkste – de hiërarchie in de opmaak (ontwerp). Hieronder versta ik in dit geval de hoofdkoppen, subkoppen, tussenkopjes, platte tekst, voetnoten etc. Met deze elementen kun je zwaarte geven aan je teksten en zodoende de leesrichting bepalen. Wat is het belangrijkste, wat wil je dat de lezers als eerste zien? Dit moeten we er uit laten springen. Wat willen we op de tweede plaats en wat op de derde? Kortom, hiermee kan de juiste uitstraling aan een tekst gegeven worden. Die juiste uitstraling is uiteraard afhankelijk van de doelgroep van de tekst. Moet het speels, strak, zakelijk of juist frivool? Als het goed is, is daar al rekening mee gehouden bij het kiezen van het font, maar stel jezelf die vraag gerust nog een keer. In het complete proces is het belangrijk de uiteindelijke doelgroep continu in het achterhoofd te houden.
In onderstaande afbeeldingen is goed te zien hoe een simpele tekst voorzien kan worden van meer lading. Op zich is de opmaak van de tekst in de eerste afbeelding niet fout. Het is alleen wat saai en we lezen de tekst gewoon van boven naar beneden. Alles krijgt evenveel aandacht.
Hier zien we dat door het gebruik van verschillende groottes en de toepassing van kleur de leesvolgorde ineens heel anders is. Je begint niet meer bovenaan, maar in het midden bij “Maak van jouw bedrijf de organisatie van de toekomst”. Vervolgens bewegen je ogen omhoog, naar “Better Business, Better World”. Daarna gaan je ogen naar de datum om tot slot te eindigen bij de platte tekst.
Als laatste kunnen we nog een truc uithalen om de ogen te leiden. Door slechts een simpele lijn te plaatsen kunnen we het ‘stramien’ doorbreken. Of je nou wilt of niet, je ogen zien die lijn altijd als eerste en zullen de lijn ook altijd volgen. Zo kunnen we dus nog meer aandacht vestigen op de hoofdboodschap.
Niet alleen voor het oog
De opmaak van tekst is dus meer dan alleen maar mooi. Het maakt de boodschap aantrekkelijker om te lezen. Zoals ik in deel 1 al aangaf ga ik er van uit dat we met elke tekst iets proberen te verkopen. Een product, een boodschap of een mening. Door de inhoud aantrekkelijk te presenteren en de aandacht op de juiste punten te leggen, kunnen we er voor zorgen dat de boodschap niet alleen gelezen wordt, maar óók blijft hangen.