Font-size does matter

20 december 2012 Inzichten /

Als er 1 iets is waar je op moet letten in 2013 dan is het leesbaarheid. De beste manier om bezoekers te overtuigen van het doel van je website is door aangepaste webcopy te schrijven. Maar wat ben je er mee als de bezoeker het niet deftig kan lezen.

16 pixels minumum

16 pixels is de standaard tekstgrootte van browsers. Dat is niet zomaar een waarde. 16 pixels op een scherm komt ongeveer overeen met 12 punt in een boek. Omdat schermen vroeger kleiner waren (en web-designers koppiger) werd dit lange tijd gereset door die waarde percentueel te verkleinen. Na verloop van tijd werden schermen beter, resoluties groter. Maar bij veel websites staat de tekst nog altijd op 12 pixels. Wat het erg lastig maakt om te lezen op een modern scherm.

De basisregel die we bij Wijs al een tijd toepassen: zet de tekstgrootte minimum op 16 pixels. Afhankelijk van het lettertype verhogen we dit nog waar nodig.

font-size: 150%

De evolutie gaat echter verder. Schermen worden nog beter, resoluties nog groter. 16 pixels kan soms al klein overkomen. Op de website van Jeffrey Zeldman staan paragrafen in 24 pixels. 24 pixels! Dat is 150% van de standaard browser waarde. Enkele jaren geleden waren mijn titels nog niet eens zo groot. Is dat niet wat overdreven?

Nope.

Eens je het gewoon bent, lijkt het wel alsof alle andere websites belachelijk kleine tekst hebben. Een artikel van Mark Boulton kan je achteroverleunend in een bureaustoel nog zonder moeite lezen. Probeer dat nog eens vanuit dezelfde positie met je eigen website. De kans is groot dat je geneigd bent om naar voor te leunen en je ogen samen te knijpen.

Leesafstand.

De keuze van de tekstgrootte hangt dus grotendeels af van de leesafstand. De afstand van het oog tot het medium. Een smartphone hou je dichter dan een tablet dan een laptop dan een computer scherm dan een TV dan een ... 
Dus hoe groter de leesafstand, hoe groter de tekst.

Regellengte (zetbreedte)

Een andere factor die meespeelt bij de leesbaarheid van tekst is een comfortabele regellengte. Bij te lange regels is het moeilijker om de sprong te maken naar het begin van de volgende regel. Zo riskeer je dat de lezer regels mist of herleest. De ideale regellengte is tussen de 45 en 75 karakters. 66 karakters wordt aanzien als de perfecte leeslengte.

De regellengte hangt af van 2 zaken:

  • De tekstgrootte: hoe groter, hoe kleiner de regellengte
  • De breedte van de pagina.

De regellengte van webtypography.net op een laptop scherm is bijna dubbel zo lang als hun eigen aanbeveling. 

Door de tekstgrootte 4 pixels te vergroten of 125% wordt de leeslengte korter, de letters groter en dus de leesbaarheid beter.

Screen real estate

Een paragraaf in 22 pixels met een regellengte van 70 karakters kan al snel 700 pixels innemen. Dat is geen probleem als je een blog hebt met maar 1 kolom. Bij een website met meerdere kolommen met een maximum-breedte van 960 pixels schiet er niet veel ruimte meer over om andere content te plaatsen.

Responsive design to the rescue.

Met behulp van responsive design kan je afhankelijk van de schermgrootte de tekstgrootte met een minimale moeite optimaliseren.

Begin met het zetten van de minimum tekstgrootte. Zo zorg je er voor dat de tekst al leesbaar is op kleinere schermen. Zoals gezegd is 16 pixels meestal een goede standaard. Daarna bepaal je met behulp van media-queries vanaf welke breedte de tekst groter moet. Ik neem als standaard 1200 pixels. Daaronder vallen de meeste tablets. Daarboven zitten de meeste laptop en computer schermen.

Op basis van de gekozen tekstgrootte kan je dan bepalen wat de maximum breedte van de pagina wordt. Zo zorg je ervoor dat de regellengte nooit te lang wordt.

Mag het iets technischer zijn?

Lees dan zeker nog eens de volgende artikels

Lees meer

Nieuwsbrief

Doe zoals meer dan 1700 marketing en design experts en ontvang maandelijks onze nieuwsbrief vol inzichten, tips en verrassende nieuwigheden.