Grootte lettertypes fonts website mobiel tablet desktop

De beste lettergrootte en fontgrootte voor WordPress websites op desktop, tablets en mobiele telefoons en smartphones. Ultieme handleiding.

Logo cursus traing wordpress

Grootte lettertypes fonts website mobiel tablet desktop

Wat is de beste voor lettertypes en fonts voor WordPress websites op desktop, tablets en mobiele telefoons en smartphones?
Lees deze ‘ultimate’ handleiding en richtlijnen voor de grootte van in je webdesign en hoe je dit technisch kunt maken.

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 uitgebreid 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 , 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 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

Lettergrootte voor beginners

Lettergrootte voor beginners. Wat gebruik je waarvoor?

Koptekst lettergrootte (H1, H2, H3)

Je koppen hebben uiteraard 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.

Begin bij je ontwerp gewoon met 16px (pixels)

Secundaire lettergrootte

Dit is een lettergrootte – meestal ongeveer 2 tot 4 pixels 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.


Schema 1: Lettergroottes voor je WordPress website

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  15   16   17   18  14   15   16   17 

Schema 2: Lettergroottes en koppen (h1 h2 h3 h4)

Je kan ook dit schema voor lettergroottes en koppen (h1 h2 h3 h4) gebruiken dat ik na heel wat uren studie heb gemaakt:

grootte font lettertype fontgrootte tekst koppen klein normaal
Kleine fontgrootte voor tekst koppen

Wat kun je hiermee voor responsive webdesign?

Je kan dit gebruiken om zelf je fontgrootte voor tekst in je te plaatsen. Je lettergrootte voor platte tekst en koppen kan er dan zo uitzien:

Lettergrootte op Mobiel

  • H1 29px (let op: deze is kleiner in verband met lange woorden)
  • H2 29px
  • H3 23px
  • H4 18px
  • Platte tekst 14 px

Lettergrootte op Tablet

  • H1 42px
  • H2 33px
  • H3 26px
  • H4 20px
  • Platte tekst 16 px

Lettergrootte op Desktop

  • H1 47px
  • H2 37px
  • H3 29px
  • H4 23px
  • Platte tekst 18 px
lettergrootte font lettertype fontgrootte tekst koppen normaal medium
Grotere lettertypes en fontgrootte voor tekst en koppen
lettergrootte font lettertype fontgrootte tekst koppen heel groot
Hele grote fontgrootte voor tekst en koppen

Nieuw in CSS: Clamp voor vloeiende typografie

Relatief nieuw is de functie waarmee je vloeiende typografie kan maken. Wel voor gevorderden.
Handleiding clamp, viewport en responsive typografie met CSS

Je stelt hiermee maximum en minimum-waardes in. Bijvoorbeeld:

clamp lettergrootte lettertype font mobiel desktop responsive
Lettergrootte met klamp-functie voor lettertypes font mobiel desktop responsive

Dit resulteert in de volgende code:

p {font-size: clamp(0.875rem, 0.75vw + 0.688rem, 1.25rem);
line-height: clamp(1.4rem, 1.2vw + 1.1rem, 2rem);}

Het werkt heel mooi alleen moet je wel weten hoe clamp en css en classes werkten:

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:


Richtlijnen lettergrootte Mobiele telefoon, smartphone 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. Dit komt overeen met 1 em. Dit is de technische waarde van je webbrowser. Als je 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.

Je kan apps zoals Sketch Mirror, Blisk of Figma Mirror of wat voor app dan ook gebruiken, maar bekijk je ontwerpen op het apparaat.


Richtlijnen lettergrootte voor Desktop en computerscherm

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. Vandaar dat ik 18 pixels adviseer om mee te beginnen. 20 pixels kan ook. Daarvoor is het schema hierboven to cool. 🙂
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 -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 , 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 1px 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:

Meer over leesbaarheid en typografie

Meer over leesbaarheid en typografie

Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress site beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je WordPress site mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Grootte lettertypes fonts website mobiel tablet desktop

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Grootte lettertypes fonts website mobiel tablet desktop en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven