+31 (0)6-52 65 37 61

Wat is de ideale lettergrootte, -type en kleur?

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 graag met je delen.

De ideale lettergrootte

fontMijn 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. Een letter met een grootte van 12px (0.75em) is dan niet wenselijk.
    Voor beeldschermen die groter zijn dan 24 inch, oogt zelfs 16px nog te klein.

Wanneer kun je hiervan afwijken?

  • Afhankelijk van de website en de doelgroep kan de ideale lettergrootte variëren. Websites gericht op oudere bezoekers hebben baat bij een iets grotere lettergrootte, terwijl meer visueel gedreven websites met jongere doelgroepen kunnen kiezen voor dynamischere lettertypes en kleurschema’s.

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 Google Fonts.
Font Pair helpt je om geschikte lettercombinaties te maken.

Enkele andere handige tools:

  • Font Size Guidelines for Responsive Websites: Dit is een artikel dat je tips geeft over hoe je de juiste lettergrootte kunt aanpassen aan het apparaat waarop je website wordt bekeken. Het geeft je ook een aantal richtlijnen voor het gebruik van tekstinput, secundaire tekst en het bekijken van je ontwerpen op een echt apparaat.
  • Choosing Web Fonts: A Beginner’s Guide: Dit is een gids van Google Design die je helpt om een goed lettertype te kiezen voor je website. Het legt je uit wat de verschillen zijn tussen serif en sans-serif lettertypes, hoe je de leesbaarheid en de uitstraling kunt verbeteren, en hoe je de laadtijd en de prestaties kunt optimaliseren.
  • Font Picker: Dit is een Chrome-extensie die je in staat stelt om lettertypes en hun details te identificeren op elke website. Je kunt ook verschillende lettertypes vergelijken en testen op je eigen tekst.
  • Best web fonts: how to choose and use fonts on a website: Dit is een blogpost die je laat zien hoe je de kleur, de stijl en de achtergrond van je lettertypes kunt instellen met CSS. Het geeft je ook een aantal voorbeelden van goede webfonts en hoe je ze kunt gebruiken.

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.

contrast

‘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

Welke emoties horen bij welke kleur?

Rood Sport, actie, dynamiek, energie, leven, liefde, passie, kracht, gevoel, gevaar, agressie. Paars Royaal, koninklijk, betrouwbaar, macht, nostalgie, ijdelheid, decadentie, extravagantie, passie, gezellig, vrouwelijk.
Groen Natuur, planten, gezondheid, jeugd, vrede, balans, veiligheid, jaloezie, bitterheid. Maar ook: vergif! Roze Delicaat, zacht, gevoelig, naïviteit, vrouwelijk, ijdelheid, vertrouwen, romantiek.
Blauw Zee, vakantie, diepte, oneindig, verlangen, rust, harmonie, balans, vertrouwen, betrouwbaar, serieus, mannelijk. Bruin Aarde, aromatisch, ouderwets, simpel, gezellig, saai, gemiddeld, somber, herfst.
Oranje Nederland, voetbal, warmte, levendig, energie, activiteit, moed, sociaal, plezier, geluk. Grijs Neutraal, sober, theorie, elegant, technologie, saai, middelmatig, eenzaam, ouderdom, verdriet, modern, toekomst.
Geel Energie, zon, licht, goud, vrolijk, optimisme, warmte. Zwart Elegantie, stijl, kracht, nacht, eenzaamheid, geheim, kwaad, negatief, conservatief, dood, verdriet, melancholie.
Wit Trouwen, schoonheid, onschuld, licht, helderheid, neutraal, nieuw, modern, het goede, functionaliteit, perfectie, eerlijkheid, open.

Andere opmaak die bijdraagt aan de leesbaarheid

Enkele aandachtspunten waar je rekening mee moet houden als je jouw content laat vormgeven.

Regellengte

centimeterLange 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

alineaAls 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

 

 

 

Over Karen Nijst

Ik heb jarenlang als marketing-communicatie adviseur gewerkt en denk dat ik destijds één van de eerste ben geweest in Nederland, die een computer in huis haalde. Iedereen verklaarde me voor gek. Zo'n log ding ... dat is toch geen aanwinst voor het interieur? Maar ik was verkocht!
Inmiddels ben ik al lange tijd gecertificeerd php-programmeur en webdesigner, toch blijf ik het belangrijk vinden dat de site van mijn klanten er niet alleen gelikt uitziet maar óók resultaten oplevert. Dat doe ik door mee te denken met de klant, waarna ik de wensen ‘vertaal’ naar technische oplossingen. De laatste jaren bouw ik voornamelijk WordPress-sites, WOOCOMMERCE webwinkels en sites op maat, waarvoor ik de themes schrijf en verschillende plugins. Daarnaast help ik mijn klanten bij het schrijven van commerciële teksten die het goed doen in de zoekmachines.
Contact opnemen? +31 (0)6-52 65 37 61 info@kahlo.nl