Versterk je branding, usability en conversie met typografie!

Versterk je branding, usability en conversie met typografie!

De Nieuwe Zaak   •  12 augustus 2014

De complexiteit van de gemiddelde webshop neemt toe en vereist daarmee op grafisch gebied een steeds minimalistischere schil. Als webdesigner is het zoeken naar de balans tussen gebruiksgemak, merkidentiteit en natuurlijk conversiekracht voor je webshop. Eén van de belangrijkste tools om onderscheidend te blijven op het web is typografie, want zeg nou zelf; de legendarische, iets overhypte Helvetica geeft toch wel een totaal ander gevoel dan Scriptina?

typografie-2-1

Een stukje geschiedenis – Vroeger was alles beter!

Tot voor kort hadden webdesigners maar toegang tot enkele zogenaamde ‘web-safe’ lettertypes. Week je hier van af, dan kon het maar zo zijn dat je halve site in het beruchte Comic Sans getoond werd. Unieke lettertypes kon je alleen door middel van plaatjes tonen. Dit was een hel voor contentmanagement, vindbaarheid, toegankelijkheid en het maakte het onmogelijk om tekst te kopiëren en plakken. Het web werd zo, met betrekking tot typografie, één grote eenheidsworst van Arial, Verdana, Helvetica, Trebuchet en Georgia.

Nieuwe technieken

Met de komst van sIFR en later Cufon werd het eindelijk mogelijk om tekst automatisch door middel van Flash of javascript te laten vervangen in een uniek lettertype. Het was eindelijk mogelijk een uniek lettertype te gebruiken, zonder de eerder genoemde nadelen! Helaas waren er nog steeds andere nadelen; Het ging ten koste van de laadtijd bij grote hoeveelheden te vervangen tekst, het vervangen van de elementen zag er vreemd uit en het zorgde her en der voor onvoorspelbare bugs.

En toen was er @font-face! alweer?

Eigenlijk bestond @font-face al best wel lang. Nadat W3C in 1998 de specificaties voor CSS2 had opgesteld, had Internet Explorer 4 de functionaliteit al ondersteund. (Waar waren Firefox, Chrome en Opera toen iedereen maar bleef klagen over Internet Explorer?) Ondanks dat Internet Explorer het bleef ondersteunen werd @font-face na gebrek aan verdere ondersteuning helaas geschrapt in de CSS2.1 specificaties. Pas in 2009 werd @font-face ondersteund door de meeste grote browsers, waardoor designers eindelijk vrijheid hadden om andere lettertypes te gebruiken!

Responsive web:
1001 apparaten om te ondersteunen

Door de opkomst van mobiel internet werd het ook steeds relevanter om je webwinkel geschikt te maken voor een heleboel apparaten, oftwel Responsive webdesign. Niet bepaald makkelijk, want naast het verschil in resoluties worden deze apparaten ook nog eens totaal anders gebruikt. De afstand tussen oog en scherm is op mobiel, tablet en desktop totaal anders. Ondanks dat webdesigners geremd en beperkt werden, waren ze ook verwend. Waar alle regels rond typografie op het web eerst vrijwel vast stonden, was nu ineens ultieme vrijheid en ‘onduidelijkheid’. Ineens moesten we over lettertypes nadenken. 

responsive-web-design

Hoe krijg ik mijn typografie op orde?

Ondanks dat design een creatief  proces is, zitten er ook zeker wetenschappelijke aspecten en conventies achter. Als je typografie serieus wil laten bijdragen aan gebruiksgemak, merkidentiteit en conversiekracht , zit je al bijna helemaal snor als je enkele regels hanteert:

1. Kies een lettertype dat bij je past

Ondanks dat dit voor velen vanzelfsprekend is gaat dit toch niet altijd goed. Elk lettertype voelt anders aan, kies een lettertype dat bij je merk past. Wil je zakelijk, strak, stoer en simpel zijn, of ben je juist lief, warm, sierlijk, romantisch en schattig? Minstens zo belangrijk is het zoeken van een lettertype dat bij je primaire lettertype past. Niet alle lettertypes passen goed bij elkaar. Er is niet altijd een vinger op te leggen waarom een bepaalde combinatie wel of niet werkt. Gelukkig is er bij twijfel altijd nog het machtige Google, waar we een heleboel succesvolle font combinaties kunnen vinden.

2. Gebruik niet te veel lettertypes

Een goed ontwerp is consistent. Te veel fancy lettertypes kunnen al snel voor een inconsistent uiterlijk zorgen. De hiërarchie van de website lijdt hieronder en het kan als snel rommelig ogen. Dit betekent niet dat je in visuals/sfeerafbeeldingen geen leuke typografische composities mag maken.

3. Serif of sans-serif, oftewel schreef of schreefloos

Waar de unieke vormen van schreefletters leesbaarheid bevorderen op print, zijn schreefloze letters voorlopig beter voor de leesbaarheid op een beeldscherm. Waarom voorlopig? Webfont rendering is nog niet perfect en de pixel dichtheid van het gemiddelde scherm is nog niet hoog genoeg voor crispy rendering. Ook Apple’s zogenaamde retina display is, in tegenstelling tot wat ze zelf beweren, lang niet de kwaliteit van print of wat het oog aan kan. We zien online wel de trend dat letters steeds groter gebruikt worden, ter bevordering van de leesbaarheid. Hierdoor wordt het steeds interessanter en acceptabeler om schreefletters te gebruiken als dit nodig is voor de huisstijl, maar voor de kleine lettertjes is dit nog steeds niet acceptabel.

4. Test of je lettertype goed rendert als webfont!

Als het lettertype in Photoshop lekker rendert, betekent dat niet dat dit in browsers ook het geval is. Bij diverse fonts maakt Mac Safari de lettertypes wat zachter en dikker met zware anti-aliasing, terwijl Firefox ze weer karteliger maakt door gebrek aan fatsoenlijk anti-aliasing. Vooral bij schreefletters en kleine letters kan dit als snel voor problemen met betrekking tot leesbaarheid zorgen.

5. Zet je font-size in relatieve waarden

Een beetje technisch en meer een vuistregel voor webdevelopers dan designers. Waar developers eerst met vaste, voorspelbare “pixel”-waarden werkten, maakt men nu idealiter gebruik van “em”- of “rem”-waarden. Op deze manier heb je iets minder controle over je exacte lettergrootte, maar weet je wel dat je tekst zich relatief aanpast aan diverse devices en gebruikers. Bijvoorbeeld; Een titel op 2rem zetten betekent dat de titel 2 keer het formaat is van de basis lettertype grootte van het desbetreffende device.

6. Lettergrootte

De online lettergrootte wordt gemiddeld steeds hoger om de leesbaarheid te bevorderen. Een vaste waarde voor de ideale lettergrootte is niet te bepalen en dit is ook totaal afhankelijk van het lettertype, de lengte van de tekst en de functie van de tekst. Waar vroeger leestekst gemiddeld elf tot dertien pixels groot was, is dat nu omgerekend al snel een lettergrootte van vijftien tot twintig pixels.

7. Lijnhoogte

De lijnhoogte zorgt voor verticale ruimte tussen elke tekstregel. Geadviseerd wordt om een lijnhoogte van anderhalf tot twee keer de lettergrootte te nemen. Op deze manier kan men bij het lezen gemakkelijk de volgende regel vinden. Als de lijnhoogte lager is gaat de leessnelheid van de gemiddelde lezer al snel omlaag en wordt het voor visueel beperkten echt moeilijk. Ook de ideale lijnhoogte hangt af van andere factoren, zoals het gekozen lettertype en de breedte van de tekst. In een smal kolommetje tekst hoeft de lijnhoogte niet net zo groot te zijn als in een brede tekst.

8. Regellengte

De ideale regellengte voor leestekst is tussen de 50 en 75 karakters. Is de regel te lang, dan krijgt het oog het moeilijk met het onderscheiden van regels en met name met het vinden van de volgende regel. Is je regel te kort, dan moet het oog zo vaak verspringen dat het leesritme verstoort wordt.

9. Geen justified tekst

Justified tekst, waarbij de tekst een heel blok links en rechts uitvult om een strakke kolom te maken, is een trucje waar webdesigners vooral niet aan moeten beginnen.

In print kan je tekst per regel opmaken en laten drukken, waarna het niet meer zal veranderen. Op het web zijn teksten daarentegen dynamisch en zal het uitvullen van tekstblokken elke keer anders gaan, afhankelijk van de content, het apparaat en de browser waarin gekeken wordt. Hierdoor is er geen controle over witruimtes tussen woorden, waardoor dit hoogstwaarschijnlijk ten koste zal gaan van de leesbaarheid. Ook is de kans groot dat er zogenaamde rivers, slierten witruimte door je teksten heen, ontstaan die grafisch uitermate onwenselijk zijn.

10. Verticaal ritme, laat maar.

Een van de beste manieren om rust op je pagina te krijgen is ritme. Toen websites nog statisch waren en een vaste breedte hadden, was een verticaal ritme met een beetje extra werk zeer goed haalbaar door slim gebruik te maken van marges en lijnhoogtes. Tegenwoordig is dat anders. Als webdeveloper zit je vuistdiep in relatieve waarden, verandert het uiterlijk van je pagina op diverse resoluties en worden marges en lijnhoogtes ook nog beïnvloed door de browser waarin je kijkt. Het behalen van verticaal ritme door de gehele lay-out wordt met een moderne website vrijwel onhaalbaar, tenzij je ergens een flinke smak euro’s en tijd over hebt. Mijn advies: Laat verticaal ritme door je hele lay-out vallen en hou het bij horizontaal ritme en eventueel verticaal ritme binnen blokken.

Conclusie

Momenteel is online typografie nog vaak ondergewaardeerd en is men vaak nog niet op de hoogte van de “regels”. Wil jij een gebruiksvriendelijke webwinkel met eigen identiteit? Besteed dan in ieder geval aandacht aan je typografie! Dit zal zich zeker terugbetalen in het onderscheidend vermogen, en het uiteindelijke resultaat van je webshop.

Meer lezen over merkidentiteit op het moderne web? Lees dan Hoe blijft je merkidentiteit overeind in een wereld van conventies en responsive minimalisme door Iwan Blokzijl.

Blijf op de hoogte

Meld je aan voor onze 2-wekelijkse nieuwsbrief en blijf op de hoogte van het laatste commerce nieuws!

© 2018 De Nieuwe Zaak