Lettertype & Conversie

Vaak worden we geconfronteerd met hele nare lettertypes (soms nog net geen Comic Sans) als we aan de slag gaan met het webdesign voor een klant. Het lettertype, de spatiëring en de regelafstand kunnen echter een behoorlijke impact hebben op de conversie en het is dus iets om serieus aandacht te geven.

Mobiel internet en design

Bezoekers zijn door het gebruik van mobiele telefoons gewend geraakt aan scrollen (ja echt scrollen mag / moet!) dit heeft voor de zogenaamde one-page designs gezorgd. Een voorbeeld van zo’n one-page design was onze eigen homepage (onze huidige homepage heeft er natuurlijk nog wel wat van weg). Een ander gevolg van het toenemende gebruik van mobiele apparaten is het gebruik van lettertypes, spatiëring en regelafstand. Niemand vindt het fijn om kleine, samengeperste woorden of regeltjes te lezen op een kleiner scherm en als gevolg hiervan zijn we ook op grotere schermen gewend geraakt aan grotere letters, meer spatiëring en meer regelafstand.

Lettertype & Conversie

In een conversie project van ClickLaboratory bleek dat een groter lettertype met meer regelafstand de volgende positieve effecten had:

• 10 % minder bounce rate
• 19 % minder exit rate
• 24 % meer bezochte pagina’s
• 133 % conversie verhoging (ingevulde formulieren)

Hieronder een screenshot van het originele lettertype en het lettertype wat voor de verbeteringen zorgde.

Waar je op moet letten

• lezers houden van flink wat regelafstand, het geeft een gevoel van ruimte en vrijheid;
• gebruik niet teveel lettertypes op 1 pagina, vaak is 2 (1 voor headings en 1 voor de body tekst) al voldoende;
• zorg dat de gebruikte lettertypes bij elkaar passen;
• blijf voor de body tekst zoveel mogelijk bij standaard / normale lettertypes (zoals Arial, Verdana, Georgia, Trebuchet of moderne lettertypes die daar enigszins op lijken);
• testen, testen en nog eens testen. Niet iedere doelgroep is hetzelfde…

Het lettertype op een website achterhalen?

Ben je op een website gekomen en onder de indruk van een lettertype, bijvoorbeeld qua leesbaarheid? Dan wil je natuurlijk weten welk lettertype dat is toch? Hieronder vind je een aantal makkelijke manieren om het lettertype op een website te achterhalen:

1. Inspecteren via de Browser: Dit is een veelgebruikte techniek onder professionals. Rechtsklik op de tekst waarvan je het lettertype wilt identificeren en selecteer ‘Inspecteren’. Dit opent de ontwikkelaarstools van de browser, meestal aan de rechterkant van het venster. Onder het tabblad ‘Elements’ of ‘Elementen’ kun je de CSS-stijlen van de geselecteerde tekst bekijken. Zoek naar het ‘font-family’ attribuut om het lettertype te vinden.
2. Gebruik van Extensies: Er zijn browserextensies zoals WhatFont en Fontanello die specifiek zijn ontworpen om lettertypes op webpagina’s te identificeren. Na het installeren van een van deze extensies kun je eenvoudig met de muis over de tekst bewegen om het gebruikte lettertype te zien.
3. Gebruik van Online Tools: Er zijn online tools zoals Font Squirrel’s Matcherator en WhatTheFont waarmee je een lettertype kunt identificeren aan de hand van een afbeelding. Je kan een screenshot maken van de tekst op de website, deze uploaden naar de tool en deze zal proberen het lettertype te identificeren of vergelijkbare lettertypes te suggereren.
4. Raadplegen van de Stylesheet: Soms kan het nuttig zijn om rechtstreeks de broncode van de website te onderzoeken. Je kan de broncode van een webpagina bekijken door met de rechtermuisknop ergens op de pagina te klikken en ‘Paginabron bekijken’ te selecteren. Zoek vervolgens naar links naar CSS stylesheets en open deze. Binnen de stylesheet, zoek naar het ‘font-family’ attribuut.

Beste lettertypes voor websites

Voor een enorm overzicht aan lettertypes die gemakkelijk te gebruiken zijn kun je kijken op de website van Google Fonts. Hieronder vind je de 10 beste lettertypes voor websites vanwege de leesbaarheid:

1. Roboto: Ontworpen door Christian Robertson voor Google, is Roboto een uiterst veelzijdig en leesbaar lettertype. Het wordt vaak gebruikt in zowel koppen als alinea’s, en staat bekend om zijn moderne uitstraling.
2. Open Sans: Ontworpen door Steve Matteson, is Open Sans een humanistisch lettertype dat bekend staat om zijn uitstekende leesbaarheid en vriendelijke uitstraling. Het is een veilige keuze voor zowel lange teksten als koppen.
3. Lato: Dit lettertype, ontworpen door Łukasz Dziedzic, heeft een evenwichtige, neutrale stijl, waardoor het zowel professioneel als vriendelijk oogt. De brede waaier aan stijlen maakt het geschikt voor een veelheid aan toepassingen.
4. Montserrat: Julieta Ulanovsky creëerde Montserrat, een lettertype geïnspireerd op de oude posters en borden van Buenos Aires. Het heeft een modern, geometrisch ontwerp dat goed werkt voor koppen en merkidentiteit.
5. Avenir Next: Ontworpen door Adrian Frutiger en Akira Kobayashi, is Avenir Next een schone en elegante keuze. Het is met name geschikt voor websites die een stijlvol en modern gevoel willen uitdragen.
6. Playfair Display: Voor websites met een meer traditioneel of elegant thema, is Playfair Display een uitstekende keuze. Dit lettertype is geïnspireerd op lettertypen uit de 18e eeuw en voegt een vleugje klasse toe aan elke website.
7. Source Sans Pro: Dit is Adobe’s eerste open-source lettertype, ontworpen door Paul D. Hunt. Het is ontworpen voor gebruik in gebruikersinterfaces en wordt geprezen om zijn leesbaarheid en neutraliteit.
8. Noto Sans: Ontworpen door Google, is Noto Sans gemaakt met het doel om een harmonieus uiterlijk te ondersteunen voor alle talen met compatibele hoogtes en streepdiktes. Dit maakt het ideaal voor meertalige websites.
9. Merriweather: Voor websites met veel tekst, zoals blogs of nieuwsportalen, is Merriweather, ontworpen door Eben Sorkin, een uitstekende keuze vanwege de hoge leesbaarheid, zelfs bij kleine lettergroottes.
10. Futura: Als een klassiek geometrisch lettertype, biedt Futura een tijdloze esthetiek die geschikt is voor zowel koppen als tekst.

Onthoud dat de keuze van een lettertype niet alleen moet passen bij het ontwerp van de website, maar ook bij je merk / branding. Het combineren van twee of drie lettertypes kan ook bijdragen aan een boeiender ontwerp.

Op Heers.nl gebruiken we Gilroy (geen Google Font helaas) voor de headers en Open Sans voor de body tekst.