Grafisch ontwerp
Geplaatst op: 22 mei 2024, aangepast op: 15 juni 2024
Ben je een webdesign aan het ontwerpen, maar worstel je met de typografie? In dit artikel concrete tips om je typografie skills naar een hoger niveau te tillen.
De typografie is een belangrijke basis voor je website. Het zorgt er namelijk voor dat je website-bezoekers je boodschap tot zich kunnen nemen. Dus of je nou producten verkoopt, informatie deelt of in contact wil komen met nieuwe klanten, het is belangrijk dat je tekst goed leesbaar is.
Goede typografie helpt de aandacht van je lezer vast te houden. De lezer is namelijk steeds (onbewust) op zoek naar redenen om te stoppen met lezen. De aandacht van de lezer is kostbaar, en elke reden is een reden om te stoppen. Met goede typografie haal je de lezer over om te blijven lezen.
Hiernaast heeft typografie ook een esthetische waarde. Goede typografie ziet er mooi uit en is prettig om naar te kijken. Elk lettertype straalt een bepaald gevoel uit. Om deze reden speelt de typografie een super belangrijke rol in je huisstijl en branding.
Dus ga je beginnen met het ontwerpen van je eigen website? Zorg er dan voor dat de typografie een hoofdrol krijgt en de aandacht die het verdient.
Om typografie effectief te gebruiken, is het handig om te weten wat voor soort lettertypes er zijn. Elke soort heeft namelijk zijn eigen kenmerken. Hieronder zie je de meeste lettertypes en waar je ze het beste voor kunt gebruiken.
Serif lettertypes
Serifs zijn de kleine lijntjes aan de uiteinden van letters. Deze 'pootjes' worden in het Nederlands ook wel schreven genoemd en tekst zonder pootjes schreefloos. Deze schreef maakt de tekst gemakkelijker te lezen, doordat er een groter verschil zit tussen de vormen van de verschillende letters. Vooral teksten die langer zijn, zoals in boeken en tijdschriften, gebruiken serif lettertypes.
Lettertypes met schreef kun je goed gebruiken in titels en kopjes. Of als lettertype voor je 'broodtekst', lange stukken tekst.
Sans serif lettertypes
Schreefloze lettertypes hebben niet de pootjes die serif lettertypes wel hebben. Hierdoor ogen sans serif lettertypes rustiger. Ook zijn de schreefloze lettertypes vaker van gelijke dikte, met een modernere uitstraling tot gevolg. Op het internet, waar teksten vaak korter zijn, wordt vaker een schreefloos lettertype gebruikt, omdat dit prettiger leest vanaf schermen.
Sans serif lettertypes zijn geschikt voor langere stukken tekst. Zorg voor een kleur met voldoende contrast en een juiste regelafstand voor een prettig leesbare tekst.
Monospace lettertypes
Een monospace lettertype bestaat uit letters en tekens die allemaal even breed zijn. Door de gelijke breedte van de karakters, worden deze lettertypes vaak gebruikt bij het coderen of in tabellen waarbij gegevens met elkaar vergeleken moeten worden. Hierdoor heeft dit type een technische uitstraling gekregen. Teksten die in monospace lettertypes zijn gezet zijn vaak breder dan andere lettertypes, maar hebben als voordeel dat ze overzichtelijker zijn.
Monospace lettertypes gebruik je meestal in een kleinere grote, voor korte stukken tekst, zoals bijschriften.
Script lettertypes
Script lettertypes zijn lettertypes die zijn opgebouwd uit handgeschreven letters. Doordat ze handgeschreven lijken hebben ze een persoonlijke en ambachtelijke uitstraling. Hierdoor zijn ze wel vaak minder goed te lezen, vooral in kleinere groottes.
Gebruik script lettertypes vooral in titels en kopjes en vermijd ze in langere stukken tekst.
Typografie tips voor je webdesign
1. Gebruik maximaal 2 fonts
In een ontwerp hoef je niet maar één lettertype te gebruiken. De mooiste ontwerpen gebruiken er meerdere. Gebruik maximaal 2 lettertypes om het geheel overzichtelijk te houden. Kies een eenvoudig, leesbaar lettertype voor je lopende tekst en kies een lettertype die duidelijk verschilt voor je kopjes.
Toch meer variatie nodig? Kies dan verschillende groottes, diktes of kleuren om andere opmaak aan te brengen.
2. Combineer schreefloze lettertypes met serif fonts
De schreefloze en lettertype met schreef zijn het makkelijkst te combineren, omdat ze allebei vaak goed leesbaar zijn. Tussen twee schreefloze lettertypes zit vaak niet genoeg verschil, waardoor er niet voldoende vormcontrast ontstaat.
Door verschillende lettertypes te combineren ontstaat vaak wel het contrast waar je naar op zoek bent. Speel dus op safe en combineer een schreefloos lettertype met een serif font. We zagen deze trend eerder al in ons artikel webdesign trends van 2020.
3. Gebruik genoeg regelafstand
Interlinie, ook wel regelafstand, is de afstand tussen twee regels. Door een grotere afstand te gebruiken wordt de tekst makkelijker leesbaar. Vooral voor teksten die in een kleiner formaat worden gebruikt is een grotere regelafstand onmisbaar.
Voor je standaard tekst kun je een regelafstand van 1,4 tot 1,6 gebruiken. Verklein deze bij grote titels en vergroot deze bij kleinere lettertypes.
4. Verdubbel je tekstgrootte
Vind je het moeilijk om de tekstgrootte (ook wel corps genoemd) te bepalen? Onthou dan deze regel en verdubbel steeds de grootte van je tekst. Door kopjes twee keer zo groot te maken ontstaat er een duidelijk contrast tussen de kopjes en de lopende tekst.
Voorbeelden van effectieve typografie in webdesign
Hierboven hebben we een aantal typografie tips visueel uitgebeeld, maar natuurlijk hebben we ook een paar websites uitgezocht voor jouw inspiratie.
De website van Energy Profits maakt gebruik van grote kopjes om hiërarchie aan te geven. Door de tekst in het wit stukken groter te maken dan de rest van de tekst, valt deze op en wordt deze tekst als eerste gelezen.
Ook de tekstkleur helpt bij de leesvolgorde: de witte tekst valt het meeste op tegen de donkere achtergrond, en ook de rode getallen trekken de aandacht.
Deze template van Webflow maakt gebruik van zowel schreefloze lettertypes als lettertypes met schreven. Het bijzondere aan dit design is dat ze dit zelfs in dezelfde titel toepassen. Deze combi werkt doordat de rest van de website er minimalistisch uit ziet en er zo een focus ontstaat op de typografie.
De website van Livesey Arms, een pub in het Verenigd Koninkrijk, maakt veel gebruik van kapitalen. Kapitalen zijn hoofdletters, en geven de tekst een klassieke uitstraling. Door ook de letterafstand te vergroten, krijgen de hoge letters meer ruimte en zijn deze prettiger te lezen. Het minimalistische kleurenpalet met wit, grijs en zwart draagt bij aan de klassieke uitstraling van de website.
Op de website van Kane wordt wit gebruikt als tekstkleur. Door hier en daar een contrasterende kleur te gebruiken fleurt de hele tekst direct op. Kijk bijvoorbeeld naar het woord ‘live’ in de kop op de homepage. Door deze in het cyaan te gebruiken, springen de letters het scherm af.
Op deze website is de bedrijfsnaam levensgroot uitgeschreven in knalrood. Het is misschien niet voor iedereen weggelegd, maar hiermee val je sowieso op! De hoofdletters helpen met de leesbaarheid en de kleur zorgt voor een opvallend statement.
Typografie tips
Met deze tips kun je direct aan de slag aan je volgende project:
