Les polices variables s’appuient sur une technologie typographique hautement personnalisable. Le panneau des polices variables d’Adobe Fonts vous permet d’ajuster l’apparence de vos polices variables et de leur appliquer le style le plus adapté aux besoins de vos projets. Trois applications Creative Cloud prennent actuellement en charge les polices variables : Photoshop, InDesign et Illustrator.
Qu’entend-on par « polices variables » ?
Les polices variables permettent de stocker plusieurs styles dans un même fichier. C’est ce qui les différencie des polices statiques, qui nécessitent un fichier distinct pour chaque style disponible. Elles offrent la possibilité de spécifier une valeur particulière pour chaque axe des caractères d’une police, vous donnant ainsi un niveau de contrôle sur l’apparence de votre texte que les polices statiques sont incapables d’atteindre.
Les polices statiques traditionnelles nécessitent d’ajouter ou d’installer chacun des styles que vous souhaitez utiliser dans votre projet. Par exemple, si vous voulez utiliser Acumin Pro, vous devrez ajouter Acumin Pro Regular, Acumin Pro Italic, et ainsi de suite, en fonction des styles auxquels vous souhaitez accéder. Acumin Variable, en revanche, contient tous les styles d’Acumin, ce qui signifie que vous n’aurez qu’une seule police à ajouter.
Chaque configuration d’une police variable est appelée « instance ». Les instances sont des styles prédéfinis pour un accès rapide. Dans la capture d’écran du panneau des polices variables ci-dessus, Acumin Variable est défini sur une instance par défaut. Il s’agit d’un paramètre prédéfini utilisé par toutes les polices variables avant leur personnalisation.
Plus bas dans le panneau se trouvent les options de contrôle des axes. Les axes représentent un spectre continu de variations de style. Chaque police variable peut contenir plusieurs axes, que vous pouvez personnaliser avec la valeur de votre choix, dans les limites proposées. Dans l’exemple d’Acumin Variable, vous pouvez personnaliser les axes d’inclinaison, de graisse et de largeur.
Utilisation des polices variables sur le site web d’Adobe Fonts
Sur le site web d’Adobe Fonts, chaque page de détails sur les familles de polices variables comprend un outil de texte et un panneau interactifs qui vous permettent d’appliquer le style de votre choix à votre police. Vous pouvez choisir une instance prédéfinie pour aller plus vite ou créer la vôtre.


Ajout de polices variables dans un projet web
Pour enregistrer une police variable dans un projet web, sélectionnez Ajouter au projet web au-dessus du panneau des polices variables qui s’affiche sur la page de la famille choisie. Vérifiez que vous avez bien sélectionné la bonne police. Certaines polices variables présentent des polices supplémentaires dans leur famille.
Sélectionnez Copier le code CSS en bas du panneau afin de récupérer le code correspondant à l’instance personnalisée que vous venez de créer. Si vous n’avez pas personnalisé les paramètres, ce code reflètera le comportement de l’instance par défaut.
Vous pouvez ajouter l’URL du navigateur à vos signets après avoir personnalisé votre police variable afin de pouvoir revenir plus tard à vos derniers paramètres, ou sélectionner Copier l’URL pour partager ou enregistrer votre configuration.
Utilisation des polices variables
Leur nature personnalisable fait des polices variables les candidates idéales pour un grand nombre d’applications : illustration numérique, emballages de produits, habillage de véhicules, etc. Il est possible d’ajuster la largeur d’une police afin d’assurer sa lisibilité sur les surfaces irrégulières.
La marge de créativité offerte par les paramètres des polices variables permet de faire ressortir la personnalité d’une marque ou de structurer les titres de tiers inférieur dont la longueur gêne l’affichage.
La personnalisation des axes d’inclinaison, de graisse et de largeur permet d’ajuster la police Obviously Variable aux portières de la voiture. Acumin Variable est parfaitement indiquée pour les titres longs qui s’affichent sur le tiers inférieur de l’écran.
Vous pouvez vous servir des polices variables pour hiérarchiser les éléments visuels de panneaux d’affichage ou de posters, ou encore pour faire rentrer du texte dans des espaces étroits ou des formes originales sur des emballages.
Les polices variables se distinguent par la qualité de leur gestion des retours à la ligne dans les paragraphes justifiés. L’axe de largeur, en particulier, permet d’espacer les mots de façon plus efficace et plus harmonieuse d’un point de vue visuel.
Les polices variables présentent des capacités qui conviennent particulièrement bien au responsive design sur le web. Une même police variable peut s’adapter aux écrans de petite, moyenne et grande taille, ce qui vous permet de limiter vos tailles de fichiers et de réduire les délais de chargement.
Vous pouvez ajouter des extraits de code à votre CSS afin d’animer vos polices variables ou de les rendre réactives aux sons, à la lumière ambiante ou aux thèmes du système des utilisateurs. Les axes d’ajustement de ces polices contribuent également à faciliter leur animation.


Les fondeurs de caractères continuent d’explorer les possibilités d’interaction et d’innovation offertes par cette technologie typographique.
Ressources associées
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?