fbpx

Het kiezen van de juiste lettertype grootte is extreem belangrijk. Dit kan het verschil maken tussen een duidelijke of onduidelijke website. Het is belangrijk dat de teksten op je website altijd goed te lezen zijn. Dit is dus een onmisbaar onderdeel van de leesbaarheid van je website.
Het gebruik van titels, subtitel en corpsteksten is essentieel voor een leesbare tekst op jouw website. Het gebruik van titels en subtitels doe je door je aan een vaste hiërarchie te houden. Titels worden ook wel kopteksten (headers (H)) genoemd en kun je onderverdelen in:

  • H1 (hoofdtitel)
  • H2 (subtitel)
  • H3 (sub-sub-titel)
  • en zo gaat het door tot H6.

Deze hiërarchie is niet alleen voor de structuur van je website, maar ook voor de leesbaarheid van een tekst.

De H1 (koptekst 1) is altijd de titel van de pagina en zal daarom ook het grootste lettertype hebben. De H2 is de subtitel waaronder een bepaald onderdeel van de tekst wordt onderverdeeld, de lettertype grootte van de koptekst 2 is altijd iets kleiner dan de H1. De H3 is weer een subtitel die onder de H2 valt en wordt daardoor nog iets kleiner weergegeven van de koptekst 2. Zo gaat het verder in tot H6. Bij elke stap zal het lettertype dus iets kleiner worden.

Dan heb je ook nog zoiets als de corps tekst (p). Dit is de hoofdtekst (de normale tekst) van jouw website. De lettergrootte van deze tekst is ook erg belangrijk. Maak je het te klein dan is (bijvoorbeeld 12px) het natuurlijk niet meer goed te lezen, maar maak je het te groot dan word de totale tekst minder leesbaar omdat de corps tekst dan te veel gaat lijken op de titels. Alle kopteksten zijn uiteindelijk dus wel groter dan de corps tekst waaruit de hoofdtekst van de pagina bestaat.

Een voorbeeld van de verdeling van de verschillende juiste lettertype grootte:

  • H1 (36px)
  • H2 (32px)
  • H3 (28px)
  • H4 (24px)
  • H5 (20px)
  • H6 (18px)
  • P (14px)

Let er vervolgens wel op dat de grootte van jouw teksten anders staan ingesteld voor de weergave op tablet en mobiel, anders worden de teksten te groot op deze schermen weergegeven waardoor ze mogelijk uit beeld verdwijnen. De responsiveness van de lettertypes is dus ook erg belangrijk om de teksten leesbaar te houden op de verschillende beeldschermformaten.

Body tekst tussen de 14px en 17px. Google design tools bekijken + link van bron erbij zetten.