Heb je ooit de heldere tekst op een website bewonderd en je afgevraagd:“Welk lettertype is dat?” Lettertypen spelen een grote rol bij het vormgeven van de persoonlijkheid van een website. Ze bepalen de sfeer, vestigen een merkidentiteit en, nog belangrijker, hebben invloed op hoe gemakkelijk bezoekers je inhoud kunnen lezen. Als je een bepaald uiterlijk wilt nabootsen, de typografie van je eigen website wilt verbeteren of gewoon je nieuwsgierigheid wilt bevredigen, is de eerste stap uitzoeken welke lettertypen er worden gebruikt.

Waarom is het zo belangrijk om de juiste lettertypen voor je website te kiezen?

  • Branding: Lettertypes helpen de toon van je merk over te brengen – of die nu speels, verfijnd, modern of traditioneel is.
  • Leesbaarheid: De juiste lettergrootte en -stijl maken je inhoud gemakkelijk te consumeren, wat de gebruikerservaring verbetert.
  • Esthetiek: Lettertypen creëren een prachtige visuele aantrekkingskracht en harmonie binnen het ontwerp van je website.

In deze gids behandelen we alles wat je moet weten over het herkennen van lettertypen op een website.

De hulpmiddelen voor ontwikkelaars van je browser gebruiken

Elke moderne webbrowser heeft ingebouwde tools waarmee je achter de schermen van het ontwerp van een website kunt kijken. Deze tools voor ontwikkelaars zijn je geheime wapen om erachter te komen welke lettertypen worden gebruikt! Hier lees je hoe je ze kunt openen in de populairste browsers:

Chrome, Firefox en Safari

  1. Klik met de rechtermuisknop of F12 op de tekst waarvan je het lettertype wilt identificeren.
  2. Selecteer Inspecteren (of Element inspecteren). Dit opent het paneel met ontwikkelgereedschappen.
  3. Zoek in het paneel naar het tabblad Stijlen of Berekenen.
  4. Blader door de CSS stijlen tot je de font-family eigenschap vindt. Dit onthult de naam van het lettertype.

CSS Font Stacks begrijpen

De font-family eigenschap geeft vaak meerdere lettertypen weer, gescheiden door komma’s. Dit wordt een “lettertypestapel” genoemd. Dit wordt een “font stack” genoemd en biedt een vangnet. Als het eerste lettertype niet beschikbaar is op het apparaat van een gebruiker, probeert de browser het volgende lettertype in de lijst, enzovoort.

Problemen oplossen: Wanneer het lettertype niet verschijnt

Soms moet het lettertype dat je ziet gevonden worden in de CSS. Dit kan gebeuren wanneer:

  • Het lettertype wordt geladen vanuit een extern bestand: Controleer de code voor links naar lettertypebestanden (veel voorkomende extensies zijn .woff, .woff2, .ttf, .otf).
  • Het lettertype is geladen via CDN: Zoek naar verwijzingen naar een content delivery network (CDN) zoals Google Fonts of Adobe Fonts.

Extensies voor lettertype-identificatie

Wil je een supersnelle manier om lettertypen te ontdekken? Browserextensies zijn je beste vriend! Enkele van de populairste opties zijn WhatFont, Fontanelloen Font Ninja. Deze extensies stroomlijnen het proces, zodat je met de muis over elke tekst op een website kunt gaan en direct informatie krijgt over het lettertype.

Dit is hoe ze over het algemeen werken:

  1. Installeer de extensie in de browser van je keuze.
  2. Bezoek de website waarin je geïnteresseerd bent.
  3. Activeer de extensie (meestal door op het pictogram in de werkbalk van je browser te klikken).
  4. Beweeg je muis over de tekst die je wilt analyseren.
  5. Er verschijnt een pop-up met de naam van het lettertype, de grootte, het gewicht, de stijl en soms zelfs de kleur en regelafstand.

Voordelen van het gebruik van lettertype-extensies:

  • Snelheid en gebruiksgemak: Omzeil de noodzaak om in de code van de website te duiken.
  • Extra informatie: Sommige extensies geven uitgebreidere details over lettertypen.

Dingen om in gedachten te houden:

  • De nauwkeurigheid kan variëren: Extensies zijn soms maar 100% nauwkeurig, vooral met aangepaste of minder bekende lettertypen.
  • Beschikbaarheid: Controleer welke browsers elke extensie support.

Populaire lettertype-extensies:

  • WhatFont: Eenvoudig en veel gebruikt.
  • Fontanello: Biedt een schone interface en extra lettertypegegevens.
  • Font Ninja: Krachtig, met geavanceerde functies voor ontwerpers.

Het kiezen van de beste extensie hangt af van je voorkeuren en de mate van detail die je nodig hebt.

Lettertypen herkennen in afbeeldingen

Soms maakt het lettertype dat je aanspreekt deel uit van het logo, de banner of andere grafische elementen van een website. Gelukkig zijn er hulpmiddelen die speciaal zijn ontworpen om je te helpen bij het identificeren van lettertypen in afbeeldingen.

Populaire op afbeeldingen gebaseerde lettertype-aanduidingen

  • WhatTheFont (door MyFonts): Een veelzijdig hulpmiddel met een enorme database van lettertypen om mee te vergelijken. Upload gewoon een afbeelding en het programma probeert het gebruikte lettertype te matchen.
  • Fontspring Matcherator: Nog een geweldige optie met geavanceerde matchingsalgoritmen, die fijnmazigere controle biedt voor het beperken van resultaten.

Hoe je op afbeeldingen gebaseerde lettertype-aanduidingen kunt gebruiken:

  1. Bereid je afbeelding voor: Zorg ervoor dat de tekst duidelijk en goed leesbaar is. Snijd de afbeelding bij om alleen het lettertype dat je wilt identificeren scherp te stellen.
  2. Upload je afbeelding naar de website van het door jou gekozen hulpmiddel.
  3. Instellingen aanpassen (indien beschikbaar): Met sommige gereedschappen kun je het selectiegebied verfijnen of hints geven over de eigenschappen van het lettertype.
  4. Ontvang je resultaten: De tool geeft een lijst met potentiële matches, vaak gerangschikt op gelijkenis.

Succesfactoren voor nauwkeurigheid:

  • Beeldkwaliteit: Een hogere resolutie en een helder contrast leiden tot betere resultaten.
  • Complexiteit van het lettertype: Eenvoudige, opvallende lettertypes zijn makkelijker te herkennen dan zeer decoratieve of gestileerde lettertypes.

Wanneer beeldidentificatoren tekort kunnen schieten:

  • Aangepaste of sterk gewijzigde lettertypen: Deze zijn mogelijk niet te vinden in bestaande databases.
  • Beperkte tekstvoorbeelden: Hoe meer tekst het hulpmiddel kan analyseren, hoe nauwkeuriger het zal zijn.

Tips om je resultaten te verbeteren

  • Probeer meerdere gereedschappen: Experimenteer met verschillende op afbeeldingen gebaseerde lettertype-identificatiemiddelen, omdat hun sterke punten kunnen verschillen.
  • Zoek naar vergelijkbare lettertypen: Als je geen exacte overeenkomst vindt, blader dan door de voorgestelde lettertypes voor alternatieven die in de buurt komen en die je doel zouden kunnen dienen.

Lettertypen verkennen in thema’s en plugins

Veel WordPress thema’s en plugins hebben ingebouwde lettertype-opties, die mogelijk de standaardinstellingen van je browser of lettertypen die je elders hebt geselecteerd overschrijven. Hier lees je hoe je kunt vinden waar deze lettertype-instellingen zich bevinden:

Je thema-instellingen controleren:

  1. Ga naar Uiterlijk > Aanpassen in je WordPress dashboard: Hiermee start je de WordPress Customizer.
  2. Zoek naar een onderdeel met de titel “Typografie” of “Lettertypen”: Niet alle thema’s hebben dit, maar het is een veelgebruikte plek voor instellingen voor het aanpassen van lettertypen.
  3. Verken de opties: Kijk of je globale lettertypes kunt wijzigen voor koppen, bodytekst, etc., of pas lettertypes aan voor specifieke elementen.

Plugin-instellingen onderzoeken

  1. Plugins moeten gericht zijn op website bouwers (zoals Elementor), formulierplugins of elke plugin die belangrijke inhoudsblokken toevoegt aan je website.
  2. Controleer de instellingen van elke plugin: Zoek naar secties of tabbladen die te maken hebben met ontwerp, uiterlijk of styling.
  3. Identificeer lettertype besturingselementen: Kijk of ze lettertypes kunnen selecteren of aanpassen.

Thema/Plugin lettertypen overschrijven

Elementor biedt ongeëvenaarde flexibiliteit voor het beheren van typografie op je WordPress website. Dit is hoe het je de kracht geeft:

  • Controle over individuele elementen: Elke Elementor widget heeft zijn eigen typografie-instellingen, zodat je lettertypen nauwkeurig kunt definiëren op een granulair niveau.
  • Globale typografie: Met Elementor kun je standaardlettertypen instellen voor koppen, alinea’s en meer, wat je ontwerpproces helpt stroomlijnen.
  • Aangepaste lettertypen: Je kunt eenvoudig je eigen lettertypen uploaden en deze overal op je Elementor-website gebruiken.

Geavanceerde fontidentificatie en -beheer

De broncode van de website inspecteren

Soms is de snelste manier om details over lettertypen te ontdekken door in de onderliggende HTML- en CSS-code van de website te duiken. Hier lees je hoe:

  1. Klik met de rechtermuisknop ergens op de pagina en kies Paginabron weergeven (of een vergelijkbare optie).
  2. Gebruik de zoekfunctie van je browser (meestal Ctrl+F of Cmd+F) om te zoeken:
    • Lettertype-familie: Hiermee worden de opgegeven lettertypen onthuld.
    • .woff, .woff2, .ttf, .otf: Dit zijn veelgebruikte lettertype bestandsextensies.
    • Links naar CDN’s: Controleer op verwijzingen naar diensten als Google Fonts of Adobe Fonts.

Lettertypebestandsindelingen begrijpen

Je zult deze bestandsformaten waarschijnlijk tegenkomen als je in de code graaft:

  • WOFF (Web Open Font Format): Het meest gebruikte formaat vanwege de goede compressie en brede browser support.
  • WOFF2: Een nog meer geoptimaliseerde versie van WOFF, met betere compressie voor sneller laden.
  • TTF (TrueType Font): Een ouder formaat met uitstekende compatibiliteit.
  • OTF (OpenType Font): Een flexibel formaat met geavanceerde typografische functies.

Licentie-overwegingen voor lettertypen

Voordat je een lettertype gebruikt dat je ontdekt, is het cruciaal dat je de licenties respecteert:

  • Gratis lettertypen: Veel websites zoals Google Fonts bieden vrij te gebruiken lettertypen aan; controleer altijd hun gebruiksvoorwaarden.
  • Premium lettertypen: Voor sommige lettertypes moet je een licentie kopen voor commercieel gebruik. Kijk op de website van de fontgieterij voor meer informatie.
  • Inbreuk op auteursrecht: Vermijd het gebruik van lettertypen zonder de juiste toestemming, want dit kan leiden tot juridische problemen.

Elementor stroomlijnt het beheer van lettertypen:

  • Integratie met Google Fonts en Adobe Fonts: Elementor biedt naadloze toegang tot enorme bibliotheken van hoogwaardige lettertypen.
  • Eigen lettertype uploaden: Heb je een specifiek lettertype in gedachten? Upload het eenvoudig en gebruik het overal op je Elementor website.
  • Globale lettertype-instellingen: Regel de algemene typografie van je site op een efficiënte manier.

Beste praktijken voor typografie

Tips voor het combineren van lettertypen

Het doordacht combineren van lettertypes is een kunstvorm. Hier zijn een paar richtlijnen:

  • Contrast is de sleutel: Combineer lettertypes met verschillende stijlen – probeer een schreef te combineren met een schreefloze letter of een vet display lettertype met een eenvoudig lettertype.
  • Beperk je palet: Twee tot drie lettertypes zijn meestal genoeg voor een samenhangende look.
  • Visuele hiërarchie: Gebruik verschillende lettergroottes en -gewichten om een duidelijke volgorde aan te brengen in je koppen en inhoud.

Leesbaarheid en toegankelijkheid

  • Kies leesbare lettertypen: Vermijd overdreven decoratieve of gestileerde lettertypen voor bodytekst.
  • Lettergrootte: Zorg ervoor dat je tekst groot genoeg is om te lezen, vooral op kleinere schermen.
  • Regelhoogte (Leading): Voldoende ruimte tussen de regels verbetert de leesbaarheid.
  • Kleurcontrast: Zorg voor voldoende contrast tussen je tekst en achtergrondkleuren, rekening houdend met gebruikers met een visuele beperking.

Google Fonts en Adobe Fonts integreren

Elementor vereenvoudigt het toevoegen van lettertypen van populaire diensten:

  1. Google lettertypen:
    • Ga naar Elementor > Instellingen > Integraties > Google Fonts.
    • Voeg je Google Fonts API-sleutel toe.
    • Selecteer de lettertypen die je op je website wilt gebruiken.
  2. Adobe lettertypen:
    • Ga naar Elementor > Instellingen > Integraties > Adobe lettertypen.
    • Voeg je Adobe Fonts Project ID toe.
    • Selecteer de gewenste lettertypen.

De globale typografie-instellingen van Elementor gebruiken

Stroomlijn je ontwerpproces met de krachtige typografische besturingselementen van Elementor:

  • Ga naar Elementor > Site-instellingen > Typografie.
  • Standaardlettertypen, -groottes en -gewichten instellen voor koppen (H1-H6) en hoofdtekst.
  • Deze instellingen komen terug in al je Elementor pagina’s.

Inspiratie opdoen en je lettertypenkennis uitbreiden

Waar vind je inspiratie voor lettertypen?

  • Websites met lettertypen: Verken platforms zoals Google Fonts, Adobe Fonts, Font Squirrel (voor gratis lettertypes) en MyFonts (voor premium lettertypes).
  • Websites met designinspiratie: Sites als Behance, Dribble en Awwwards tonen websites met uitstekende typografie.
  • Blogs en artikelen over webdesign: Volg publicaties uit de industrie voor trendanalyses en discussies over lettertypes in de echte wereld.

Bijblijven met typografietrends

Typografie is, net als andere aspecten van webdesign, voortdurend in ontwikkeling. Zo blijf je op de hoogte:

  • Volg lettertype-makers: Veel fontfirma’s hebben blogs of nieuwsbrieven waarin nieuwe releases en ontwerptrends worden belicht.
  • Ontwerpconferenties en workshops: Woon evenementen bij die gericht zijn op webdesign en typografie voor diepgaande kennis en inzichten.

Conclusie

Inmiddels heb je de geheimen ontrafeld van het herkennen van lettertypen voor websites. Onthoud dat lettertypen een enorme kracht hebben. Ze geven vorm aan de persoonlijkheid, leesbaarheid en algehele esthetiek van je website. Een zorgvuldige lettertypeselectie heeft een grote invloed op hoe bezoekers je inhoud waarnemen en ermee omgaan.