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 de grootte van typografie in je webdesign en hoe je dit technisch kunt maken.
IN DEZE HANDLEIDING:
- 1 Richtlijnen typografie en lettertypes
- 2 W3C Richtlijnen Toegankelijkheid gebruiksvriendelijke site
- 3 European Accessibility Act Europese Toegankelijkheidwet
- 4 Toegankelijke WP site handicap blinden slechtzienden
- 5 Lettergrootte voor beginners
- 6 Schema 1: Lettergroottes voor je WordPress website
- 7 Schema 2: Lettergroottes en koppen (h1 h2 h3 h4)
- 8 Wat kun je hiermee voor responsive webdesign?
- 9 Nieuw in CSS: Clamp voor vloeiende typografie
- 10 Lettertypes en groottes instellen in WordPress
- 11 Richtlijnen lettergrootte Mobiele telefoon, smartphone en tablet
- 12 Richtlijnen lettergrootte voor Desktop en computerscherm
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 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
W3C Richtlijnen Toegankelijkheid gebruiksvriendelijke site
Naast de standaard w3C richtlijnen moeten websites van de overheid vanaf 2020 voldoen aan de richtlijnen voor toegankelijke websites.
European Accessibility Act Europese Toegankelijkheidwet
IN DEZE HANDLEIDING:1 Nieuwe Europese Toegankelijkheidswet in 20252 Wat is de Europese toegankelijkheidswet?3 Het doel van de Europese toegankelijkheidswet4 Waarin voorziet de Europese toegankelijkheidswet? Nieuwe Europese Toegankelijkheidswet in 2025 Toegankelijke digitale producten zijn belangrijk, maar bestaande producten worden niet automatisch toegankelijk gemaakt. In de praktijk blijkt dat organisaties pas werk […]
Toegankelijke WP site handicap blinden slechtzienden
Maak je WordPress website toegankelijk voor je bezoekers met een beperking (blinden, slechtzienden, kleurenblinden, slechthorenden en doven).
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:
Wat kun je hiermee voor responsive webdesign?
Je kan dit gebruiken om zelf je fontgrootte voor tekst in je WordPress thema 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
Nieuw in CSS: Clamp voor vloeiende typografie
Relatief nieuw is de clamp functie waarmee je vloeiende responsive typografie kan maken. Wel voor gevorderden.
Handleiding clamp, viewport en responsive typografie met CSS
Je stelt hiermee maximum en minimum-waardes in. Bijvoorbeeld:
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:
- WordPress Bootcamp all-in one spoedcursus
- WordPress Designcursus ontwerp en vormgevingstraining
- Cursus WordPress in Amsterdam
- Designcursus WordPress voor ontwerpers en vormgevers
- Cursus WordPress op maat beginners & gevorderden
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 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 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:
- Beste typografie hulpmiddelen tools voor webdesigner
- Grootte lettertypes fonts website mobiel tablet desktop
- Custom fonts toevoegen WordPress truetype opentype adobe
- Easy Google Fonts plug-in lettertypes voor WordPress
- Cursief italic font lettertype schuingedrukte tekst
Meer over leesbaarheid en typografie
Meer over leesbaarheid en typografie
Leesbaarheid tekst lettergrootte WP website verbeteren
Leesbaarheid tekst letters website verbeteren webdesign Leesbaarheid is een vaak onderschat onderdeel bij het bouwen van…
Schrijf makkelijk te lezen content berichten pagina’s
Schrijf gemakkelijk te lezen teksten, berichten en artikelen Uw WP-website moet gemakkelijk en prettig leesbaar…