Typography

Insights

Het belang der typografie

👩‍🎨 UX/UI

Typografie heeft overal een betekenis. Of het nu voor een website, magazine of logo is, de vraag zal sowieso boven komen over welke font er gebruikt moet worden. Zo kan je je tekst vormgeven om krachtige content te creëren en speelt het een essentiële rol in een goede User Experience. Het is een kunst om je inhoud te schikken, een gevoel te geven en te presenteren op een professionele manier.

Over het ontspringen van typografie bestaan veel onduidelijkheden. Enerzijds kan het samenvallen met de uitvinding van het schrift, anderzijds met de drukpers rond 1450. Vanaf dat moment werden boeken niet meer geschreven maar gedrukt. In tegenstelling tot nu bestond er in het begin van de typografie maar één font, namelijk ‘Blackletter’. Aangezien dit moeilijk te lezen was als letters te dicht bij elkaar stonden, werd de serif font ontstaan, met als leider de ‘Roman Type’ font. Desondanks dat er al meerdere lettertypes bestonden, begon de computer met maar één enkele lettertype. In 1983 werd daarna, dankzij Apple, meerdere fonts beschikbaar. De mogelijkheden hierin waren nog wel beperkt, want het was pas 12 jaar later dat het mogelijk was om een specifieke stuk tekst een ander lettertype te geven. De bezoeker van je website kon ook alleen het lettertype van je website zien als ze deze geïnstalleerd hadden. Tegenwoordig zijn alle fonts beschikbaar voor zowel druk als print.

Leesbaarheid en de impact die typografie heeft, zijn meestal vergeten onderwerpen op veel websites. Terwijl dit net zo belangrijk is als de inhoud, kleur en de afbeeldingen die gebruikt worden. Een goed leesbare tekst is het verschil tussen wel of geen conversie. Wist je dat je bezoeker de inhoud van een tekst als eenvoudiger beschouwt op het moment dat de opmaak ook eenvoudig is? Als je tekst niet makkelijk leesbaar is kan dit gezien worden als te ingewikkeld of tijdrovend. Mensen lezen realistisch gezien maar zo’n 20% van je website. Dan wordt er beter meer tijd gestoken in belangrijke stukken tekst zo makkelijk mogelijk leesbaar te maken.

Een font dat bij je past is een belangrijke start. Ga niet voor de gemakkelijkste keuze als er ontelbare andere fonts met verschillende diktes en uitstralingen te vinden zijn. Sommige hebben een prijskaartje eraan hangen, maar dat is ook met de reden dat er research in gestoken wordt. Andere fonts zijn dan weer gratis en kan je ook makkelijk op google terugvinden bij Google Fonts. Websites zoals Google Fonts en TypeKit hebben het mogelijk gemaakt om toffe lettertypes te gebruiken die je website dat extra fris, onverwacht tintje kan geven. Maar mensen zijn nu eenmaal meer gewend om teksten met een vertrouwd lettertype te lezen voor vlotheid en gemak. Als je website een geldig argument heeft voor een alternatief lettertype, zoals bij branding of voor het creëren van een meeslepende ervaring, blijft men best bij standaard lettertypes zoals Arial of Calibri.

Typografie wordt op papier op een andere manier gebruikt dan op een scherm. Vaak zijn er lettertypes die goed werken in een magazine, maar niet op je beeld. Of de manier dat het artikel vormgegeven wordt kan ook slecht leesbaar zijn hierop. Dit heeft te maken met welke media je gebruikt en hoe het werkt. Het grote verschil tussen papier en bijvoorbeeld

je TV is dat papier licht reflecteert, maar een scherm licht uitstraalt. Daarom wordt op elke medium de typografie aangepast. Een ander verschil is hoe je je voor het medium plaatst. Zo kan je bijvoorbeeld, als je goed kijkt, zien hoe de alinea’s op je computer veel groter zijn dan de letter in de krant. Dat is eigenlijk logisch, want je zit veel verder van je scherm af dan dat je van je krant zit.

Omwille van de leesbaarheid en een prettig paginabeeld zullen alle witruimtes in een logische verhouding tot elkaar moeten staan. Dit wordt ook wel de witcanon genoemd. Het betreft in oplopende grootte: het wit binnen de letters, het wit tussen de letters, de woordspatie, de interlinie, het kolomwit en de paginamarge. Om een voorbeeld te geven: De staartregel van een alinea die niet alleen boven aan een pagina mag staan. Zo bestaat er onder andere ook de ‘wees’ of ‘weduwe’. Deze termen staan beide voor de eerste regel van een alinea die alleen staat onderaan een pagina.

Voor woordenboeken of kranten, waar de ruimte schaars is, worden er opzettelijk smalle lettertypes gebruikt met korte stokken en staarten, waardoor het papier efficiënter benut wordt. Sommige aspecten en gewoontes van de typografie zijn universeel: te lange regels, te weinig interlinie en te kleine woordspaties lezen niet prettig. Andere gewoontes zoals het gebruik van aanhalingstekens en gedachtestreepjes verschillen van tijd tot tijd en van land tot land.

Daarnaast is herkenbaarheid ook een van de belangrijkste zoektochten bij het vinden van de juiste typografie. Iedereen herkent direct het lettertype van Adidas door de ronde vormen. Of bijvoorbeeld bij IKEA zijn alle teksten in hetzelfde lettertype waardoor het zorgt voor een overall consistente website en het levert nog meer voordelen op. Als bezoeker is het gemakkelijk om een advertentie te herkennen als het font van de website erop terugkomt.

Om de leesbaarheid te bevorderen is het zeer belangrijk om het juiste aantal tekens per regel te gebruiken. Laat het design niet beslissen over de breedte van je teksten. Een aangenaam gemiddelde is 60 tekens per regel. Indien de regel te lang is heeft het oog moeilijkheden om zich te focussen op de juiste regel en dwaalt het snel af.

Zorg voor voldoende contrast tussen de kleur van je lettertype en de achtergrond. Hoe contrastrijker je tekst is, hoe sneller de gebruiker je boodschap kan lezen. Vergeet zeker niet te testen op verschillende schermen. Elk scherm heeft zijn eigen specificaties omtrent contrast, saturatie, Scherpte, kleur temperatuur, enz. Kleurenblindheid is een veelvoorkomende aandoening. 8% van de mannen en 0.4% van de vrouwen zijn kleurenblind. Het is dus aangeraden om andere signalen dan kleur te gebruiken om belangrijke informatie aan te duiden. Probeer eerder met symbolen, in combinatie met kleuren, je boodschap duidelijk te maken.

Houd je teksten beknopt. Dat is het uitgangspunt. Maar, aangezien je soms toch de diepte in moet, is het wel prettig wanneer je boodschap goed leesbaar is. Het is belangrijk dat de letter die gebruikt wordt voor deze lopende tekst niet te groot is, maar zeker ook niet te klein. Zeker als je in je achterhoofd houdt dat je als 40-jarige slechts de helft van het licht doorkrijgt op je netvlies in vergelijking met een 20-jarige. Ook de gehanteerde ruimte tussen twee zinnen is van belang om de leesbaarheid verder te vergroten. Als teksten te dicht op

elkaar staan is het te onduidelijk. Staat de tekst te ver uit elkaar, dan kost het veel moeite om lekker door te kunnen lezen.

Het kan verbazend zijn hoe zoiets zo simpel tot een nachtmerrie kan veranderen, vooral als je de meerdere lettertypes moet kiezen. Hierbij is het vooral belangrijk om volgende reminders in je achterhoofd te houden:

Chack

Simpliciteit is meestal het beste - Leesbaarheid is de belangrijkste prioriteit, maak het niet te gecompliceerd.

Chack

Stel jezelf de juiste vragen - Waar gaan de lettertypes gebruikt worden?

Chack

Leer welke emoties het uitlokt - Geloof het of niet maar elke font heeft dit.

Chack

Ken je font families - Een paar gekende dezer dagen zijn Geometric Sans, Slab Serifs, en Humanist Sans-Serifs.

Regelmatig komen er ook wel vergissingen naar boven tijdens het zoeken naar de juiste lettertypes. Zo heb je bijvoorbeeld het gebruik van te veel verschillende soorten. Er zijn overweldigend veel keuzes maar je kan hier ook makkelijk mee overboord gaan. De vuistregel is meestal om maximum maar 2 lettertypes te gebruiken. Leesbaarheid, helderheid en impact zijn hierbij nog steeds het belangrijkst in de keuzes. Steeds meer en meer mensen bezoeken je website mobiel, wat ervoor zorgt dat je rekening moet houden met verschillende maten en resoluties. Het is belangrijk een lettertype te kiezen die leesbaar is op verschillende formaten.

Daarnaast is het ook belangrijk om te kiezen tussen serif of sans-serif typefaces. Terwijl serif makkelijker te lezen is voor langere teksten is sans-serif makkelijker voor lezers met visuele beperkingen. Vergeet ook niet om gebruik te maken van Web Safe Fonts.

🎙

Door simpelweg de typografie te veranderen van je media, kan je direct zorgen voor een andere sfeer, ervaring en interactie.

LanderLander Roozeleer
Lander

Lander

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten