Fontes variables

Lire l’introduction de Jason Pamental : An Introduction to Variable Fonts ou parcourir variablefonts.io. Découvrir et jouer avec des fontes variables sur v-fonts.com, axis-praxis ou variable emojis. Expérimenter les fontes paramétriques avec Prototypo 😢.

Introduction

Les polices variables (variable fonts) sont une évolution de la spécification OpenType. Elles permettent d'utiliser CSS pour accéder à tous les styles contenus dans un seul fichier de police.

Auparavant, l'utilisation de plusieurs styles requerait le chargement de plusieurs fichiers - un pour chaque “variation” : graisse, chasse ou italique. Ces différentes variations d’un dessin de caractère se retrouvent désormais contenues dans un seul fichier, qu’il est possible de paramétrer selon différents axes.

Intégration & usage

On peut principalement intégrer des fontes variables à une feuille de style CSS via les formats de fichier ttf et woff2.

TTF :(

@font-face {
    font-family: "Mutator";
    src: url("MutatorSans.ttf") format("truetype");   
}

WOFF2 ;)

@font-face {
    font-family: 'Commissioner';
    src: url('fonts/Commissioner.woff2') format('woff2 supports variations'),
        url('fonts/Commissioner.woff2') format('woff2-variations');
    font-weight: 100 900;
}

Axes normalisés

Certains axes (stretch, la chasse, weight, la graisse ; mais aussi slant, ital et optical-size) sont accessibles via des déclarations dédiées :

@font-face {
    font-family: 'Plex Sans';
    src: url('IBMPlexSansVar-Roman.woff2') format('woff2-variations');
    font-stretch: 85% 100%; /* les valeurs de font-stretch pour Plex Sans varient entre 85% et 100% */
    font-weight: 100 700; /* les valeurs de font-weight pour Plex Sans varient entre 100 et 700 */
    font-style: normal;
}
<span style="font-weight:135; font-stretch:85%">135 × 85 – </span> 
<span style="font-weight:135; font-stretch:100%">135 – </span> 
<span style="font-weight:376">376 – </span> 
<span style="font-weight:648">648</span>

135 × 85 – 135 – 376 – 648

Axes personnalisés

D’autres axes peuvent être personnalisés par les dessinateurs de caractères. On peut personnaliser leur valeur grâce à la déclaration font-variation-settings. NB: on peut également utiliser font-variation-settings pour les axes prédéfinis, en utilisant leurs “codes” : wght, wdth, ital, slnt et opsz.

.cheeesy {
    font-family: "Cheee Variable";
    font-variation-settings: "temp" 700, "yest" 352, "grvt" 0;
}

Animation

Comme toutes les propriétés CSS exprimées numériquement, on peut animer les variations sur les axes.

p { animation: mutant 5s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate; }
@keyframes mutant {
    0% { font-variation-settings: "wdth" 0, "wght" 0 }
    25% { font-variation-settings: "wdth" 1000, "wght" 0 }
    50% { font-variation-settings: "wdth" 1000, "wght" 1000 }
    75% { font-variation-settings: "wdth" 0, "wght" 1000 }
    100% { font-variation-settings: "wdth" 0, "wght" 0 }
}
MUTANT

En décomposant un mot lettre par lettre, on peut l’animer ainsi :

.char {
    /* La variable CSS --delay utilise la variable CSS --index, définie dans le HTML */
    --delay: calc((var(--index) + 1) * 400ms); 
    animation: caution 4000ms infinite both;
    animation-delay: var(--delay);
}
@keyframes caution {
    0% { font-variation-settings: 'wght' 100, 'wdth' 85; }
    60% { font-variation-settings: 'wght' 700, 'wdth' 100; }
    100% { font-variation-settings: 'wght' 100, 'wdth' 85; }
}
<div>
    <span class="char" style="--index:0;">C</span>
    <span class="char" style="--index:1;">A</span>
    <span class="char" style="--index:2;">U</span>
    <span class="char" style="--index:3;">T</span>
    <span class="char" style="--index:4;">I</span>
    <span class="char" style="--index:5;">O</span>
    <span class="char" style="--index:6;">N</span>
</div>
C A U T I O N

Interaction

On peut également rendre la variation dépendante d’une interaction de l’utilisateur, ici la position de la souris vis à vis de la fenêtre.

const yvain = document.querySelector('#yvain');
let width = window.innerWidth;
let height = window.innerHeight;

window.addEventListener('mousemove', function(e){
    const wdth = Math.floor(e.pageX * 1000 / width);
    const wght = Math.floor(e.pageY * 1000 / height);
    // variation style
    const variation = ' "wdth" ' + wdth  + ', "wght" ' + wght ;
    yvain.style.fontVariationSettings = variation;    
})
VARIABLE

Polices utilisées sur cette page : IBM Plex de Mike Abbink, Mutator Sans d’Erik van Blokland et Yvain de Léo Gaullier.