Typografie: hoe tekst eruitziet bepaalt of hij gelezen wordt
Je hebt een goede tekst geschreven. Toch haakt bijna iedereen halverwege af. Dat ligt zelden aan je woorden en bijna altijd aan hoe ze op het scherm staan. Te klein, te dicht op elkaar of in regels die eindeloos doorlopen.
Lezen op een scherm is namelijk vermoeiender dan op papier. Elke afstand die je verkeerd zet, telt dubbel.
Het goede nieuws is dat het geen smaakkwestie is. Er zijn getallen die bewezen werken.
Die getallen zet je een keer goed en daarna profiteert elke pagina ervan.
Hoe je tekst eruitziet bepaalt of hij gelezen wordt.
Wat is typografie?
Typografie is de vormgeving van tekst. Het gaat over je lettertype, de grootte, de afstand tussen regels en de lengte van een regel.
Die vier bepalen samen of iemand blijft lezen. Je woordkeuze doet de rest.
Waarom het meer is dan smaak
Omdat het over leesbaarheid gaat en niet over mooi. Een sierlijk lettertype in een lange tekst kost je lezers.
Vormgeving mag opvallen in je koppen. In je lopende tekst hoort hij onzichtbaar te zijn.
De getallen die ertoe doen
Wat ik aanhoud
Lopende tekst minimaal 17 pixels, liever 18 of 19.
Regelafstand rond de 1,6 keer de lettergrootte.
Regellengte tussen de 50 en 75 tekens.
Koppen duidelijk groter dan je tekst, met minder regelafstand.
Voldoende contrast tussen tekst en achtergrond.
Die derde wordt het vaakst vergeten. Op een breed scherm lopen regels anders door tot honderdveertig tekens.
Waarom regellengte telt
Aan het eind van een lange regel moet je oog terugspringen naar het begin. Bij een te lange regellengte raak je de volgende regel kwijt.
Zet daarom een maximum op de breedte van je tekstblok. Dat is een van de goedkoopste verbeteringen die er zijn.
De lettergrootte
Zestien pixels was jarenlang de norm en is inmiddels aan de kleine kant. Schermen zijn scherper geworden en je publiek is ouder.
Bij het lettergrootte kijk ik naar wie er leest. Bij een doelgroep boven de vijftig ga ik naar twintig.
Op een telefoon
Daar mag hij niet kleiner worden dan op een computer. Dat gebeurt in de praktijk vaak wel.
Test je site dus met tekst en niet met een lege pagina, zie mobile first.
Hoeveel lettertypes
Twee is genoeg. Een voor je koppen en een voor je tekst.
Vaak kan het zelfs met een, in twee diktes. Dat oogt rustiger en het scheelt laadtijd.
Leg ze vast
Zet je keuzes vast als afspraak en niet per pagina. Anders sluipt er na een jaar een derde letter in.
Dat is precies waarvoor een design system bestaat. In CSS leg je die waarden een keer vast.
Webfonts en laadtijd
Een webfonts is een lettertype dat je bezoeker meedownloadt. Elke dikte is een apart bestand.
Vier diktes van twee families is acht bestanden voor elke bezoeker. Dat kost merkbaar tijd, zie pagespeed.
Hoe je dat beperkt
Laad alleen de diktes die je echt gebruikt. Zet ze op je eigen server in plaats van bij een externe dienst.
Dat is bovendien netter voor de privacy van je bezoekers. Zorg daarnaast dat je tekst zichtbaar blijft tijdens het laden, zie accessibility.
Anders staat je pagina even leeg
Dat voelt trager dan het is. Je bezoeker kijkt dan naar een wit vlak terwijl de tekst er al is.
Laat de tekst dus eerst in een standaardletter verschijnen. Zodra je eigen letter geladen is, wisselt hij om.
Test met echte tekst
Zet een alinea van tien regels op je pagina en lees hem op je eigen telefoon. Niet in een ontwerp maar op het toestel zelf.
Daar merk je binnen een minuut of je grootte en je regelafstand kloppen. Een ontwerp op een groot scherm liegt daarover.
Bij koppen mag het krapper
Grote letters hebben minder lucht nodig om leesbaar te blijven. Zet je regelafstand daar dus lager.
Dat scheelt ruimte en het oogt strakker. Het is een van de details die een pagina meteen professioneler maken.
Meer vragen over Typografie
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is typografie?
Welke lettergrootte gebruik je op een website?
Hoeveel lettertypes mag je gebruiken?
Wat is een goede regelafstand?
Wat zijn webfonts en kosten ze laadtijd?
Welk lettertype leest het prettigst op een scherm?
Wat is typografie?
Minimaal 17 pixels voor je lopende tekst, en liever 18 of 19.
Zestien was jarenlang de norm en is inmiddels aan de kleine kant. Schermen zijn scherper geworden en je publiek is ouder.
Bij een doelgroep boven de vijftig ga ik naar twintig. Dat lijkt groot op een ontwerp en leest in de praktijk prettig.
Op een telefoon mag je tekst niet kleiner worden dan op een computer. Dat gebeurt in de praktijk vaak wel.
Test je site dus met echte tekst en niet met een lege pagina. Zet er een alinea van tien regels in en lees hem op je eigen telefoon.
Ga naar 18 of 19 pixels voor je lopende tekst. Zestien is inmiddels aan de kleine kant.
Lees je eigen site een keer op je telefoon met een echte alinea erin. Daar merk je binnen een minuut of het klopt. Bij een doelgroep boven de vijftig ga ik naar twintig pixels. Dat lijkt groot in een ontwerp en leest prettig.
Welke lettergrootte gebruik je op een website?
Typografie is de vormgeving van tekst. Het gaat over je lettertype, de grootte, de afstand tussen regels en de lengte van een regel.
Die vier bepalen samen of iemand blijft lezen. Je woordkeuze doet de rest.
Het is meer dan smaak, want het gaat over leesbaarheid en niet over mooi. Een sierlijk lettertype in een lange tekst kost je lezers.
Vormgeving mag opvallen in je koppen. In je lopende tekst hoort hij onzichtbaar te zijn.
Lezen op een scherm is bovendien vermoeiender dan op papier. Elke afstand die je verkeerd zet, telt daardoor dubbel.
Behandel dit niet als smaakkwestie. Het gaat over leesbaarheid en daar bestaan getallen voor die werken.
Zet die getallen een keer goed en elke pagina profiteert ervan. Dat is een investering van een uur. Lezen op een scherm is vermoeiender dan op papier. Elke afstand die je verkeerd zet, telt daardoor dubbel. Het is dus geen kwestie van mooi vinden maar van meetbaar leesgemak.
Wat is een goede regelafstand?
Rond de 1,6 keer je lettergrootte. Bij tekst van 18 pixels is dat dus ongeveer 29 pixels.
Staat je tekst te dicht op elkaar, dan lopen regels visueel in elkaar over. Te ruim werkt ook niet, want dan valt je alinea uit elkaar.
Bij koppen mag de regelafstand juist krapper. Grote letters hebben minder lucht nodig om leesbaar te blijven.
De regellengte hoort daar direct bij: tussen de 50 en 75 tekens per regel.
Dat wordt het vaakst vergeten. Op een breed scherm lopen regels anders door tot honderdveertig tekens, en dan raakt je oog de volgende regel kwijt.
Houd 1,6 keer je lettergrootte aan en zet een maximum op de breedte van je tekstblok.
Tussen de 50 en 75 tekens per regel is prettig. Langer en je oog raakt de volgende regel kwijt. Bij koppen mag de regelafstand juist krapper. Grote letters hebben minder lucht nodig om leesbaar te blijven.
Hoeveel lettertypes mag je gebruiken?
Twee is genoeg. Een voor je koppen en een voor je lopende tekst.
Vaak kan het zelfs met een familie in twee diktes. Dat oogt rustiger en het scheelt laadtijd.
Leg je keuzes vast als afspraak en niet per pagina. Anders sluipt er na een jaar een derde letter in, en daarna een vierde.
Dat gebeurt vanzelf zodra meerdere mensen aan je site werken.
Zet die waarden dus een keer centraal vast. Dan geldt een wijziging meteen voor je hele site, en kan niemand er per pagina van afwijken.
Blijf bij twee, of zelfs bij een familie in twee diktes. Dat oogt rustiger en scheelt laadtijd.
Leg je keuzes centraal vast en niet per pagina. Anders sluipt er na een jaar een derde letter in. Dat gebeurt vanzelf zodra meerdere mensen aan je site werken. Vastleggen is dus geen luxe maar onderhoud. Twee families in totaal is voor vrijwel elke bedrijfssite ruim voldoende.
Wat zijn webfonts en kosten ze laadtijd?
Een webfont is een lettertype dat je bezoeker meedownloadt. Elke dikte is een apart bestand.
Vier diktes van twee families zijn dus acht bestanden voor elke bezoeker. Dat kost merkbaar tijd.
Laad daarom alleen de diktes die je echt gebruikt. Vaak zijn dat er twee of drie en niet zes.
Zet ze bovendien op je eigen server in plaats van bij een externe dienst. Dat is sneller en netter voor de privacy van je bezoekers.
Zorg ten slotte dat je tekst zichtbaar blijft tijdens het laden. Anders staat je pagina even leeg, en dat voelt trager dan het is.
Laad alleen de diktes die je echt gebruikt. Vaak zijn dat er twee of drie en niet zes.
Zet ze op je eigen server in plaats van bij een externe dienst. Dat is sneller en netter voor de privacy van je bezoekers. Zorg ten slotte dat je tekst zichtbaar blijft tijdens het laden. Anders staat je pagina even leeg en voelt hij trager dan hij is.
Leest je site niet prettig en weet je niet waarom? Stuur me de link via het formulier hieronder. Ik kijk naar je lettergrootte, je regelafstand en de breedte van je tekstblokken, en stuur je terug wat er beter kan. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Letterontwerp, tekstopmaak, lettergebruik
