La tipografia nel web design ha sempre giocato un ruolo cruciale nella comunicazione visiva. Tuttavia, fino a pochi anni fa, i designer erano costretti a utilizzare diverse varianti statiche di un font (regular, bold, italic, ecc.). Con l'introduzione dei CSS variable font, la tipografia diventa più flessibile e reattiva, consentendo transizioni fluide tra spessori, larghezze e inclinazioni senza dover caricare più file di font.

Il punto di partenza è la creazione di una font-face la cui proprietà src punta ad un file appositamente creato per supportare questa casistica.

@font-face {
  font-family: "Amstelvar VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2")
    format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 35% 100%;
  font-style: normal;
  /* possibilità di supportare l'inclinazione tramite */
  /* font-style: oblique 0deg 10deg; */
  font-display: swap;
}

Con questa definizione, il font supporta variazioni di peso da 300 a 900 e larghezza da 35% a 100%. Questa modalità di utilizzo porta a tre principali vantaggi

• Miglioramento performance: tutte le versioni dello stesso carattere sono contenute in un unico file
• Design adattabile: tramite le normali media-query possiamo modificare qualsiasi aspetto tipografico
• Gestione della visibilità: modifica della forma del testo sulla base del dipositivo da cui viene letto

Dopo aver definito una font-face, possiamo sfruttare le proprietà CSS per modificarne l'aspetto, così come siamo sempre stati abituati:

h1 {
  font-family: 'Amstelvar VF', sans-serif;
  font-weight: 700;
  font-stretch: 100%;
}

La peculiarità di questa tecnologia è il riadattamento fluido ai cambi di stile. Se eseguissimo il codice seguente, noteremmo che il feedback visivo è ben diverso rispetto ad impostare il font-weight: bold di un normale font, in quanto la modifica non sarà repentina, ma si svilupperà all'interno di un breve lasso di tempo.

:root {
  --font-weight: 400;
}

h1 {
  font-weight: var(--font-weight);
  transition: font-weight 0.3s ease-in-out;
}

h1:hover {
  --font-weight: 700;
}