Utilisation des polices variables d’Adobe Fonts

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.

 

Explorer les polices variables d’Adobe Fonts

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. 

Interface utilisateur graphique, application. Description générée automatiquement
Acumin Pro est une police statique comprenant plus de 18 styles qui doivent être ajoutés individuellement pour pouvoir être utilisés. Acumin Variable, de son côté, propose des axes d’inclinaison, de graisse et de largeur que vous pouvez personnaliser comme vous le souhaitez après avoir ajouté une seule fois cette police.

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.  

Interface utilisateur graphique, application. Description générée automatiquement

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.

Interface utilisateur graphique, application. Description générée automatiquement

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.

Interface utilisateur graphique, application. Description générée automatiquement

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.  

Personne souriant devant une caméra

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. 

Panneau d’affichage sur fond de gratte-ciels
Acumin Variable permet de hiérarchiser des éléments visuels

Photo de lotions et de produits de toilette avec du texte
Les axes de graisse et de taille optique de Minion Variable permettent de hiérarchiser des éléments visuels

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.  

Description (texte)
L’axe de largeur de Kepler Variable permet de réduire les espaces trop visibles dans les paragraphes justifiés. Les rectangles rouges soulignent la quantité d’espace retirée dans chaque phrase.

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. 

Image contenant du texte, une barre de chargement et des écrans
Les polices variables sont regroupées dans un seul et même fichier de police, ce qui rend leur chargement sur le web plus rapide

Diagramme, texte. Description générée automatiquement
Les polices variables peuvent être intégrées dans les sites web afin d’assurer l’adaptabilité du texte aux changements de taille des écrans

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. 

Image représentant une forme
Les polices variables changent d’apparence en fonction des valeurs de leurs axes, ce qui permet 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 ?