Variable fonts
V
Definition complete
Les variable fonts (polices variables) sont un format de fonte unique contenant plusieurs variations de style (graisse, largeur, inclinaison) accessibles via des axes de variation continus. Introduites en 2016, elles revolutionnent la typographie web.
Contrairement aux polices traditionnelles necessitant un fichier par style (Regular, Bold, Italic...), une police variable contient toutes les variations dans un seul fichier. L'axe wght (weight) permet par exemple de passer de 100 (Thin) a 900 (Black) avec toutes les valeurs intermediaires.
Les axes standards incluent : wght (graisse), wdth (largeur), ital (italique), slnt (inclinaison), et opsz (taille optique). Des axes personnalises peuvent ajouter des effets uniques comme des serifs ajustables ou des decorations.
En CSS, on controle les axes avec font-variation-settings ou les proprietes dediees comme font-weight: 450;. Les animations CSS permettent des transitions fluides entre les variations.
Exemples pratiques
- Optimisation performance : Un seul fichier Inter Variable (90 Ko) remplace 18 fichiers de styles differents (900 Ko total), reduisant les requetes HTTP et le poids.
- Design responsive :
font-weight: clamp(400, 5vw, 700);- La graisse s'adapte fluidement a la largeur d'ecran. - Animation typographique : Transition douce de Regular a Bold au hover d'un bouton avec
transition: font-weight 0.3s ease;
A quoi sert Variable fonts ?
Les variable fonts optimisent les performances en reduisant le nombre de fichiers, permettent une typographie responsive, autorisent des animations fluides, et offrent une precision de design impossible avec les polices statiques.
Variable fonts en pratique chez 123web
Chez 123web, nous integrons les polices variables pour des sites plus rapides et une typographie plus riche. Google Fonts propose desormais de nombreuses variable fonts que nous configurons optimalement pour vos projets.