Typografie op het web

Maar liefst 95% van de informatie op het internet is geschreven. Typografie is dan ook één van de belangrijkste elementen van web design. Daarnaast kan de juiste keuze van de juiste lettertype de boodschap van de website enorm versterken, of juist afbreken. In dit artikel leg ik in het kort uit waar je op moet letten bij het kiezen en gebruiken van lettertypes.

Het kiezen van een goede lettertype

Leesbaarheid

Zorg er bij de beoordeling van je lettertype altijd voor dat je hem bekijkt in de formaten en stijlen waarin je hem zal gebruiken. Vooral als je website ontwerp kleine letters bevat, is het belangrijk te controleren of het lettertype goed leesbaar blijft.

Weet wat jouw boodschap is

Als je niet weet wat de boodschap van jouw website is, kun je nooit de juiste lettertype erbij kiezen. Elk lettertype heeft zo zijn eigen karakter en uitstraling en de één zal dan ook beter bij de uitstraling van de website passen dan de andere. Daarnaast zijn er ook lettertypes die zo algemeen zijn, dat ze bij elke gelegenheid wel passen. Denk aan bijvoorbeeld de populaire Helvetica, Avenir en Museo Sans. Probeer echter niet te makkelijk naar één van deze lettertypes te grijpen, aangezien ze door hun populariteit juist ook een beetje saai worden.

Lettertype combinaties

serif-sans-serifVoor web design is het aan te raden niet meer dan drie lettertypes voor één website te gebruiken. Maar bijvoorbeeld een stevige schreefloze lettertype voor koppen en een elegante lettertype met schreef voor de teksten, kan het ontwerp van de website naar een hoger niveau tillen. Zorg er voor dat de lettertype combinaties voldoende contrasteren met elkaar zodat ze elkaars karakter versterken.

Fun fact: de termen uppercase en lowercase komen oorspronkelijk van de lettercases die vroeger gebruikt werden voor het drukken van kranten (zie de foto bovenin dit artikel). In de bovenste helft van deze koffer lagen alle hoofdletters en in de onderste helft lagen alle kleine letters.

 

Typografie tips in web design

Hiërarchie

Text layoutZorg ervoor dat de content op de website een duidelijke hiërarchie heeft. Een goede hiërarchie zorgt ervoor dat je in één oogopslag kan zien waar een stuk tekst begint en eindigt, waar de belangrijkste punten staan en dat het geheel snel te scannen is. Gebruik daarvoor duidelijk te onderscheiden h1, h2 en h3 koppen, door bijvoorbeeld de koppen dik gedrukt te maken. Daarnaast is het altijd fijn als bullet points de belangrijke punten uitlichten en dik gedrukte of schuingedrukte stukken tekst de content te scannen maakt.

Regelhoogte

Voor de hoofdtekst van artikelen en blogs is een regelhoogte van 1.5 keer de hoogte van de letters is een goede middenweg. Maak je de regelhoogte veel lager, dan wordt de tekst wat benauwend, terwijl een te hoge regelhoogte de tekst teveel lucht tussen de tekst creëert. Voor koppen kun je meestal een lagere regelhoogte gebruiken.

Kleur

Kleur is van toepassing op bijna alle elementen van website typografie. Door te spelen met kleur kun je de hiërarchie van de tekst opbouwen. Maak blog teksten bijvoorbeeld donkergrijs (#444) om het harde van 100% zwarte teksten te voorkomen.

Online wordt er niet gelezen

Okey, er wordt heus wel gelezen, maar alleen als de lezer echt geïnteresseerd is in dat specifieke onderwerp. Voor alle andere web teksten wordt er vooral gescand. Dus nogmaals, zorg er voor dat de tekst opgedeeld is in kleine hapklare brokken, gebruik bullet points, licht belangrijke punten uit met dik gedrukte tekst en wissel regelmatig af met afbeeldingen.