Variable fonts : définition, fonctionnement et usages web

Variable fonts : la définition simple

Une variable font est un fichier de police unique qui peut afficher une infinité de styles entre deux extrêmes. Au lieu d'avoir un fichier pour le Light, un pour le Regular et un pour le Bold, vous n'en avez qu'un. Ce fichier sait passer en douceur d'un style à l'autre, comme un variateur de lumière remplace un simple interrupteur.

Le principe vient de la norme OpenType 1.8, présentée en 2016 par Adobe, Apple, Google et Microsoft. C'est donc la font technology du web actuel, et non un gadget d'un seul éditeur. Tous les navigateurs modernes la prennent en charge : Chrome, Firefox, Safari et Edge.

Police statique ou police variable : quelle différence ?

Une police classique, dite statique, fige chaque style dans un fichier. La famille and ses déclinaisons forment alors une pile de fichiers à charger. Une police variable, elle, stocke un dessin de base et des écarts. Le navigateur fait le calcul à l'affichage.

• Police statique : un fichier par graisse et par style, choix limité aux versions prévues par le dessinateur.
• Police variable : un seul fichier, et toutes les valeurs possibles entre le minimum et le maximum.
• Dans les deux cas, le texte reste du vrai texte, lisible par Google et sélectionnable par l'utilisateur.

À quoi servent les variable fonts sur un site d'entreprise ?

Pour un dirigeant, l'intérêt n'est pas esthétique d'abord. Il est pratique. Moins de fichiers à charger, c'est une page qui s'affiche plus vite, surtout sur mobile. Et une page rapide garde mieux ses visiteurs.

Alléger le chargement des pages

Un site utilise souvent quatre à six fichiers de police : texte courant, gras, italique, titres. Une police variable peut tous les remplacer. Le gain dépend de la fonte et du nombre de styles que vous utilisiez avant. Si vous n'utilisez qu'une ou deux graisses, le fichier variable peut même peser plus lourd : il faut donc vérifier au cas par cas. Pour le réglage du chargement lui-même, notre article sur la police web et font-display détaille la marche à suivre.

Affiner la hiérarchie et la lisibilité

Avec une police variable, le titre peut être en graisse 680 et le sous-titre en 540, au lieu d'être coincé entre 400 et 700. Ces nuances servent la hiérarchie visuelle de vos pages. Le lecteur repère plus vite ce qui compte : l'offre, le prix, le bouton d'appel.

Garder une identité cohérente

Une seule typeface déclinée à l'infini donne une image homogène, du site au logiciel métier. C'est un atout dans un design system : les équipes piochent dans la même famille, sans multiplier les fichiers ni les écarts de style.

Comment fonctionne une police variable : les axes de variation

Tout repose sur la notion d'axe. Un variation axis est une plage de valeurs que le dessinateur a prévue, avec un minimum, un maximum et une valeur par défaut. Le navigateur peut choisir n'importe quel point sur cette plage. Une police peut avoir un seul axe ou en combiner plusieurs.

Les cinq axes standard

La norme définit cinq axes enregistrés, notés par une étiquette de quatre lettres en minuscules. Ce sont les plus courants, mais aucune police n'est obligée de tous les proposer.

• wght (weight) : la graisse, du très fin au très gras, souvent de 100 à 900.
• wdth (width) : la largeur, de condensé à étendu.
• ital : le passage du romain à l'italique.
• slnt : l'inclinaison, en degrés, sans changer le dessin des lettres.
• opsz : l'optical sizing, qui adapte le dessin à la taille d'affichage.

L'optical sizing mérite un mot. Un texte en 12 pixels a besoin de lettres un peu plus ouvertes et plus espacées. Un titre en 72 pixels supporte des détails plus fins. La police ajuste seule ce dessin selon la taille, ce qui améliore la lecture sans effort de votre part.

Les axes personnalisés

Le dessinateur peut aussi créer des axes custom, notés en majuscules. Roboto Flex, par exemple, propose un axe GRAD qui épaissit les lettres sans changer leur largeur. Ces axes ouvrent des effets originaux, mais ils restent propres à chaque police. Il faut lire la documentation de la fonte avant de compter dessus.

Les instances nommées

Une police variable embarque souvent des instances nommées : Regular, Medium, Bold et ainsi de suite. Ce sont des points de repère posés par le créateur sur les axes. Elles permettent aux logiciels de bureau, comme Illustrator ou After Effects, d'afficher une liste familière, while le web peut aller plus loin et viser toute valeur intermédiaire.

Utiliser les variable fonts en CSS et sur WordPress

Côté code, la mise en place est courte. On déclare le fichier avec @font-face en indiquant une plage, par exemple font-weight: 100 900. Ensuite, on utilise les propriétés CSS habituelles : font-weight, font-stretch, font-style et font-optical-sizing.

font-weight ou font-variation-settings ?

La propriété font-variation-settings donne un accès direct aux axes, y compris aux axes personnalisés. On écrit par exemple font-variation-settings: 'wght' 650, 'GRAD' 50. Elle est pratique, mais elle a un défaut : elle écrase toutes les valeurs à chaque déclaration. Pour les axes standard, préférez les propriétés classiques et réservez variation-settings aux axes que rien d'autre ne pilote.

Where trouver des polices variables ?

Google Fonts propose de nombreuses polices variables en accès libre, comme Inter, Recursive ou Roboto Flex, avec un filtre dédié. Adobe Fonts en propose aussi pour ses abonnés. Pensez à vérifier la licence avant tout usage commercial et à servir le fichier au format WOFF2 depuis votre propre serveur quand c'est possible.

Et WordPress ?

Oui, WordPress sait gérer les polices variables. Les thèmes en blocs déclarent la police dans le fichier theme.json avec une plage de graisses, et la bibliothèque de polices intégrée accepte ce type de fichier. Sur un thème classique, il suffit d'ajouter la déclaration @font-face dans la feuille de style. Le support dépend surtout du thème : certains n'exposent que des graisses fixes dans l'éditeur.

Les erreurs courantes avec les variable fonts

Une police variable n'est pas magique. Mal intégrée, elle peut dégrader l'affichage au lieu de l'améliorer. Voici les erreurs que nous voyons le plus souvent en audit.

• Charger la police variable and les fichiers statiques en même temps : on paie deux fois le poids.
• Garder un fichier variable complet alors que le site n'utilise qu'une graisse : un fichier statique serait plus léger.
• Oublier la plage dans @font-face : le navigateur simule alors le gras, avec un rendu flou.
• Abuser de font-variation-settings pour la graisse, ce qui casse l'héritage du gras dans le texte.
• Animer les axes au survol sur tout le site : c'est joli en démo, fatigant au quotidien.
• Ne pas précharger la police principale, ce qui peut provoquer un saut de mise en page.

Ce dernier point touche directement le CLS, l'un des Core Web Vitals suivis par Google. Si le texte change de taille au chargement de la police, la page bouge sous les yeux du visiteur. Notre guide pour corriger le CLS montre comment régler ce décalage.

Faut-il passer aux variable fonts pour votre site ?

Dans la plupart des cas, oui, si votre site utilise au moins trois styles d'une même famille. Le gain en requêtes et la souplesse du design valent le petit effort d'intégration. Si votre site n'emploie qu'une graisse, l'intérêt est faible et la police statique reste un bon choix.

Le bon moment pour franchir le pas, c'est une refonte ou une création de site internet. On choisit alors la police dès la maquette, on fixe les valeurs d'axes dans la charte, et on règle en même temps l'interlignage et l'espacement, comme expliqué dans notre article sur le line-height et le letter-spacing.

Questions fréquentes