Grootte lettertypes fonts WordPress website mobiel tablet desktop

Wat is de beste lettergrootte voor lettertypes en fonts voor WordPress websites op desktop, tablets en mobiele telefoons en smartphones. Lees deze ‘ultimate’ handleiding en richtlijnen voor je typografie

Richtlijnen typografie en lettertypes

Schreefloze en schreeflettertypes voor websites

Er zijn, grof gezegd, 2 soorten lettertypes: schreefloos en met schreef. Schreven zijn de dunne streepjes aan het uiteinde van de pootjes van een letter. Bij het schreeflettertype staan de schreven aangegeven met rode rondjes, het schreefloze lettertypen heeft deze extra streepjes niet.


Lees meer over schreefloze en schreeflettertypes


Schreefloze lettertypes lezen makkelijker

Op de onderstaande websites voor visueel gehandicapten staat de volgende informatie die je voor elke WordPress website kan toepassen:

  • Onbeschreven lettertypes worden beschouwd als leesbaarder dan schreven. De meest bekende en voorkomende schreefloze lettertypes zijn bijvoorbeeld Arial, Helvetica, Univers, Verdana. Deze zijn inmiddels achterhaald door betere fonts als Open Sans en andere Google Web Fonts.
  • Lange teksten met woorden in hoofdletters zijn moeilijker te lezen en moeten daarom bij voorkeur worden vermeden.
  • Vetgedrukte letters hebben over het algemeen een gunstig effect op de leesbaarheid.
  • Het is belangrijk om een letter te kiezen waarin vergelijkbare letters, zoals “i” en “l”, duidelijk te onderscheiden zijn.
  • Zo weinig mogelijk lettergroottes en lettertypes als mogelijk is. Een van de grootste typografische fouten van beginnende ontwerpers is het gebruik van veel te veel lettergroottes en lettertypes door elkaar heen.
  • Cursieve letters zijn minder gemakkelijk te lezen.
  • Scherpe contouren van letters verbeteren de leesbaarheid.
  • Schaduwletters verminderen de leesbaarheid van de letters.
  • Variatie in de ruimte tussen de woorden is om opmaakredenen niet aan te bevelen. Consistente spaties tussen woorden verbeteren de leesbaarheid.

Waarom kiezen voor een groter lettertype?

Teksten zijn er om te lezen en een klein lettertype maakt dat een stuk moeilijker. Ook neemt het aantal oudere gebruikers toe. Er zijn grotere lettertypes nodig om een website ook voor deze bezoekers leesbaar te maken. Uit onderzoek blijkt dat 40-jarigen slechts vijftig procent van het licht door hun netvlies krijgen in vergelijking met een 20-jarige. Bij een 60-jarige is dit slechts twintig procent. Hoe ouder bezoekers zijn, hoe moeilijker ze de (kleine) letters moeten lezen.

Meer info over vormgeving en toegankelijkheid van slechtzienden


Lettergroottes voor je WordPress website (schema, tip!)

Welke lettergroottes heb je nodig voor je website? Ik heb ze hieronder uitgesplitst met de bijbehorende opties voor lettergroottes:

Desktop

Tablet

Mobiel

 S   M   L   XL   S   M   L   XL   S   M   L   XL 
Koptekst | H1  42   56   72   96  36   50   62   78  28   44   52   60 
Koptekst | H2 26   36   48   60  22   32   42   54  18   28   36   48 
Koptekst | H3 20   26   34   48  18   24   30   44  17   22   26   40 
Koptekst | H4 18   22   24   34  17   20   22   30  16   18   20   26 
Tekst 16   17   19   20  16   17   18   19  16   16   17   18 

Koptekst lettergrootte (H1, H2, H3)

Dit is de grootste lettergrootte op uw pagina. Gebruik het voor de koptekst of sectietitels. Als u zowel een koptekst als sectietitels heeft, moet u hier vrijwel zeker twee verschillende lettergroottes gebruiken.

Standaardgrootte platte tekst

Dit is de meest voorkomende lettergrootte op uw pagina, en zou gebruikt moeten worden voor alle lichaamstekst – en ook voor de meeste bedieningselementen, zoals tekstvakken, dropdowns, knoppen en menu’s. De belangrijkste fout die beginnende ontwerpers hier maken is het gebruik van veel lettergroottes voor elementen die allemaal één lettergrootte zouden moeten zijn.

Secundaire lettergrootte

Dit is een lettergrootte – meestal ongeveer 2pt kleiner dan uw standaard lettergrootte – die u gebruikt voor minder belangrijke details van de site. Ondersteunende informatie en statistieken, soms bijschriften, enz.

Tertiaire / caption / label / wildcard lettergrootte

Vaak heeft u nog een lettergrootte nodig. Soms is het omdat uw informatie zo hiërarchisch is dat u een tertiaire stijl nodig heeft die nog ingetogener is dan de secundaire stijl. Andere keren gebruikt u misschien hoofdletters voor labels of knoppen – en vanwege het toegenomen visuele gewicht van de hoofdletters wilt u een iets kleiner formaat voor de tekst zelf gebruiken. Deze vierde lettergrootte is dus een beetje een wildcard. Niet elk ontwerp heeft het nodig, maar veel iets grotere websites wel. Mijn enige waarschuwing: zoveel mogelijk maar wees consistent. Je kan dit doen door zogenaamde ‘classes’ of stijlen te maken.

Handleiding typografie class span maken in WordPress


Lettertypes en groottes instellen in WordPress

Tijdens een WordPress cursus of training vertel ik hoe en waar je de lettertypes goed en efficient kan instellen:


Mobiel en tablet

Richtlijnen lettergrootte voor mobiele webtypografie

Als u een website of app ontwerpt die op mobiele apparaten kan worden bekeken, is er maar één harde en snelle regel:

Gebruik een tekstinvoerlettertype van minstens 16px. Als uw tekstinvoer een kleinere lettergrootte heeft dan dat, zullen iOS-browsers aan de linkerkant van de tekstinvoer inzoomen, waardoor de rechterkant vaak wordt verduisterd en de gebruiker wordt gedwongen om handmatig uit te zoomen na het gebruik van het tekstvak.
Je wilt dat de tekst op je telefoon (wanneer je hem op een natuurlijke afstand houdt) net zo leesbaar is als de tekst in een goed gedrukt boek (wanneer je hem op een natuurlijke – meestal iets grotere – afstand houdt).

Secundaire tekst

Voor secundaire tekst, onbelangrijke etiketten en bijschriften, gebruik een maatje een paar inkepingen kleiner – zoals 13px of 14px. Ik raad niet aan om slechts één lettergrootte te gebruiken, want dan is het te gemakkelijk om te verwarren met normale tekst. Wanneer tekst minder belangrijk is, wil je deze zo stijlen dat je het minder belangrijke duidelijk overbrengt.
De gouden standaard is het bekijken van uw ontwerpen op een echt apparaat. Ik kan dit niet sterk genoeg aanbevelen, omdat het gevoel van een mobiel app-ontwerp op je laptopscherm heel anders is dan wanneer je het in je hand houdt. Als beginnend ontwerper was ik bijna elke keer geschokt als ik een pagina die ik op de desktop ontwierp, op een mobiele telefoon opende. Lettergrootte, afstand… alles stond uit. Dus gebruik Sketch Mirror, Blisk of Figma Mirror of wat voor app dan ook, maar bekijk je ontwerpen op het apparaat.


Desktop

Ook worden de schermen van computers steeds groter, wat invloed heeft op hoe we websites ervaren, lezen en gebruiken. Omdat de afstand tussen u en een groot scherm relatief groot is, lijken de letters kleiner en daardoor minder leesbaar. Grappig als er een letter wordt gebruikt met een grootte van 12px (0,75em). Voor schermen groter dan 24 inch (iMac) lijkt zelfs 16px te klein.
Overzicht meest gebruikte beeldschermen en resoluties

Richtlijnen voor lettergrootte desktop webtypografie

Bij het kiezen van een basisformaat voor een desktop-website of webapplicatie kunt u de meeste ontwerpen onderverdelen in een van de twee soorten:

  • Tekst-zware pagina’s om te lezen 
    Artikelen, blogs, nieuws, etc. Dit zijn pagina’s waar het primaire doel van de gebruiker op de pagina is om te lezen. Er is heel weinig interactie – misschien is het gewoon klikken op een paar links.
  • Interactie-zware pagina’s om te klikken
    Apps waarbij er meer wordt gezworven, geklikt, gezocht naar een item in een lijst of tabel, bewerkt, getypt, etc. Er mag dan wel veel tekst op de pagina staan, maar het zijn geen dingen die je dwars door de pagina heen leest zoals een boek.

Deze pagina is bijvoorbeeld een tekst-zware pagina. Uw Facebook-feed is een interactie-zware pagina. Elk stelt andere eisen, dus ik zal ze apart behandelen. Houd er rekening mee dat beide waarschijnlijk nuttig zullen zijn. De  ‘over ons’ pagina van een webapplicatie is nog steeds tekstzwaar.

Tekst-zware pagina’s

Voor tekst-zware pagina’s wil je grotere lettergroottes. Laat ze hun ogen niet overbelasten als mensen lange tijd lezen. Nu, elk lettertype is anders, zelfs op dezelfde grootte, maar we hebben het over:

  • 16px
    absoluut minimum voor tekstzware pagina’s
  • 18px
    een betere lettergrootte om mee te beginnen. Je drukt geen enkel Word-document in één keer af; je schrijft voor mensen die een paar meter van hun tien jaar oude beeldschermen zitten.
  • 20px
    Lijkt in het begin misschien onhandig groot, maar is altijd de moeite waard om uit te proberen.

Zoals ik al zei in de mobiele websectie, is er hier een grote vuistregel: de tekst van uw website (bekeken op typische monitorafstand) moet net zo leesbaar zijn als een goed gemaakt boek (bekeken op typische boekafstand).

Interactie-zware Pagina’s

Nu, voor interactie-zware pagina’s, zijn kleinere tekstformaten perfect aanvaardbaar. Afhankelijk van de hoeveelheid gegevens die uw gebruiker in één keer opneemt, is zelfs 18px tekst ongemakkelijk groot. Kijk naar uw (web)inbox of twitter, kijk naar alle apps die u gebruikt en die moeten worden gescand om te lezen of apps die u gegevens laten zien – u zult het moeilijk hebben om duurzame paragrafen van 18px tekst te vinden. In plaats daarvan is 14px of 16px de norm. Maar er zal niet slechts één lettergrootte zijn. Er zullen waarschijnlijk kleinere maten zijn voor minder belangrijke dingen, en grotere maten voor belangrijkere dingen (titels en ondertitels en ondertitels, etc.), en het zal allemaal samengevoegd worden in een gigantische mengelmoes.

Voorbeeld lettergroottes op Google Calendar

De event namen zijn in 12px medium. De uren van de dag labels (“12pm”, “1pm”, etc) zijn font-size: 10px. De data zijn 48px. Consistentie is prachtig, maar niemand wordt boos als een lettertype één px te klein is – ze worden boos als ze niet gemakkelijk kunnen vinden wat ze zoeken.


Meer handleidingen over typografie, fonts en lettertypes

Lees meer handleidingen en over typografie en lettertypes: