Typografie speelt een cruciale rol in zowel grafisch ontwerp als web design. Typografie is de kunst van het vormgeven, zetten en drukken van tekst, zowel voor functionele als esthetische doeleinden. Daarbij speelt het kiezen van een goed lettertype voor je website een belangrijke rol voor o.a. de leesbaarheid en conversie.
Typografie kan jouw boodschap overbrengen, emoties oproepen en de gebruikerservaring verbeteren. Maar typografie kan ook de algehele uitstraling en leesbaarheid van je ontwerp beïnvloeden, zowel op papier als op scherm.
Er zijn heel veel verschillende soorten lettertypes, sommige lijken heel veel op elkaar. Het is daarom dus verstandig je keuze zorgvuldig af te wegen en te kijken naar verschillende opties. Hoe moet je een lettertype kiezen en waar vind je, uit de overvloed aan lettertypes, de beste keuze voor jouw website?
Inhoudsopgave
- Lettertype categorieën
- Identificeer de doelgroep
- Begrijp het doel en de context
- Afstemmen op identiteit van je merk
- Denk aan de leesbaarheid
- Wees consistent
- Denk aan toekomstige schaalbaarheid
- Creëer hiërarchie
- Breng contrast en harmonie in evenwicht
- Web compatibiliteit
- CSS styling (Tekstopmaak)
- Test het lettertype op verschillende (mobiele) apparaten
- Experimenteer m.b.v. Mockups
- Tips voor verbeteren scangedrag
- Zoek feedback en pas aan
- Documentatie en stijlgidsen
TLDR; In dit artikel bespreek ik de verschillende factoren waarop gelet moet worden om het beste lettertype te kiezen voor website projecten. Maar ik geef ook concrete tips gebaseerd op zaken als leesbaarheid, toegankelijkheid, conversie, lettergrootte, etc.
#Lettertype categorieën/soorten
Er zijn verschillende soorten lettertypes die je kunt gebruiken voor je website, elk met hun eigen kenmerken en toepassingen. Lettertypes worden ingedeeld in lettertype categorieën. Inzicht in deze categorieën kan je helpen bij het selectieproces.
Hieronder staan de 5 meest voorkomende categorieën:
a. Serif lettertypes hebben kleine streepjes (serifs of schreven) aan de uiteinden van de verschillende glyphs (schrifttekens), waardoor ze er traditioneler en formeler uitzien. Ze worden vaak gebruikt in drukwerk en lange teksten en geven een klassieke en elegante uitstraling.
b. Sans-serif lettertypes zijn schreefloos, waardoor ze er moderner en strakker uitzien. Ze worden veel gebruikt op digitale platforms vanwege hun goede leesbaarheid op schermen.
c. Script lettertypes bootsen handgeschreven of kalligrafische stijlen na en voegen een vleugje elegantie, persoonlijkheid of informaliteit toe aan een ontwerp. Ze zijn geschikt voor korte en decoratieve tekstelementen.
d. Display lettertypes zijn opvallend, vet en ontworpen voor koppen of korte stukken tekst. Ze kunnen sterk gestileerd zijn en de aandacht vestigen op specifieke delen van een ontwerp/layout.
e. Decoratieve lettertypes zijn sterk gestileerd en worden vaak gebruikt voor creatieve doeleinden. Ze moeten spaarzaam worden gebruikt als accenten of voor specifieke ontwerp thema’s, omdat ze moeilijk te lezen zijn in grote hoeveelheden tekst.
Naast bovenstaande categorieën zijn er nog een paar andere, zoals o.a. het Slab-serif en monospace lettertype. Elke categorie heeft zijn eigen stijl en toepassing en het kiezen van het juiste lettertype is van cruciaal belang om de gewenste boodschap en uitstraling over te brengen. Hou hiermee rekening bij het kiezen van jouw lettertype.
#Identificeer de doelgroep
Om jouw boodschap effectief over te brengen, is het cruciaal om rekening te houden met de voorkeuren en demografische gegevens van je doelgroep. Leeftijd, culturele achtergrond en branche beïnvloeden de perceptie van lettertypes.
Een speels en grillig lettertype kan bijvoorbeeld geschikt zijn voor kinderwebsites, terwijl een strak en modern lettertype geschikter kan zijn voor een bedrijfsmerk. Als vuistregel kun je aannemen dat serif-types vertrouwen oproepen, en sans-serif moderniteit uitstralen.
#Begrijp het doel en de context
Voordat je een lettertype kunt kiezen, is het belangrijk om de context en het doel van je ontwerp te begrijpen. Is het een website voor een bedrijf in de financiële sector, een webshop voor high-end fashion of een website voor een muziekevenement?
Elk van deze website ontwerpen vraagt om een ander lettertype. Het is belangrijk om te weten welke sfeer, toon, stijl en boodschap je wilt overbrengen voordat je een lettertype kiest.
#Afstemmen op identiteit van je merk
Als het ontwerpproject deel uitmaakt van een groter geheel (branding assets), is het essentieel om het lettertype af te stemmen op de identiteit van het merk. Houd bij het kiezen van je lettertype rekening met de persoonlijkheid, waarden en doelgroep van het merk.
#Denk aan de leesbaarheid
Leesbaarheid is natuurlijk het belangrijkste aspect bij het kiezen van een lettertype, vooral op websites. Zorg ervoor dat het lettertype dat je kiest gemakkelijk leesbaar is, zowel op desktop als op mobiele apparaten.
Een uiterst belangrijk aspect van je ontwerp is de broodtekst (body text). Vaak wordt de boodschap overgebracht in een alinea of misschien zelfs meerdere alinea’s met broodtekst. Lettertypes met een goede x-hoogte zijn beter leesbaar, want zodra letters op elkaar lijken (c, e, o) kunnen ze gemakkelijker visueel van elkaar onderscheiden worden.
Zelfs het meest visueel aantrekkelijke lettertype kan ineffectief worden als het ten koste gaat van de leesbaarheid. Vermijd lettertypen met te veel decoratieve elementen of te smalle (condensed) vormen, omdat deze de leesbaarheid (van je broodtekst) kunnen verminderen.
#Wees consistent
Consistentie is essentieel bij het kiezen van een lettertype. Het is belangrijk om een beperkt aantal lettertypes te gebruiken en deze consistent toe te passen in je ontwerp. Het gebruik van te veel verschillende lettertypes kan verwarrend zijn en afbreuk doen aan de algehele uitstraling van je ontwerp.
Gebruik een meer opvallend lettertype voor kopteksten en een eenvoudig, leesbaar lettertype voor je broodtekst.
#Denk aan toekomstige schaalbaarheid
Naarmate ontwerpprojecten zich ontwikkelen en uitbreiden, is het essentieel om een lettertype te kiezen die groei en schaalbaarheid aankan. Zorg ervoor dat het gekozen lettertype verschillende diktes, stijlen en tekensets (bijvoorbeeld ligaturen) beschikbaar heeft, zodat er flexibiliteit is voor toekomstige ontwerp iteraties.
Kies een lettertype met voldoende varianten (bijvoorbeeld italic en bold) voor flexibiliteit. Zoek lettertypes die minimaal 2 diktes en 2 stijlen hebben, te weten:
- Normaal/Regular (400)
- Cursief/Italic (400)
- Dikgedrukt/Bold (600)
- Dikgedrukt/Cursief (600)
#Creëer een visuele hiërarchie
Visuele hiërarchie verwijst naar de rangschikking en organisatie van verschillende elementen in een ontwerp om de aandacht van de kijker te leiden. Dit principe is vooral belangrijk bij het kiezen van een lettertype voor tekstuele inhoud.
Zorg voor een duidelijke hiërarchie door een lettertype te kiezen die koppen, subkoppen, hoofdtekst en andere tekstelementen van elkaar onderscheid. Een consistente typografie helpt gebruikers moeiteloos door de inhoud te navigeren.
#Breng contrast en harmonie in evenwicht
Bij het combineren van meerdere lettertypes in een ontwerp is het vinden van de juiste balans tussen contrast en harmonie cruciaal. Contrast helpt bij het creëren van visuele interesse en differentiatie tussen elementen, terwijl harmonie zorgt voor een uniform en samenhangend ontwerp.
Experimenteer met het combineren van lettertypes uit verschillende categorieën, zoals het combineren van een schreef met een schreefloze letter. Op deze site kan je wat voorbeelden van combinaties van verschillende lettertypes zien: https://fontpair.co/.
Of combineer een dik lettertype met een dun lettertype om een harmonieus én een goed contrasterend effect te bereiken. Dit kan helpen om belangrijke informatie te markeren en de hiërarchie in je ontwerp te versterken.
Daarnaast is het cruciaal om te zorgen voor voldoende contrast tussen tekst en achtergrond, volgens de WCAG-richtlijnen. Dit verhoogt de leesbaarheid voor iedereen, inclusief mensen met visuele beperkingen, en zorgt dat belangrijke informatie duidelijk overkomt. Door deze eenvoudige richtlijnen te volgen, wordt je website zowel gebruiksvriendelijker als inclusiever.
#Web compatibiliteit
Bij het ontwerpen van elke website is het essentieel om lettertypes te kiezen die compatibel zijn met het web en goed worden weergegeven door verschillende browsers en apparaten. Maar ook is de laadtijd van je lettertype van belang als je een naadloze en snelle ervaring wilt bieden aan je lezers.
Lettertypes bepalen dus niet alleen de uitstraling van een website, maar ze beïnvloeden óók prestaties, toegankelijkheid en zelfs SEO. Daarom bestaan er verschillende manieren om lettertypes in te laden, elk met hun eigen voordelen, beperkingen en technische nuances.
Afhankelijk van je doelen kun je kiezen uit meerdere strategieën om typografie betrouwbaar en efficiënt op het web te gebruiken. Hieronder vind je de vier meest gebruikte methoden om lettertypes te embedden in een website, van externe fontservices tot volledig lokaal gehoste oplossingen.
1. Online lettertypes (3rd Party Fontservices)
Lettertypes uit gerenommeerde online lettertype bibliotheken, zoals Google Fonts of Adobe Fonts, zorgen voor consistentie en toegankelijkheid op verschillende platforms. Het grote nadeel van deze online lettertype bibliotheken is dat je ook veel third-party codes moet downloaden om hun lettertypes zichtbaar te maken op je website (extra laadtijd).
2. Lokaal lettertype bestanden hosten
Voor een betere fontperformance voor je website kun je het best werken met @font-face. Dit is een CSS-regel waarmee online lettertypen kunnen worden gedefinieerd voor tekst op de website, zelfs als het specifieke lettertype niet op de computer van de bezoeker is geïnstalleerd. M.a.w. @font-face lettertypes worden rechtstreeks van jouw server gedownload om zichtbaar te zijn op jouw website.
3. Websafe lettertypes
Je kan ook gebruik maken van ‘websafe fonts’. Websafe (webveilige) lettertypen zijn lettertypes die vooraf op de meeste apparaten en standaard software (bijvoorbeeld MS Office) zijn geïnstalleerd. Hierdoor worden ze consistent weergegeven in verschillende browsers en op diverse platforms, zonder dat ze hoeven te worden gedownload.
Voorbeelden van websafe lettertypes zijn:
- Arial (sans-serif)
- Georgia (serif)
- Helvetica (sans-serif)
- Verdana (sans-serif)
- Times New Roman (serif)
- Tahoma (sans-serif)
- Courier New (monospaced)
4. Systemfonts (lettertypes uit besturingssystemen)
Maar je kunt ook gebruik maken van System Fonts voor het lettertype op je website. Systeem fonts zijn lettertypes die opgeslagen zijn in het besturingssysteem (bijv. in Windows is dit Segoe UI) van het apparaat waarop jij de website bekijkt.
/* System Fonts Rule */
body {
font-family: "Segoe UI", "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Lucida Grande", sans-serif;
}Hierdoor hoeven deze lettertypes ook niet te worden gedownload van je server. Dit zal je een mooie boost geven als het gaat om de laadtijd van je website. Meestal gebruik ik system fonts als broodtekst, tenzij anders voorgeschreven in het huisstijl handboek.
#CSS styling (Tekstopmaak)
Webtypografie is een van de belangrijkste onderdelen van webdesign. Het bepaalt niet alleen hoe tekst eruitziet, maar vooral hoe leesbaar, toegankelijk en prettig een interface voelt. Met CSS styling kunnen we factoren zoals lettergrootte, regelafstand en uitlijning finetunen die de leesbaarheid van je teksten kan verbeteren.
#Lettergrootte
De grootte van de letter bepaalt in grote mate de leesbaarheid van de (brood)tekst. Voor beeldschermen gelden iets andere regels dan voor drukwerk. Hier is een makkelijke vuistregel voor het kiezen van de juiste lettergrootte voor de broodtekst je website:
- Op mobiele apparaten wordt aanbevolen om een lettergrootte onder 14px te vermijden, want teksten kleiner dan dat worden moeilijk leesbaar. Voor kleinere schermen kun je gebruik maken van CSS media queries om de tekst iets aan te passen: bijvoorbeeld van 14px op een klein mobieltje tot 15px op tablets.
- Bij beeldschermen breeder dan 1200px is een lettergrootte van 16–18px voor je bodytekst aanbevolen, zodat de tekst comfortabel te scannen is en de ogen niet snel vermoeid raken. Bij grotere beeldschermen (breder dan 1980px) kun je zelfs kiezen voor een lettergrootte van 18-20px.
Voor kopteksten in webdesign werk je meestal van groot naar klein, middels een typografische schaal. Dit is een soort verhoudingssysteem waarmee je kopteksten consistent laat groeien of krimpen, zodat hiërarchie en ritme in je layout ontstaan.
#Regelhoogte
Om lekker te kunnen lezen moeten de tekstregels op een bepaalde afstand van elkaar staan. De regelhoogte is de afstand van de onderste x-lijn van de eerste regel tot de onderste x-lijn van de volgende regel.
Deze afstand is niet gelijk voor alle lettertypes en hangt nauw samen met de gekozen lettergrootte. Deze witruimte tussen de regels kun je aanpassen in CSS om een goede leesbaarheid te krijgen:
body { line-height: 140%; }
/* Waarde: normal | getal | lengte | percentage */#Uitlijning
Uitlijning heeft direct invloed op hoe gebruikers informatie verwerken en ervaren. Goede uitlijning creëert orde, structuur en rust op een pagina, terwijl slechte uitlijning een rommelige, onprofessionele indruk kan geven. Tekst is links, gecentreerd, rechts of uitgevuld uit te lijnen in CSS.
Links uitlijnen is het meest gebruikelijk en zeker bij ons in de Westerse wereld. Uitgevulde teksten moeten alleen gebruikt worden in combinatie met afbreken, waarbij niet teveel afbrekingen achter elkaar mogen voorkomen.
Gecentreerde tekst verstoort de natuurlijke stroom van links naar rechts, waardoor de tekst moeilijker te volgen is. Gecentreerde teksten dwingen je hersenen dus om harder te werken, omdat ze moeilijker te verwerken zijn en kunnen leiden tot mentale vermoeidheid. Dus gebruik je veel gecentreerde tekst? Handle with care.
h4 { text-align: center; }
/* Waarde : left | right | center | justify | inherit */#Test het lettertype op verschillende (mobiele) apparaten
Voordat je een definitieve beslissing neemt, is het belangrijk om het gekozen lettertype te testen op verschillende apparaten en schermformaten. Wat er goed uitziet op je computer monitor, kan er anders uitzien op een mobiel apparaat. Zorg ervoor dat het lettertype goed schaalt en leesbaar blijft op verschillende apparaten.
#Experimenteer m.b.v. Mockups
Als je eenmaal een paar lettertypes hebt geselecteerd, test ze dan in verschillende contexten om hun geschiktheid te beoordelen. Gebruik verschillende letterdiktes, stijlen en groottes om hun veelzijdigheid te bekijken. Experimenteer en kijk wat verschillende combinaties doen om een visueel aantrekkelijk geheel te creëren.
Typografie kan het algehele ontwerp aanzienlijk beïnvloeden, dus neem de tijd om te experimenteren en te herhalen. Overweeg het maken van mockups of prototypes om te visualiseren hoe de lettertypes samenwerken met andere ontwerpelementen.
#Tips voor verbeteren scangedrag
Website bezoekers lezen bijna nooit de hele tekst, ze scannen om de belangrijkste info te vinden. Het verbeteren van het scan- en skimgedrag van websitebezoekers is daarom super belangrijk om ervoor te zorgen dat ze snel de informatie kunnen vinden die ze zoeken.
Hier zijn enkele handige en praktische tips die jijzelf kunt toepassen om je website gemakkelijker te (laten) scannen:
1. Gebruik duidelijke koppen en subkoppen:
Bezoekers scannen vaak eerst de koppen om te bepalen of de inhoud relevant is. Zorg ervoor dat de koppen kort, duidelijk en beschrijvend zijn.
2. Maak gebruik van korte alinea’s:
Houd alinea’s kort en overzichtelijk, bij voorkeur 2 tot 4 zinnen per alinea. Lange alinea’s kunnen ontmoedigend zijn en bezoekers kunnen aftaaien om de rest te lezen.
3. Gebruik bullet points of genummerde lijsten:
Lijsten maken informatie snel toegankelijk en overzichtelijk.
4. Gebruik witruimte:
Witruimte maakt de tekst overzichtelijker en voorkomt dat de pagina te druk overkomt. Zorg voor voldoende ruimte tussen alinea’s, afbeeldingen en andere elementen.
5. Zorg voor opvallende CTA knoppen:
Maak CTA (Call-to-Action) knoppen opvallend, gebruik contrasterende kleuren en plaats ze op logische plaatsen, zoals na belangrijke informatie.
6. Gebruik duidelijke linkteksten:
Bezoekers moeten snel kunnen begrijpen waar ze naartoe worden gestuurd. Gebruik duidelijke en beschrijvende tekst voor links.
Het belangrijkste is dat de inhoud overzichtelijk is en goed gestructureerd, zodat iedereen eenvoudig kan scannen en de belangrijkste informatie snel kan ontdekken.
#Zoek feedback en pas aan
Ontwerpen is een subjectief vakgebied en feedback vragen aan collega’s, klanten of je doelgroep kan waardevolle inzichten opleveren. Verzamel feedback over de gekozen lettertypes en denk daarbij aan factoren als leesbaarheid, geschiktheid en emotionele resonantie. Pas de ontvangen feedback toe om jouw typografische keuzes te verfijnen en te verbeteren.
#Documentatie en stijlgidsen
Om consistentie te behouden in verschillende huisstijldragers en media uitingen, is het cruciaal om de gekozen lettertype(s) en hun specifieke gebruik vast te leggen. Deze documentatie kun je dan delen met je klant door middel van een huisstijl handboek.
Voor websites kun je een (digitale) stijlgids maken waarin alle design-gerelateerde richtlijnen staan beschreven. Denk hierbij o.a. aan de gebruikte lettertypes, specifieke HTML (tekst) elementen, ingesloten media, online formulieren en huisstijlkleuren. Deze documentatie dient als referentie en zorgt voor merkconsistentie van je website of mobiele app.
Bottomline
Het kiezen van het juiste lettertype voor elke willekeurige website vereist een zorgvuldige afweging van diverse factoren. Denk daarbij aan factoren zoals doel, doelgroep, leesbaarheid, esthetiek, hiërarchie, branding en schaalbaarheid. Pas dan kun je een weloverwogen keuze maken die de impact en effectiviteit van je ontwerp versterkt.
Onthoud dat typografie niet alleen over esthetiek gaat; het is een krachtig hulpmiddel voor effectieve communicatie en gebruikerservaring in de wereld van design. Het kan zelfs de boodschap die je wilt overbrengen versterken of verzwakken.
Heb jij toch nog twijfels bij het kiezen van het beste lettertype voor je website? Dat is niet zo vreemd, aangezien de keuze voor een lettertype een erg belangrijk besluit is. Neem anders contact op met mij en ik help je graag verder.
