Experiment variable fonts - ambersr/i-love-web GitHub Wiki

Onderzoek variable fonts

Wij maken binnen ons project gebruik van het font: Clash Display. Op de website heb ik het font geüpload.

1. Wat zijn de eigenschappen van onze fonts?

Clash Display

  • Characters: 380
  • Glyphs: 480
  • Layout features: 11
  • Size: 68kb
  • Languages: 37
  • Format: TrueType
  • Filename: ClashDisplay-Variable.ttf
  • Version: Version 1.001

Archivo

  • Characters: 653
  • Glyphs: 822
  • Layout features: 21
  • Size: 717kb
  • Languages: 39
  • Format: TrueType
  • Filename: Copyright 2020 The Archivo Project Authors (https://github.com/Omnibus-Type/Archivo)
  • Version: Version 2.001

2. Analyseer de variable axes van het variable font?

Ik ga met het font 'Archivo' experimenteren.

Gewichten van een variable font (wght)

Wat is wght?

wght staat voor weight (gewicht) en bepaalt hoe dun of dik de letters van een font zijn.

Hoe werkt het?

  • Lage waarden → dunne letters (bijvoorbeeld 100).
  • Hoge waarden → dikke letters (bijvoorbeeld 900).
  • Tussenliggende waarden → gradaties daartussen, zodat je vloeiende overgangen kunt maken.

Waarom gebruiken?

Bij een variable font kun je met wght de dikte dynamisch aanpassen bijvoorbeeld op hover, zonder aparte font bestanden nodig te hebben.

3. Maak een experiment in CodePen

In dit experiment heb ik het variable font Archivo gebruikt. Bij hoveren over het element verandert de gewicht axis (wght) van het font, waardoor de letters visueel dikker worden als je er met de muis overheen gaat.

Informatieve bronnen:

Uitleg in stappen:

  1. Startwaarde instellen: In font-variation-settings geef je het begin gewicht (wght) van het font aan.
  2. Transition toevoegen: transition: 700ms ease; zorgt dat de verandering van gewicht soepel verloopt bij hover.
  3. Voeg een hover styling toe: In h1:hover wijzig je het gewicht naar een hogere waarde. Hierdoor lijkt de tekst dikker wanneer je erover hovered.

Zie voorbeeld hieronder:

h1 {
  letter-spacing: -3px;
  transition: 700ms ease;
  font-variation-settings: "wght" 311;
  margin-bottom: 0.8rem;
  font-size: 5em;
  font-family: 'Archivo', serif;
  color: deeppink;
  text-align: center;
}

h1:hover {
  font-variation-settings: "wght" 682; 
  letter-spacing: 1px;
}

Bekijk hieronder het resultaat:

Link naar de CodePen