Wat is de ideale lettergrootte, -type en kleur?

door Karen Nijst | 16 feb, 2016 | BLOGS, Over zoekmachines, copywriting en SEO | 6 reacties

Regelmatig vragen klanten of ik de opmaak van de content wil veranderen. Meestal is de vraag of de lettergrootte bijgesteld kan worden naar een kleiner maatje. En waarom geef ik de letters geen kleurtje? Het liefst op een pastelkleurige achtergrond.

In deze blog wil ik graag toelichten waarom ik kies voor een lettergrootte van minimaal 1em (16px) en de letters bij voorkeur donkergrijs kleur op een -gebroken-witte achtergrond.
Een belangrijke reden is dat ik wil dat de tekst zo leesbaar mogelijk is, ook voor mensen die minder goed zien. Vandaar dat ik in de loop der jaren veel artikelen heb geraadpleegd op sites voor mensen met een oogbeperking zoals www.oogvereniging.nl

Mijn bevindingen wil ik hier graag met je delen.

De ideale lettergrootte

Mijn ideale lettergrootte voor de bodytekst is 16 pixels — afhankelijk van het lettertype dat je gebruikt.
Bij 12 pixels of minder moeten de ogen zich te veel inspannen.

Standaard staat het lettertype van een browser (zoals Chrome, Firefox, Opera  of Explorer) ingesteld op een grootte van 16 pixels. Toch lijkt 12 pixels nog steeds gebruikt te worden omdat dit er veelal mooier en strakker uitziet. Maar de browsers hebben die 16 pixels nu juist gekozen om de tekst goed leesbaar te maken.

Als je alleen maar oog hebt voor het uiterlijk 🙂  is de keuze snel gemaakt en hoef je niet verder te lezen. Als je wenst dat de webbezoekers lezen wat je te vertellen hebt, ga dan verder.

Waarom is het beter om voor een groter formaat te kiezen?

• Teksten zijn er om gelezen te worden en een klein lettertype maakt dat een stuk lastiger.
• Daarnaast neemt het aantal oudere gebruikers behoorlijk toe. En mooi of niet, grotere lettertypes zijn nodig om ook voor deze bezoekers een website leesbaar te maken. Zo wijst onderzoek uit dat 40-jarigen nog slechts vijftig procent van het licht door het netvlies krijgt in vergelijking met een 20-jarige. Bij een 60-jarige is dit nog slechts twintig procent.
  Dus: hoe ouder de bezoekers van de website zijn, hoe meer moeite zij hebben om de (kleine) letters te lezen.
• Ook worden de beeldschermen van computers steeds groter, hetgeen invloed heeft op hoe we websites ervaren, lezen en gebruiken. Omdat de afstand tussen jou en een groot scherm relatief groot is, lijken de letters kleiner en dus minder leesbaar. Funest als er een letter wordt gebruikt met een grootte van 12px (0.75em).
  Voor beeldschermen die groter zijn dan 24 inch, oogt zelfs 16px nog te klein.

Het ideale lettertype

Persoonlijk vind ik een schreefloze letter het prettigst leesbaar. En ook zien teksten die zijn opgemaakt in dit lettertype er in mijn ogen een stuk strakker uit. Maar dat is een persoonlijke keuze.

Op de sites voor mensen met een oogbeperking (en andere betrokkenen) vond ik de volgende informatie:

• Schreefloze letters worden als beter leesbaar aangemerkt dan schreefletters. Gangbare schreefloze lettertypen zijn bijvoorbeeld Arial, Helvetica, Univers, Verdana.
• Teksten of woorden in hoofdletters zijn moeilijker leesbaar en moeten daarom bij voorkeur worden vermeden.
• Vette letters hebben over het algemeen een gunstig effect op de leesbaarheid.
• Het is van belang een letter te kiezen waarbij letters die op elkaar lijken, zoals de ‘i’ en de ‘l’ goed te onderscheiden zijn.
• Cursieve letters zijn minder goed leesbaar.
• Scherpe contouren van letters verbeteren de leesbaarheid.
• Schaduwletters verminderen de leesbaarheid van de letters.
• Het wordt afgeraden om te variëren in de spatieruimte tussen woorden omwille van de opmaak. Een constante spatieruimte bevordert de leesbaarheid.

Op zoek naar een mooi lettertype dat wordt ondersteund door de browsers? Kijk op Googke Fonts.
Font Pair helpt je om geschikte lettercombinaties te maken.

Kleurgebruik en contrast

Een  van de belangrijkste klachten van slechtziende en oudere mensen betreft het contrast tussen letter en achtergrond.

Ook achtergronden met een watermerk of pastelkleurige tint zorgen voor veel te weinig contrast en dit gaat ten koste van de leesbaarheid. Gebruik dus een egale kleur die contrasteert. Over het algemeen zijn donkere letters op een lichte achtergrond te prefereren.

‘Effectief met kleur’ zie de site van Accessibility:

De kleurencombinaties die over het algemeen als het best leesbaar worden getypeerd zijn:

• zwart op wit (niet mijn voorkeur omdat dit op het beeldscherm vaak te fel is voor de –soms vermoeide- ogen).
• donkergrijs op wit
• (donker)blauw op wit
• zwart op geel
• (donker)groen op wit
• rood op wit
• rood op (licht)geel

De kleurencombinaties die als het minst leesbaar worden aangemerkt en daarom moeten worden vermeden zijn:

• oranje op wit
• zwart op paars
• rood op groen
• groen op rood
• oranje op zwart

Andere opmaak die bijdraagt aan de leesbaarheid

Hierover zijn al vele artikelen geschreven, en deze blog heeft niet voor niets de titel ‘Wat is de ideale lettergrootte, -type en kleur? ‘.
Maar voor de volledigheid vind je hieronder enkele aandachtspunten waar je rekening mee moet houden als je jouw content laat vormgeven.

Regellengte

Lange regels zijn vermoeiend. Uit een onderzoek van internet marketeer Jim Connolly blijkt dat de leesbaarheid van een web tekst bij meer dan 95 tekens behoorlijk keldert .
Het gebruik van te korte regels, zorgt er echter weer voor dat de vaart uit het lezen verdwijnt. Een ideale regellengte is 60 à 70 lettertekens op één regel. Maar dit hangt ook af van het schermformaat.

Interlinie

Als basisregel kun je stellen dat de regelafstand (line-height in CSS) 1,5 keer de lettergrootte bedraagt. Dit is ook afhankelijk van het lettertype en geldt niet voor de koppen.

Aantal regels en witruimte

Hoe goed je ook schrijft:
Grote tekstblokken schrikken af.  Probeer alinea’s te maken met vier tot zeven regels en gebruik opsommingstekens, afbeeldingen en kopjes waardoor de tekst luchtiger en dus leesbaarder wordt.

Responsive Design

Last but not least: houd er rekening mee dat jouw site wordt weergegeven op zowel kleine als grote schermen. Zo zal een grote letter op een phone anders overkomen dan op een tablet of pc. Goede responsive design zorg ervoor dat de groottes op de verschillende displays zijn afgestemd. Staar je dus niet blind op de weergave op één scherm en vertrouw erop dat je webdesigner weet wat hij/zij doet!

Veel succes!
Karen Nijst