We were Gents and Wijs, but now you can call us Duke & Grace.

2Ghent

Foreestelaan 1
9000 Ghent

Brussels

Antwerpselaan 40
1000 Brussels

This blog post is archived.

Go to our recent blog posts.


20 december 2012 - Story

Font-size does matter

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

Share this insight on

It's time to stop scrolling and start making.

Let's get in touch

Call us +32 9 335 22 80

Back to top