4 étapes pour utiliser des polices variables

Polices variables: les contours de différents poids et styles d
(Crédit d'image: Future)

Les polices variables permettent aux concepteurs de polices de définir des variations de type au sein de la police elle-même, permettant à un fichier de police d'agir comme plusieurs polices. Les polices standard sont regroupées en familles de polices qui contiennent plusieurs fichiers de polices séparés, chacun représentant un style différent, par exemple un poids léger ou un poids gras. Les polices variables contiennent toutes ces informations dans un seul fichier de police.

En utilisant Source Sans Pro comme exemple, la version variable de la police totalise environ 394 Ko et est disponible dans une grande variété de poids. Si nous devions utiliser ces poids de police individuellement en tant que fichiers de polices standard, ils pèsent en moyenne 234 Ko chacun, ce qui donne une taille de fichier combinée d'environ 1856 Ko. Bien sûr, ce calcul suppose que tous les poids de police existent individuellement en tant que police standard, ce qu'ils ne font pas. (Bien que si vous ne recherchez que des polices régulières, consultez notre article sur le meilleures polices gratuites disponible.)

Si nous supprimons les polices qui n'existent pas en tant que police standard, la taille du fichier combiné est toujours près de trois fois la taille de la police variable et avec beaucoup moins de styles. Même si vous vouliez simplement les versions audacieuses et régulières, courantes dans de nombreux projets Web, deux versions de la police standard Source Sans Pro sont toujours plus grandes qu'une seule police variable. Cela démontre qu'avec des polices variables, nous avons le potentiel de réaliser des économies massives sur la bande passante sans compromettre nos conceptions et notre créativité.



Une comparaison de la taille de fichier d

Une comparaison des tailles de fichier d'une plage de poids de police entre la version standard et variable de la police Source Sans Pro(Crédit d'image: Mandy Michael)

Les polices variables fonctionnent en interpolant les variations principales le long d'un axe, créant essentiellement de nouveaux points intermédiaires. Cela signifie que vous pouvez définir des poids de police à des points arbitraires le long de l'axe présentant un nombre beaucoup plus grand de styles et de variations. De plus, c’est parce que les polices variables peuvent être interpolées que nous sommes en mesure d’animer entre chaque variation, ce qui permet des transitions fluides, disons un poids fin à un poids gras, ce que nous n’avons jamais pu accomplir auparavant.

Ce qui rend les polices variables encore plus intéressantes, c'est que les concepteurs ne sont pas limités à un seul axe. Les polices variables peuvent contenir de nombreux axes différents représentant une gamme de styles différents. Cela peut inclure des options condensées, italiques, de taille optique ou d'autres options plus créatives ou personnalisées.

Vous souhaitez placer vos polices sur un nouveau site Web? Pour les ressources de conception Web, dirigez-vous vers notre meilleur Générateur de site Web rafle et sélection du haut hébergement Web prestations de service. Ou pour une mise à niveau du stockage, consultez ces stockage en ligne options.

01. Comprendre les axes dans les polices variables

Un graphique montrant une seule police variable se transformant le long de deux axes: le poids et la largeur. Il va du poids léger et étroit dans le coin inférieur gauche à un poids élevé et épais en haut à droite.

L'examen de l'interpolation d'une police variable sur un axe d'épaisseur et de largeur révèle la plage de personnalisation disponible(Crédit d'image: Mandy Michael)

L'utilisation de polices variables dans notre CSS est très similaire à la façon dont nous utiliserions normalement les polices sur le Web: en utilisant le @ font-face at-rule . Cependant, nous devons d'abord comprendre les différents types d'axes à l'intérieur d'une police variable car cela détermine les propriétés CSS que nous utilisons.

Il existe deux types d'axes dans une police variable: un axe enregistré et un axe personnalisé. Un axe enregistré fait référence à un axe suffisamment commun pour qu'il valait la peine d'être normalisé. Il existe actuellement cinq axes enregistrés; poids, largeur, inclinaison, italique et taille optique et ceux-ci sont souvent mappés aux propriétés CSS existantes, telles que font-weight.

Les axes personnalisés sont définis par les concepteurs de polices, peuvent être n'importe quel type de variation et ne nécessitent qu'un identifiant à quatre lettres dans le fichier de police, auquel on peut faire référence en CSS.

02. Utiliser un axe enregistré

Une plage de poids de police variables le long d

Les variations de poids sont définies sur un axe, du clair (200) au noir (900)(Crédit d'image: Mandy Michael)

Lorsqu'il s'agit d'un axe enregistré, nous voulons nous assurer que nous utilisons toutes les propriétés CSS associées, par exemple, font-weight ou font-style.

Nous pouvons configurer nos polices en utilisant le @ font-face at-rule comme nous le ferions normalement; le changement concerne la façon dont nous définissons les variations des descripteurs tels que font-weight, font-stretch et font-style. Auparavant, nous aurions défini un poids de police de 200 et défini cela comme la version légère de la police, nous avions ensuite configuré un autre bloc de police pour la version en gras et la version régulière jusqu'à ce que nous ayons tous les poids nécessaires pour la conception. Avec les polices variables, nous n'avons besoin que d'un seul bloc de police. Ainsi, au lieu d'utiliser plusieurs instances, nous spécifions une plage de valeurs qui correspondent aux valeurs minimum et maximum définies sur l'axe des polices.

@font-face { font-family: “Source Sans Variable”; src: url(“source-sans-variable.woff”) format(“woff-variations”); font-weight: 200 700; }

Dans cet exemple, nous définissons un poids de police de 200 à 700. Une fois notre plage définie, nous pouvons choisir n'importe quel nombre de cette plage comme poids de police, par exemple 658. Il est important de noter que si vous définissez votre plage de poids de police entre 200 et 700 et essayez ensuite de définir un poids de 900, même si la police a un poids de 900 défini dans son axe, vous ne pourrez pas l'utiliser. La plage définit ce à quoi vous avez accès dans votre CSS.

03. Configurer des axes personnalisés

Puisqu'aucune propriété CSS préexistante n'existera lors de l'utilisation d'un axe personnalisé, nous devons utiliser une nouvelle propriété CSS appelée font-variation-settings. Cela nous permettra de définir autant d'axes nommés et personnalisés que nécessaire.

h1 { font-family: ‘My Variable Font’; font-variation-settings: ‘wght’ 375, ‘INLI’ 88; }

Dans l'exemple ici, wght fait référence à l'axe de poids enregistré et INLI se réfère à un axe personnalisé appelé en ligne, chacun avec une valeur numérique associée correspondant à un point le long de l'axe de variation. Bien que vous puissiez référencer un axe enregistré comme valeur pour les paramètres de variation de police, il est recommandé d'utiliser à la place leurs propriétés CSS mappées.

Pour assurer la prise en charge dans les anciens navigateurs, nous pouvons utiliser des polices de secours pour les navigateurs non pris en charge en utilisant la détection des fonctionnalités CSS.

h1 { font-family: “Source Sans”, sans-serif; font-weight: 700; } @supports (font-variation-settings: normal) { h1 { font-family: “Decovar”; font-variation-settings: “INLI” 88; } }

En vérifiant la prise en charge des paramètres de variation de police, nous pouvons inclure nos styles de police variables dans le bloc CSS de prise en charge, en nous assurant qu'ils ne seront utilisés que dans les navigateurs pouvant prendre en charge les polices variables - avec nos polices standard utilisées dans les navigateurs non pris en charge.

04. Combinez JavaScript et polices variables

Une gamme de As rendus dans une variété de poids et de tailles de police, montrant les transitions fluides offertes par les polices variables.

Les polices variables permettent des transitions en douceur, par exemple, d'un poids fin à un poids gras; cela vous permet de créer des transformations fluides en utilisant des variables JavaScript(Crédit d'image: Mandy Michael)

Nous pouvons utiliser des événements JavaScript pour les situations où nous voulons un contrôle plus précis ou pour changer la police en fonction d'événements auxquels nous ne pouvons pas accéder avec CSS seul. Un exemple simple serait de faire correspondre notre poids de police à la taille de notre fenêtre - à mesure que la fenêtre devient plus petite, le poids de la police devient plus lourd.

Afin de créer l'échelle fluide, nous devons aligner deux ensembles de valeurs et d'unités - l'épaisseur de la police et la taille de la fenêtre. Nous pouvons accéder à la largeur actuelle de la fenêtre en utilisant window.innerWidth et créer une nouvelle échelle basée sur un pourcentage en la convertissant en une plage de 0 à 0,99. En incluant les tailles de fenêtre minimale et maximale, nous pouvons contrôler la plage de l'effet.

var viewportScale = (window.innerWidth - minWindowSize) / (maxWindowSize - minWindowSize);

Nous déterminons ensuite le poids de la police en fonction de la taille de notre fenêtre.

var fontWeightScale = viewportScale * (minFontWeight - maxFontWeight) + maxFontWeight;

En utilisant les propriétés personnalisées CSS, nous pouvons utiliser notre valeur JavaScript pour mettre à jour l'épaisseur de la police dans notre CSS.

p.style.setProperty(“--weight”, fontWeightScale);

Lorsque cela est combiné dans une fonction et attaché à l'écouteur d'événement de redimensionnement, nous pouvons mettre à jour l'épaisseur de la police en fonction de la nouvelle taille de la fenêtre.

Avec cette approche de base, nous sommes en mesure de modifier notre typographie en fonction de toutes sortes d'événements et d'expériences. Lorsque la fenêtre est large, nous pouvons avoir plus de détails; à l'inverse, lorsqu'il est plus petit et dans un espace plus confiné, nous pourrions envisager de réduire la largeur de la police ou d'augmenter le poids, afin de mieux contrôler notre contenu et notre typographie en termes de lisibilité, de convivialité et de conception.

Tu peux voir le code pour cela sur CodePen.

Cet article a été initialement publié dans le numéro 318 de rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Abonnez-vous au net ici .

En savoir plus sur les polices variables sur Generate CSS

Une image valorisant Bianca Berning

(Crédit d'image: Getty / Bianca Berning / Future)

Dans son discours à Generate CSS, la conférence CSS ciblée pour les concepteurs Web qui se tiendra le 26 septembre 2019 au Rich Mix, Londres, Bianca Berning explorera comment les polices variables peuvent créer de nouvelles opportunités pour le mot écrit dans les médias traditionnels ainsi que de nouvelles immersives expériences, telles que la RA, la RV et la réalité mixte.

Si vous voulez assister à ceci et à d'autres excellentes discussions, cela vaut la peine de prendre vos billets maintenant. Si vous prenez le vôtre avant 17 h 00 UTC le 15 août, vous pouvez économiser 50 £, en ne payant que 199 £ + TVA. Achetez votre billet maintenant !

Articles Liés: