Je bezoekt een website en je oog valt meteen op een prachtig lettertype. Yes, dit is ‘m! Het past perfect bij de uitstraling die je voor je eigen website in gedachten hebt. Maar dan rijst de vraag: Welk lettertype is dit precies?
Soms is het heel makkelijk om een lettertype te vinden en ben je slechts een paar klikken verwijderd van een antwoord op je vraag. Andere keren kost het wat meer tijd om het font te vinden. In dit artikel vertel ik je graag hoe je het lettertype van een website identificeert en hoe je een vergelijkbaar of bijpassend lettertype vindt.
Twee manieren om een lettertype te vinden
Er zijn verschillende manieren om een lettertype te vinden, namelijk door het lettertype op te zoeken in de broncode of door het lettertype in een afbeelding te scannen.
De makkelijke manier: inspecteer de bron van de website
De eenvoudigste manier om het lettertype van een website te vinden, is door simpelweg de broncode van de website te inspecteren. Dit kun je doen door met de rechtermuisknop op de tekst te klikken waarin je geïnteresseerd bent, en vervolgens te kiezen voor de optie ‘Inspecteren’ of ‘Element inspecteren’. Dit opent een gedeelte van je browser waarin je de HTML- en CSS-code van de website kunt bekijken.
In deze code zoek je naar het gedeelte dat begint met font-family. Dit geeft aan welk lettertype (of welke reeks lettertypes) wordt gebruikt voor het geselecteerde tekstonderdeel. Vaak worden er meerdere lettertypes vermeld, zodat de browser een alternatief heeft als het primaire font niet beschikbaar is. Het eerste font in de lijst is doorgaans het gewenste lettertype. Kun je de regel font-family niet snel vinden? Gebruik dan het filter rechtsboven.
Hierboven zie je een voorbeeld. Ik heb de tekst op de homepage van ‘Groeien als kool’ geselecteerd. Daarna heb ik aan de rechterkant gefilterd op ‘font-family’ (zie bovenste pijl). Sleep ik mijn muis over de eerste regel, dan zie ik alle lettertypes. Het eerste lettertype is de juiste font: Alberta Sans.
Wordt een lettertype niet via CSS geladen of staat het lettertype in een afbeelding? Dan moet je een andere methode gebruiken.
Vind je bovenstaande stappen nog steeds lastig? Installeer dan een Chrome-extensie als Font Finder om lettertypes te vinden.
Lettertypes in afbeeldingen achterhalen
Soms is een lettertype verwerkt in een afbeelding of plaatje op de website. In zo’n geval is het niet direct mogelijk om via de broncode van de website het lettertype te achterhalen. Gelukkig bestaan er online tools die je kunnen helpen om het font van een afbeelding te vinden.
Een van de bekendste tools is WhatTheFont. Hiermee kun je een afbeelding uploaden en de tool probeert vervolgens het gebruikte lettertype te identificeren. Andere vergelijkbare tools zijn WhatFontIs en de Matcherator van FontSquirrel. Deze tools werken op een vergelijkbare manier: je uploadt een afbeelding en zij geven suggesties van lettertypes die het meest overeenkomen met wat er in de afbeelding staat.
Bij sommige tools – zoals WhatFontIs – moet je zelf aangeven welke letters er worden getoond, zodat de resultaten beter zijn.
Waarom kan ik een font niet vinden?
Soms lukt het niet om het exacte font te vinden. Dit kan verschillende redenen hebben. Ten eerste lijken veel lettertypes sterk op elkaar. Kijk maar eens naar Helvetica en Arial. Dit zijn twee lettertypes die op het eerste gezicht bijna identiek lijken, maar ze verschillen op subtiele manieren.
Hier heb ik Helvetica en Arial over elkaar geplakt. Je ziet dat beide fonts erg op elkaar lijken.
Ook kan het zijn dat het font speciaal is ontworpen voor een specifieke website of merk en niet vrij beschikbaar is voor bedrijven of consumenten. Dit zie je vaak bij grote bedrijven, zoals Coca Cola en Disney. Je moet dan op zoek naar een alternatief, helaas…
Daarnaast zijn er veel fonts die onder licenties vallen en niet zomaar overal gebruikt mogen worden. In zulke gevallen biedt een tool vaak alternatieven aan die op het gezochte lettertype lijken, maar net iets anders zijn.
Tenslotte zoeken niet alle lettertypezoekmachines – geinig woord voor Scrabble – in dezelfde databases. Het kan dan goed zijn om meerdere websites te gebruiken.
Hoe vind ik een bijpassend lettertype?
Heb je een prachtig lettertype gevonden? Mooi, maar je bent pas op de helft. Als je een website of brochure gaat ontwerpen, dan wil je meerdere lettertypes en stijlen combineren, bijvoorbeeld klassieke lettertypes met een schreef en moderne lettertypes zonder schreef.
Je verwacht het misschien niet, maar ook hier zijn tools voor 😉
Een van de populairste tools voor het combineren van lettertypes is FontJoy. Met deze tool kun je automatisch combinaties van fonts genereren die goed bij elkaar passen. Je kunt zelfs instellen of je een sterke contrast wilt tussen de fonts, of juist een subtiel verschil.
Een andere handige tool is de Font Pairing Playground van Monotype. Deze tool geeft je de mogelijkheid om handmatig verschillende fonts te combineren en direct te zien hoe ze samen werken in een ontwerp.
