Le problème des polices traditionnelles
Pendant des décennies, chaque graisse, chaque largeur, chaque style d'une police était un fichier séparé. Une famille typographique complète — Regular, Bold, Italic, Bold Italic, Light, Black — représentait six fichiers à télécharger. Sur mobile, cette accumulation de requêtes impactait directement les performances.
La variable font résout ce problème élégamment : un seul fichier contient l'intégralité des variations, encodées comme des axes continus. On ne choisit plus entre 400 et 700, on peut déclarer n'importe quelle valeur entre les deux.
↑ Démo interactive — hover pour voir la variation de poids
Les axes d'une variable font
Les quatre axes enregistrés officiellement sont : le poids (wght), la largeur (wdth), l'inclinaison (slnt) et la taille optique (opsz). Mais certaines polices en définissent des personnalisés : épaisseur de trait, hauteur d'ascendantes, forme des terminaisons.
.titre {
font-variation-settings: 'wght' 900, 'wdth' 100;
transition: font-variation-settings 0.4s ease;
}
.titre:hover {
font-variation-settings: 'wght' 200, 'wdth' 125;
}
Animation et expressivité
La vraie révolution est l'animation. Avant les variable fonts, animer une typographie signifiait des keyframes image par image ou des hacks SVG. Aujourd'hui, font-variation-settings peut être interpolé comme n'importe quelle propriété CSS. Un titre peut respirer, se contracter, répondre au scroll.
Des sites comme Framer, Linear ou Vercel exploitent déjà cette capacité pour des héros typographiques mémorables. C'est devenu un marqueur de qualité dans les portfolios créatifs.
Performance et accessibilité
Un fichier variable font est plus léger que l'ensemble des fichiers statiques équivalents. Le gain est réel sur les connexions lentes. Côté accessibilité, la taille optique (opsz) permet d'ajuster automatiquement les détails typographiques selon la taille d'affichage — plus de lisibilité aux petites tailles, plus de raffinement aux grandes.
En 2025, ne pas utiliser de variable fonts pour un projet qui se veut moderne est un choix difficile à justifier. Le support navigateur est universel, l'écosystème de polices variables est riche, et les bénéfices — performance, expressivité, accessibilité — sont cumulatifs.