Pour ceux qui ne savent pas ce qu'est une police variable, il s'agit d'une police qui englobe toute la famille de polices, et non pas un seul style ou une seule instance. Ainsi, au lieu d'avoir des graisses spécifiques (par exemple : légère 300, normale 400, grasse 600), la police possède ces graisses ainsi que toutes les graisses comprises dans cette plage.
Ainsi, n'importe quel nombre compris entre 300 et 600 peut être utilisé. Cela ouvre une nouvelle dimension pour peaufiner les détails d'un design.
Avec l'émergence récente du format de police variable, les designers peuvent travailler avec une famille de polices complète. Avec trois des quatre principaux navigateurs prenant déjà en charge les polices variables, et les autres le feront bientôt, ainsi que la plupart des logiciels de conception, l'avenir de cette nouvelle technologie de polices est prometteur.
Pourquoi utiliser une police variable au lieu d'une police standard avec plusieurs poids ?
Un seul fichier et une taille de fichier réduite
Une police variable est une police unique qui fonctionne comme plusieurs polices : toutes les variations de largeur, de graisse, d'inclinaison et autres attributs peuvent être contenues dans un seul fichier de police compressé très performant. Avec moins de requêtes HTTP pour les fichiers de polices, les polices variables permettent de réduire la quantité de données à télécharger.
Gamme de conception flexible
Le scénario typique consiste à limiter une conception donnée à deux ou trois polices différentes pour représenter chaque aspect du langage et du style du site, y compris chaque permutation pour le corps du texte et les titres. Dans sa mise en œuvre la plus simple, les polices variables permettent d'ajuster les graisses et les styles pour chaque niveau de texte. Certaines polices variables possèdent également une taille optique variable qui affecte certains contrastes, marquant généralement la différence entre une police d'affichage et une police de texte.
Alors, comment implémenter et utiliser des polices variables ?
Pour utiliser la police dans vos logiciels de conception comme Photoshop et Illustrator, il vous suffit de l'installer comme n'importe quelle autre police sur votre ordinateur. Les logiciels Adobe proposent désormais une nouvelle option lorsque vous sélectionnez une police variable dans le menu déroulant. Un ou plusieurs curseurs apparaîtront selon le nombre d'axes de votre police variable. Vous pouvez les utiliser et observer l'effet sur la police sélectionnée. Lors de la rédaction de cet article, nous avons également ajouté la version variable de l'une de nos polices, Agrandir. La police variable complète est disponible gratuitement pour un usage personnel pendant une durée limitée !
Comment utiliser une police variable sur un site Web ?
Si vous êtes plutôt du genre manuel et aimez coder vous-même, voici un petit tutoriel sur le code CSS à utiliser pour accéder aux variables de ces types de polices. Je n'entrerai pas trop dans les détails. Pour une présentation plus détaillée de la mise en œuvre et de toutes les possibilités CSS, rendez-vous sur cette page.
En gros, vous n'avez besoin que d'une seule ligne de code pour appliquer la valeur souhaitée à n'importe quel axe ou variable personnalisée, à condition que vous ayez correctement intégré et chargé la police variable.
paramètres de variation de police : « wght » 430, « wdth » 200 ;
Dans ce cas précis, nous présentons la possibilité de Agrandir, qui possède deux axes (épaisseur et largeur). Ainsi, nous définirions l'épaisseur à 430, ce qui la rendrait légèrement plus épaisse que la normale (400) et la largeur à 200 (de 50 à 200), ce qui correspond au style le plus large de Agrandir : surdimensionné.
La typo Agrandir
Nous avons récemment lancé Agrandir , une police sans couture ultra-polyvalente proposant 42 styles, du plus fin au plus noir, en passant par le plus étroit et le plus surdimensionné. Il était alors évident pour Alex , le créateur de la police, d'en créer une version variable. Il a travaillé sans relâche pour la créer et nous sommes heureux de la lancer officiellement aujourd'hui, parallèlement à cet article. Elle sera disponible gratuitement pour un usage personnel pendant une durée limitée. Sinon, elle sera offerte en bonus à l'achat de la famille complète. N'oubliez pas qu'elle est encore en version bêta.
Si vous êtes trop impatient de l'essayer, j'ai créé un petit exemple de police variable ci-dessous pour que vous puissiez jouer avec.
Conclusion — L’avenir des polices variables ?
Les polices variables ont un bel avenir devant elles. Je pense que la technologie connaîtra une phase d'adolescence où chacun essaiera des variables personnalisées originales et plus artistiques à des fins d'animation et d'expérimentation, avant de devenir finalement quelque chose de complet et d'efficace.
L'idée derrière cette technologie est excellente. J'espère simplement que les gens ne se lanceront pas dans la création de polices « couteau suisse » capables de tout faire correctement, mais sans plus, et qu'elles deviendront presque des polices où tout est variable et où l'on peut créer n'importe quel type de police. Les polices risquent de manquer de personnalité, laissant la tâche de créer une typographie efficace au designer plutôt qu'au typographe.
Ressources sur les polices variables
La rédaction de cet article m'a fait lire de nombreux articles sur les polices variables. J'ai trouvé cet excellent outil pour tester vos polices variables : Axis Praxis .
Un autre excellent site pour tester et voir quelles polices variables sont disponibles est v-fonts.com
