Wat is een variabel lettertype (variable font) en hoe voeg je het toe in Elementor?

Auteur foto

Geschreven door Arjan Wendt (van trendt)

Variabel lettertype toevoegen Elementor

In dit artikel

Iedereen die wel eens een tekst heeft opgemaakt (al is het in Word) weet dat een lettertype meerdere diktes kan hebben: normaal en vetgedrukt (de B van Bold – vetgedrukt). Daarnaast heb je bij de meeste lettertypen ook de optie om het woord schuin weer te geven (de i van italic – schuingedrukt).

Tekst vet drukken

Wist je dat een lettertype naast deze varianten nog veel meer varianten kan hebben? Elke variant heeft een eigen gewicht, gekoppeld aan de dikte. Hoe zwaarder het gewicht, hoe vetter het lettertype wordt gedrukt.

Bij lettertypes onderscheiden we de volgende gewichten:

GewichtBenaming
100thin
200extralight
300light
400regular
500 medium
600semibold
700bold
800extrabold
900black

Tekst schuin maken

In principe kun je elk lettertype ook schuin drukken, maar van bepaalde lettertypes bestaat er ook daadwerkelijk een speciale variant voor schuine teksten. Ik bedoel een tekst die schuin wordt weergegeven, geen dubbelzinnige opmerking. 😉

In de afbeelding hieronder laat ik je het verschil zien tussen schuingedrukte tekst en een schuin lettertype:

Deze zinnen zijn allebei geschreven in het lettertype Lato. Bij de bovenste zin is de tekst enkel schuingedrukt. Bij de onderste zin heb ik de schuine variant van Lato gebruikt. Je ziet dat de onderste zin een minder steile hellingsgraad heeft, sommige letters hebben een sierlijke afwerking (bijvoorbeeld de d en de e) en de a wordt zelfs helemaal anders geschreven.

Statisch lettertype

Een lettertype waarbij je voor elke variant een apart lettertypebestand nodig hebt om het te kunnen gebruiken, noem je een statisch lettertype. Als je het lettertype Lato op je website wilt gebruiken, dan heb je bijvoorbeeld de volgende bestanden nodig:

  • Lato-Regular.ttf (de ‘gewone’ variant)
  • Lato-Italic.ttf (de schuingedrukte variant)
  • Lato-Bold.ttf (de vetgedrukte variant)
  • Lato-Bolditalic.ttf (de vet- en schuingedrukte variant)

Wil je weten hoe je een statisch lettertype toevoegt aan je Elementor-website? Dat leg ik je stap-voor-stap uit in dit artikel: Hoe voeg je een lettertype toe in Elementor?

Variabel lettertype

Maar nu komt het: sinds een paar jaar is het variabele lettertype in opkomst. Dit is een lettertype waarbij alle varianten zijn verwerkt in één lettertypebestand. Niet alle lettertypen waarvan meerdere varianten bestaan zijn automatisch beschikbaar als variabel lettertype, maar het zijn er wel steeds meer.

Voordelen van een variabel lettertype

Het gebruik van een variabel lettertype op je Elementor-website biedt een aantal voordelen:

  • snellere laadtijd: doordat je minder bestanden op je website hoeft te installeren, verminder je het aantal bestanden dat geladen moet worden. Dit vermindert ook meteen het aantal http-verzoeken naar de server.
  • designmogelijkheden: met een variabel lettertype kun je in Elementor je tekst elk gewicht tussen de 100 en 900 meegeven. Dus niet alleen de standaardgewichten van een statisch lettertype (zoals hierboven beschreven), maar bijvoorbeeld ook 548 of 723. Dit geeft je de vrijheid om precies de juiste dikte voor je tekst te kiezen.
  • verbeterde leesbaarheid: met een variabel lettertype verbeter je de leesbaarheid van teksten, omdat je de dikte kunt laten aansluiten op de tekstgrootte of de grootte van het scherm (responsive).

Is elk lettertype een variabel lettertype?

Nee, niet elk lettertype is een variabel lettertype. Sowieso zijn er lettertypes die überhaupt maar in één uitvoering beschikbaar zijn. Daarnaast is niet elk lettertype dat uit meerdere variaties bestaat geschikt als variabel lettertype. Tot slot vereist het speciale ontwerpsoftware en -technieken om een variabel lettertype te kunnen maken.

Als je gebruik maakt van Google Fonts, dan kun je filteren op lettertypes die beschikbaar zijn als variabel lettertype. Op dit moment is dat ongeveer 25% van alle lettertypes.

Hoe installeer je een variabel lettertype in Elementor?

Het installeren van een variabel lettertype in Elementor is heel eenvoudig. Maar let op: dit kan niet met de gratis versie, dus je hebt hier Elementor Pro voor nodig. Als je dat nog niet hebt, dan kun je het hier aanschaffen.

Zo installeer je een variabel lettertype:

  1. In het WordPress-dashboard ga je met je muis op ‘Elementor’ staan en klik je in het uitklapmenu op Aangepaste lettertypes (dit heet Custom Fonts als je de Engelse versie hebt geïnstalleerd)
  2. Klik op de knop Nieuwe toevoegen (Add New)
  3. Voer de naam van het lettertype in en klik op Variabel lettertype toevoegen (Add variable font). Je kunt een variabel lettertype alleen als .ttf-bestand uploaden
  4. Vink nu het vakje ‘Gewicht’ aan en vul de minimum- en maximumwaarde van het gewicht van het lettertype in. Je vindt deze info op de pagina waar je het lettertype downloadt. Dit is in principe gelijk aan de statische varianten van het lettertype en kan dus variëren van 100 tot 900, Vink het vakje ‘Breedte’ ook aan als het lettertype ook verschillende breedtes heeft (komt minder vaak voor). Deze waardes kunnen variëren van 75 tot 125
  5. Klik nu op de knop ‘Publiceren’ en als de pagina is herladen zul je zien dat het variabele lettertype is geïnstalleerd. Je kunt er nu mee aan de slag. Succes!
deel dit bericht.