Polices variables avec axe de chasse
Familles variables dont la largeur des lettres se règle en plus de la graisse, d’un léger resserrement pour ajuster le texte à une gamme complète du condensé à l’élargi.
Narrow to wide
Une police variable stocke un dessin sous forme de plage plutôt que d’une série de styles fixes. La plupart des familles variables offrent un axe de graisse ; un plus petit nombre ajoutent un axe de chasse, enregistré sous la balise wdth, qui rend les lettres plus étroites ou plus larges en conservant leur hauteur et leur caractère. Ses valeurs sont des pourcentages de la largeur normale : 75 correspond à une coupe condensée, 100 à la coupe normale et 125 à une coupe élargie.
La chasse est souvent le plus pratique des deux axes pour la mise en page. Elle permet d’ajuster un titre exactement à sa colonne, de resserrer un libellé de navigation sur un petit écran et de le relâcher sur un grand, ou de faire passer un tableau à un réglage plus étroit seulement quand ses colonnes manquent de place. En CSS, la propriété est font-stretch, ou font-variation-settings pour un contrôle plus fin, et elle peut changer aux points de rupture ou s’animer.
Comparez les plages avant de choisir. Plusieurs familles de cette liste ne font que se resserrer, de 100 à 75 environ, ce qui suffit pour ajuster un texte ; deux ne font que s’élargir ; d’autres vont de la moitié de la largeur normale au double et équivalent en pratique à plusieurs caractères en un. Les notes ci-dessous indiquent chaque plage telle qu’elle est enregistrée. Un axe de chasse bien dessiné modifie les formes des lettres elles-mêmes, contrairement à un écrasement artificiel du texte.
-
Roboto
Un axe de chasse de 75 à 100 resserre le dessin vers une coupe condensée, avec une graisse de 100 à 900 et des italiques.
-
Open Sans
La chasse se resserre de 100 à 75 pour ajuster le texte, dans une linéale humane de six graisses avec italiques.
-
Archivo
Chasse de 62 à 125, d’extra-condensé à élargi, avec une graisse de Thin à Black et des italiques.
-
Saira
Chasse de 50 à 125 et graisse de 100 à 900 dans une linéale carrée, plus des italiques.
-
IBM Plex Sans
Un axe de chasse qui resserre les lettres jusqu’à 75, avec sept graisses et des italiques.
-
Inconsolata
Une police à chasse fixe dont l’axe de chasse va de 50 à 200, de la moitié de la largeur normale au double, avec une graisse de 200 à 900.
-
Noto Serif
Une police de texte à empattements dont l’axe de chasse se resserre de 100 à 62,5, avec neuf graisses et des italiques.
-
Merriweather
Une police de texte à empattements à plage de chasse modeste, de 87 à 112, avec des axes de graisse et de taille optique.
-
Asap
Graisse de 100 à 900 et chasse de 75 à 125, avec italiques.
Les exemples chargent un sous-ensemble latin de base de chaque famille. Toutes les familles présentées ici sont sous licence libre ; leur page en indique les conditions et propose les fichiers originaux.
Questions sur polices variables avec axe de chasse
Comment régler la chasse d’une police en CSS ?
Utilisez font-stretch avec un pourcentage, par exemple font-stretch: 85%, ou font-variation-settings: "wdth" 85. La valeur doit se situer dans la plage prise en charge par la police ; hors de cette plage, elle est ramenée à l’extrémité la plus proche.
Un axe de chasse revient-il à étirer le texte horizontalement ?
Non. Étirer déforme l’épaisseur des traits et les courbes. Un axe de chasse utilise des formes dessinées pour chaque largeur, de sorte que les traits verticaux et horizontaux restent proportionnés.
Les polices variables fonctionnent-elles dans tous les navigateurs et applications ?
Les navigateurs actuels et les principales applications de création les prennent en charge. Les logiciels plus anciens n’affichent parfois que le style par défaut ; gardez donc des fichiers statiques en solution de repli quand cela compte.
Puis-je utiliser ces polices variables à titre commercial ?
Oui. Toutes sauf une sont sous SIL Open Font License, qui autorise l’usage commercial, l’intégration et l’auto-hébergement ; Ubuntu Sans utilise l’Ubuntu Font License, qui autorise aussi l’usage commercial. La page de chaque police indique sa licence.