Twist-Ontwerp-Blog-Google-Webfonts

Versterk je identiteit met een goed gekozen lettertype

Google fonts zijn top voor SEO!

Jarenlang waren we als ontwerpers beperkt in het gebruiken van lettertypes voor een website. We konden kiezen uit slechts een paar soorten, zoals Arial, Times en Verdana. Standaard letters die iedereen wel op zijn computer had staan. Maar dat hoeft niet meer. Google fonts is een geweldige (gratis) applicatie die je veel meer keuzevrijheid geeft.

Binnen een website is het gebruik van het lettertype net zo belangrijk om je eigen identiteit neer te zetten als in de rest van je communicatie-uitingen. Google fonts is een verzameling lettertypes die op het internet staan en die een webdesigner gratis mag gebruiken. Met Google fonts is het mogelijk om snel en gemakkelijk online een lettertype te kiezen die past bij je huisstijl. We zijn daardoor niet meer afhankelijk van die enkele ‘standaard’ lettertypes die iedereen op zijn of haar computer heeft staan. De keuzevrijheid is daarmee enorm toegenomen, waardoor je website er veel mooier uit komt te zien.

Twistontwerp-google-fonts

Google heeft op dit moment een collectie van 708 font families online staan. Keuze genoeg dus! Surf naar de website voor een overzicht: https://www.google.com/fonts

Waarom is het zo belangrijk om na te denken over typografie?
Door een huisstijl te ontwerpen die past bij de identiteit van je bedrijf, product en/of dienst, werk je aan je naamsbekendheid. Maar je legt er ook het imago mee vast. Door goed na te denken over het lettertype dat je daarbij gebruikt, creëer je de uitstraling die de juiste doelgroep voor jou aantrekt. Het is net als met het dragen van kleding. Zien ze jou netjes in een pak met stropdas of casual op slippers? Je snapt direct dat je met andere kleding anders overkomt bij mensen. Met een tekst is dat net zo. Neem het lettertype van Coca Cola; met vrolijke golven is het een speels lettertype dat een heel ander gevoel oproept dan het stevige no-nonsense lettertype van Ikea, dat staat als een huis. Bij Coca Cola denk je aan fun, ontspannen en even lekker genieten. Bij het lettertype van Ikea krijg je het gevoel dat het hier om stevige, niet kapot te krijgen producten gaat. Het is niet zo dat je dit bewust bedenkt als je de logo's ziet, maar het is een onbewuste waarneming die door je hersenen wordt geregistreerd. Typografie speelt dus, naast de kleur, een belangrijke rol in de beleving van je merk.

Twist-Ontwerp-Coca-Cola-Ikea

Het lettertype van IKEA staat als een huis. Het lettertype van Coca-Cola is veel speelser.

Schreef of schreefloos
Een lettertype is een serie tekens met letters en cijfers, die op overeenkomstige manier zijn vormgegeven. Schreefletters (serif) hebben kleine strepen aan de stokken en de staarten, zowel horizontaal als verticaal. Een bekend voorbeeld is de Times, die vroeger veel als krantenletter werd gebruikt. Schreefletters lezen vaak fijn op papier. Daarom worden veel boeken met dit soort letters vormgegeven.
Een schreefloze (sans serif) heeft zoals de naam al zegt, geen schreven. Deze wordt vaak gebruikt voor koppen en titels. Een letter die lekker op papier leest, zoals de Times, leest minder goed op een computerscherm. Veel lezers hebben dan liever een schreefloze letter, bijvoorbeeld de Verdana, die in opdracht van Microsoft voor het web is ontworpen. Schreefloze letters worden vaak als tijdloos en modern ervaren.
Kijk bij je keuze ook naar de letterfamilie, dit zijn alle varianten waarin je het lettertype kan gebruiken. Het gewicht van een letter wordt gewoonlijk beschreven in termen als dun, normaal, vet, extra vet. Cursief (of schuin) zijn stijlen waarbij de letters overhellen. Smal, condensed en verbreed zijn drie gangbare stijlen die de breedte van de lettertekens aangeven. Niet alle letterfamilies hebben dezelfde varianten. Voor een website is het belangrijk om de varianten normaal (regular), vet (bold) en cursief (slanted) te hebben, zodat je in de tekst kan variëren met titels, tussenkopjes en schuingedrukte tekst.

Twist-Ontwerp-letters-fonts-schreef-schreefloos

Dik of dun? Breed of smal? Rechtop of cursief? Met hoofdletters of juist kleine letters?

Twist-Ontwerp-handschriftletter

Google fonts kent ook een collectie handschriftletters.

Leesbaarheid
Dankzij Google fonts hoeven we nu niet meer standaard te kiezen voor de Times of de Verdana, maar is de keuze ontzettend uitgebreid. Wel blijft het belangrijk om goed na te denken over de leesbaarheid. We kunnen eindeloos variëren met lettertypes in de tekst, maar wordt het er wel leesbaarder van? Gebruiksgemak en functionaliteit gaan online voor op vormgeving, een bezoeker op je website ben je zo maar kwijt als je website te druk overkomt. Gebruik je veel tekst? Gebruik dan een wat smaller lettertype. Kies bij het ontwikkelen van de huisstijl direct de juiste typografie en gebruik voor je online uitingen Google Fonts. Je wordt beloond met een snelle website en een uitstraling die past bij je ideale klant.

Google Fonts biedt allerlei filters om snel tot de juiste keuze te komen. Filter bijvoorbeeld op categorie, zoals serif, sans serif, display (koppen), handwriting of monospace (letters van gelijke breedte, mooi in tabellen). Je kunt ook de dikte van de letter aangeven (thickness), cursivering (slant) en breed of juist smal (width). Ook aan internationale ondernemingen is gedacht.

Welke letters passen bij jou?
Laat je niet afschrikken door de enorme hoeveelheid lettertypes die Google aanbiedt. Door de filteropties kun je vrij snel tot een keuze komen. Start door na te denken welk gevoel je bij je doelgroep wilt oproepen. Wil je concurreren op prijs? Je lettertype mag er dan niet luxueus uitzien. Wil je je expert-status benadrukken? En is het belangrijk om heel persoonlijk te zijn? Een handschriftletter kan hierbij een keuze zijn. Concentreer je: is jouw organisatie groot of juist klein? Denk aan welk probleem je wilt oplossen voor je ideale klant. Welk gevoel hoort daarbij? Heb je een buyer persona gemaakt? Denk aan deze persoon. Waar gaat haar/zijn hart sneller van kloppen? Kijk ook naar je concurrenten. Hoe presenteren zij zich? Wat vind je goed en wat is echt niet ok? Door dit onderzoek vooraf te doen, kun je nu makkelijker keuzes maken.

Aan de slag!
Surf naar Google Fonts. Je kunt de lettertypes op verschillende manieren beoordelen. Bijvoorbeeld alleen maar met losse woorden, zoals je woordlogo (klik op 'word' en vul het woord in bij 'preview text' dat je wilt bekijken). Je kunt een zin invullen bij 'sentence'. Handig om de uitstraling van titels, tussenkoppen, slogans en pay-offs te beoordelen. Kies voor 'paragraph' als je een heel tekstblokje wilt bekijken. Een letter kan er als woord heel mooi uitzien, maar in een tekstblok kan het opeens heel druk overkomen. Onder de menuknop 'poster' bekijk je opnieuwe losse woorden, maar nu zonder de font-familie-informatie die wordt getoont bij 'word'.

Maak een grove voorselectie en kies diverse fonts die je passend lijken (klik op 'add to collection'). Probeer bij de keuze steeds je ideale klant in gedachten te houden. Ben je klaar met de voorselectie, klik dan op 'review'. De fonts kun je nu ten opzichte van elkaar vergelijken. Wees hier streng: bekijk elke keer twee lettertypes en kies welke het beste is. Klik de andere meteen weg. Zo kom je vrij snel tot een definitieve keuze. Het kan zijn dat je voor je logo een ander lettertype kiest dan voor je koppen en teksten. Meerdere fonts in een huisstijl kan zeker, maar overdrijf het niet. Ik beveel je aan om maximaal 3 letterfamilies te kiezen. Zorg ervoor dat je broodtekst (de basisletter van al je leesteksten, dus geen koppen e.d.) een wat uitgebreidere familie is met normale, vette en cursieve lettertypes.

Twist-Ontwerp-Start-Google-Fonts

Logo ontwerpen? Start met het menu 'Word' en typ de bedrijfsnaam in het venster 'Preview text'. Pas eventueel de lettergrootte aan als je veel letters in je naam hebt. Kies nu in het linkermenu de categorie en filter op Thickness, Slant en Width. Bekijk de voorselectie en kies hieruit enkele fonts die je goed vindt passen. Klik hiervoor op de blauwe knop 'Add to Collection'.

Google-fonts-collection

Wanneer je meerdere fonts hebt toegevoegd aan de collectie en je wilt ze onderling vergelijken, klik dan op 'review'.

Google-fonts-review

Het kiezen van de broodtekst: concentreer je. Welk gevoel geeft de tekst? Is het makkelijk leesbaar? Klik meteen de fonts weg die afvallen (kruisje rechtsboven).

Twist-Ontwerp-Google-download-fonts

Wanneer je klikt op de knop 'use' krijg je de code die je nodig hebt om in je website te gebruiken. Wil je de letters niet alleen in je website, maar ook elders gebruiken, dan kun je ze downloaden.

Google-fonts-tutorial

Op You Tube staan diverse video's waarin wordt beschreven hoe je eenvoudig en snel Google fonts kunt gebruiken op je website. Klik op het plaatje hierboven en je weet het in 1,5 minuut (Engelstalig).

Google-Matt Cutts

Alle Google fonts staan bij Google op de server. Met een speciale code verwijs je in je website naar de juiste locatie, waarna de fonts on the fly worden opgehaald en getoond. Google is erin gespecialiseerd om dit supersnel te doen. In deze video legt Matt Cutts van Google uit hoe dat werkt (voor de nerds onder ons ;-). Klik op de afbeelding, de video speelt direct af.

Whitepaper 'Lettertypes'
Over de keuzes die je kunt maken bij de verschillende lettertypes heb ik een korte whitepaper geschreven. Wellicht helpt je dat bij je zoektocht naar de beste letter voor je huisstijl. Blijf je twijfelen? Ik help je natuurlijk graag. Kennismaken en een eerste adviesgesprek is gratis!

Vond je deze blog interessant? Delen mag, graag zelfs!

Delen

© twistontwerp.nl

Schrijf je in voor mijn nieuwsbrief

Automatisch inspiratie in je mailbox

Met enige regelmaat schrijf ik blogs over onderwerpen in m'n vakgebied. Wil je op de hoogte blijven en goede tips ontvangen? Schrijf je dan in voor mijn nieuwsbrief. Uiteraard ga ik met zorg om met je persoonlijke gegevens en worden deze niet gedeeld met derden. Uitschrijven kan altijd met de link onderaan elke nieuwsbrief.

Wil je op de hoogte blijven en inspirerende blogs ontvangen? Schrijf je dan in voor mijn nieuwsbrief