arrow_drop_up arrow_drop_down
Waarom kun je bloktekst beter vermijden op je website?
25 mei 2020 

Waarom kun je bloktekst beter vermijden op je website?

Bloktekst wordt regelmatig toegepast op websites. Dit is tekst die zowel aan de linker- als de rechterzijde langs een strakke lijn loopt. Het ziet er uit –de naam zegt het al– als een blok tekst. Typografen hanteren de term ‘uitgevulde tekst' (Engels: ‘justified text'). Waarom is deze zetvorm voor veel boeken uitstekend, maar voor websites bijna altijd af te raden? Een kleine les psychologie en typografie…

De vraag waarom bloktekst niet geschikt is voor websites komt neer op de vraag: ‘Waarom is bloktekst überhaupt een slechte keuze op pagina's die op HTML en CSS zijn gebaseerd (zoals webpagina's)? En blijft dat altijd zo? Hiervoor zijn twee redenen aan te wijzen.

1 | De psychologische factor

Uitgevulde tekst wordt door de lezer (meestal onbewust) geassocieerd met bepaald soort teksten, namelijk informatie die ‘strak', ‘netjes', ‘officieel' of ‘wettelijk' is. Dus dit kan al gauw als een corset of verplichting aanvoelen. Vergeet niet dat de tekst zelf ook geen speelruimte krijgt, vanwege de eis om links en rechts een strakke lijn te vormen. Hoe anders is dit met linkslijnende en gecentreerde tekst. Daar is elke regel veel vrijer om zijn eigen lengte te bepalen. Wist je overigens dat om dezelfde reden gedichten vaak volledig gecentreerd worden gezet? De tekstregels van een gedicht worden dus zelfs niet gebonden aan de linkerkant! Met als gevolg: nog meer gevoel van vrijheid of openheid.

Die psychologische uitwerking van bloktekst vind je ook terug in drukwerk: glossy magazines hebben gewoonlijk linkslijnende tekst, terwijl bijvoorbeeld ingenieursbladen of jaarverslagen vaker uitgevulde tekst laten zien. Een uitzondering vormen romans, die voor het leesgemak nog steeds voor het meerendeel uitgevuld zijn. Het gebruik van uitvulling is dan ook geen zonde tegen ‘de vormgevingswetten', maar wel een zetvorm die je voor je website –vanuit psychologisch oogpunt– vooralsnog beter links laat liggen.

Een Yoga- of wellness-centrum dat op zijn website bloktekst gebruikt, kan best een bloeiende business hebben, maar dan is dat (natuurlijk gechargeerd) eerder ondanks dan dankzij hun gebruik van bloktekst.

2 | De technische factor

Als de psychologische factor niet veel indruk maakt, dan zal hopelijk de volgende technische factor je overtuigen om bloktekst voor websites af te zweren. Het is bij de huidige stand der techniek (of beter gezegd HTML) namelijk niet goed mogelijk om fraai uit te vullen. Want HTML kan alleen maar geautomatiseerd variëren in woordspatiëring: dit is een heel beperkte manier om uit te vullen.

De breedte van woordspaties

Je kunt dus tekst uitvullen door de breedte van de spaties tussen de woorden te variëren. Dat is wat er in WordPress of welke andere webpagina-app ook gebeurt, als je voor ‘uitvullen' kiest.
Hoe smaller de tekstkolom hoe breder de woordspaties worden. De enige manier om het lelijke effect van de witte gaten enigszins tegen te gaan, is om het tekstkader (in HTML-code:

) breder te maken. Mocht je het voorbeeld hieronder links niet lelijk vinden, dan ga ik ervan uit dat je een fles rode wijn van 3,50 euro ook wel zult verkiezen boven een Château Lafite Rothschild en zie ik je graag terug in een volgend leven waarin typografie weer de plek krijgt die het verdient.

Uitvulling op een webpagina, zonder en mèt handmatig afbreken. In de rechter kolom de ideale, geautomatiseerde uitvulling die alleen voor drukwerk mogelijk is.

Afbrekingen voor een iets beter resultaat

Afbrekingen kunnen uitgevulde tekst verbeteren. Maar hoewel het afbreken van woorden in HTML mogelijk is, komt er veel handwerk bij kijken en zijn de resultaten niet denderend. Voor de insider: je gebruikt dan een zogenaamd zacht afbrekingsteken (middels de HTML-code: ­ ­) om woorden dáár te laten afbreken waar dat goed uitkomt. Gebruik in elk geval geen koppelteken om handmatig af te breken, want als je dan de tekst redigeert, moet je het koppelteken weer verwijderen. En het koppelteken blijft ook zichtbaar als het tekstkader responsive is. Een zacht afbrekingsteken daarentegen wordt alleen zichtbaar als het nodig is, namelijk aan het eind van de tekstregel.

Letterspatiëring en letterverbreding (c.q. versmalling)

Voor drukwerk (bijvoorbeeld in opmaakprogramma's als InDesign) bestaan twee extra middelen die helpen om tekst fraai uit te vullen: de eerste is letterspatiëring. Dat wil zeggen: de ruimte tussen de letters. En dan is er de mogelijkheid tot letterverbreding (in InDesign glyph-schaling genoemd). Dat wil zeggen: het verbreden of versmallen van de letters zelf. Dit zijn meer ‘sophisticated' middelen die voor een optimaal resultaat zorgen. Het moet gezegd dat puristisch aangelegde typografen voor dit laatste middel letterverbreding niet echt warm lopen, maar de praktisch ingestelde DTP-er zal het zonder schroom toepassen zolang de leesbaarheid gewaarborgd blijft. Maar helaas zijn deze twee opties niet geautomatiseerd in HTML door te voeren.

Wat kun je dan wel doen?

Als het uitvullen van tekst op dit moment geen goed idee is voor webpagina's, wat zijn dan de opties? Gebruik eenvoudig linkslijnende broodtekst en zet titels en kopjes eventueel gecentreerd. En beslis of je handmatig zachte afbrekingen (middels de HTML-code: ­­) wilt toevoegen aan die linkslijnende broodtekst. Vooral op smartphones kan de tekst dan een stuk leesbaarder worden. Besef wel dat deze klus tijdrovend kan zijn.

Is er toekomst voor uitgevulde tekst op webpagina's?

Hoewel je er dus op dit moment niet goed aan doet om tekst op een website uit te vullen, is voorzichtig optimisme toch wel aan de orde. Want de technische ontwikkelingen staan niet stil. Het is in sommige webprogramma's al mogelijk om letterspatiëring en letterverbreding handmatig toe te passen. Maar in de praktijk is dat natuurlijk niet te doen voor elke tekstregel. Dus pas als dit geheel geautomatiseerd kan worden toegepast (zoals in InDesign), dan gloort er weer hoop voor uitgevulde tekst op webpagina's. Maar zelfs dan komt uitgevulde tekst alleen in aanmerking voor officiële pagina's zoals het privacy-statement of voor bedrijfspagina's van incasso- en advocatenbureaus, notarissen of levensverzekeraars etc.

Over de schrijver
Voorman van 'Grafische Cursussen’ in het volwassenenonderwijs: Photoshop, InDesign, Premiere Pro, WordPress, Infographics maar natuurlijk ook typografie en kleurenleer etc. Auteur van software-boeken en nu met een nieuwe passie en missie bezig: online marketing voor al onze cursussen in Amsterdam, Utrecht, Den Haag en Breda. "Oh wat is het ondernemerschap heerlijk".
Danielle Bakker
Webdesign Maastricht
Reactie plaatsen