En résumé, les polices à caractères variables sont des fichiers de polices avec des paramètres que vous pouvez modifier pour modifier subtilement ou considérablement l'apparence de la police. Ils sont prêts à faire une grande différence pour taper sur le Web - examinons-le de plus près!
Par le biais de paramètres de police variables (appelés axes) vous pouvez prendre un seul fichier de police et créer le type de variations que vous ne pouviez obtenir auparavant qu'en utilisant plusieurs fichiers de police.
Par exemple, avec une famille de polices standard, si vous souhaitez une version légère, normale et grasse, vous devrez charger trois fichiers de polices différents..
Cependant, avec une police variable qui, en tant que axe de poids vous pouvez ajuster le poids via CSS pour obtenir l’apparence claire, normale et audacieuse d’un fichier unique:
.light font-variation-settings: "wght" 66; .regular font-variation-settings: "wght" 84; .bold font-variation-settings: "wght" 154;
Avec cette approche, vous obtenez le même aspect typographique, mais avec des temps de chargement considérablement améliorés. Là où vous auriez déjà dû minimiser le nombre de variantes que vous chargiez dans une page Web, avec des polices variables qui ne sont plus un problème, vous avez un grand nombre de variantes au bout de vos doigts:
Protipo Variable sur Axis-PraxisEn ce qui concerne la variabilité de style, cela ne s'arrête pas là. Vous n'êtes pas limité aux types de variations auxquels vous seriez habitué, comme le poids normal ou l'italique.
Tout d'abord, la valeur de n'importe quel axe peut être définie n'importe où sur une plage glissante, pas seulement aux valeurs définies. Donc, si vous recherchez un poids entre normal et gras, c'est parfaitement possible. Ou si vous vouliez que vos italiques soient un peu moins maigres, ou si vous vouliez que la largeur des caractères soit légèrement supérieure à celle des caractères standard, le pouvoir est entre vos mains. Réglez précisément vos paramètres pour répondre à vos besoins..
Deuxièmement, les polices peuvent utiliser tous les axes auxquels le concepteur se soucie de penser! Examinez les paramètres disponibles pour Bitcount:
Paramètres de bitcount sur Axis-PraxisEn fonction de la police, vous trouverez des axes qui vous permettent de contrôler les ombres portées, les espaces entre les pochoirs ou les terminaux de caractères. Les options sont illimitées..
Les polices variables ont un impact important sur la manière dont nous travaillons en tant que concepteurs Web. Ils nous permettront d’obtenir une plus grande diversité et un meilleur contrôle tout en réduisant simultanément la vitesse de nos charges. Ils nous permettront également de nous diversifier dans notre créativité typographique de manière techniquement impossible auparavant..
Pour vous familiariser avec les polices de caractères variables, nous avons mis au point un cours qui vous explique les aspects les plus importants de leur fonctionnement, vous permet de configurer les outils dont vous aurez besoin, de vous aider à coder les CSS contrôle les polices de variables et montre comment créer des replis pour les navigateurs qui ne sont pas encore compatibles.