Une nouvelle spécification de police permettant de réduire considérablement la taille des fichiers de police
Dans cet article, nous allons voir ce que sont les polices variables, leurs avantages et comment les utiliser dans notre travail. Voyons d'abord le fonctionnement de la typographie sur le Web et les innovations apportées par les polices variables.
Compatibilité du navigateur
Depuis mai 2020, les polices variables sont compatibles avec la plupart des navigateurs. Consultez Puis-je utiliser des polices variables ? et Créations de remplacement.
Introduction
Les termes police et police de caractères sont souvent utilisés de manière interchangeable par les développeurs. Cependant, il existe une différence: une police de caractères est la conception visuelle sous-jacente qui peut exister dans de nombreuses technologies de composition différentes, et une police est l'une de ces implémentations, dans un format de fichier numérique. En d'autres termes, une police de caractères est ce que vous voyez et la police est ce que vous utilisez.
Un autre concept souvent négligé est la distinction entre un style et une famille. Un style est une police de caractères unique et spécifique, par exemple Gras italique. Une famille représente l'ensemble complet des styles.
Avant les polices variables, chaque style était implémenté en tant que fichier de police distinct. Avec les polices variables, tous les styles peuvent être contenus dans un seul fichier.
Défis pour le concepteur et le développeur
Lorsqu'un concepteur crée un projet d'impression, il est confronté à certaines contraintes, telles que la taille physique de la mise en page, le nombre de couleurs qu'il peut utiliser (qui est déterminé par le type de presse à imprimer qui sera utilisé), etc. Mais il peut utiliser autant de styles de police de caractères qu'il le souhaite. Cela signifie que la typographie des supports imprimés est souvent riche et sophistiquée, de sorte que l'expérience de lecture est vraiment agréable. Rappelez-vous la dernière fois que vous avez pris plaisir à parcourir un excellent magazine.
Les concepteurs Web et les développeurs ont des contraintes différentes de celles des concepteurs d'impression. L'une d'entre elles est importante : les coûts de bande passante associés à nos conceptions. Il s'agit d'un frein à des expériences typographiques enrichies, car elles ont un coût. Avec les polices Web traditionnelles, chaque style utilisé dans nos conceptions nécessite que les utilisateurs téléchargent un fichier de police distinct, ce qui augmente la latence et le temps d'affichage des pages. Seuls les styles "Normal" et "Gras", et leurs équivalents en italique, peuvent représenter au moins 500 Ko de données de police. Avant même de traiter le rendu des polices, les modèles de remplacement à utiliser ou les effets secondaires indésirables tels que FOIT et FOUT.
De nombreuses familles de polices proposent une gamme beaucoup plus large de styles, allant des épaisseurs fines au noir, des largeurs étroites et larges, une variété de détails stylistiques et même des conceptions spécifiques à la taille (optimisées pour des tailles de texte grandes ou petites). Étant donné que vous devez charger un nouveau fichier de police pour chaque style (ou combinaison de styles), de nombreux développeurs Web choisissent de ne pas utiliser ces fonctionnalités, ce qui réduit l'expérience de lecture de leurs utilisateurs.
Anatomie d'une police variable
Les polices variables permettent de résoudre ces problèmes en regroupant les styles dans un seul fichier.
Cela fonctionne en commençant par un style central ou "par défaut", généralement "Normal", une conception romaine debout avec l'épaisseur et la largeur les plus courantes et mieux adaptées au texte brut. Celui-ci est ensuite relié à d'autres styles dans une plage continue, appelée "axe". L'axe le plus courant est Weight (Pondération), qui permet de relier le style par défaut à un style Gras. Chaque style individuel peut être situé le long d'un axe et est appelé "instance" de la police de la variable. Certaines instances sont nommées par le développeur de la police. Par exemple, l'emplacement de l'axe de pondération 600 est appelé "SemiBold".
La police variable Roboto Flex possède trois styles pour son axe Weight (Poids). Le style standard se trouve au centre, et deux styles sont situés aux extrémités opposées de l'axe, l'un plus léger et l'autre plus lourd. Parmi celles-ci, vous pouvez choisir parmi 900 instances:
Le développeur de polices peut proposer un ensemble de différents axes. Vous pouvez les combiner, car ils partagent tous les mêmes styles par défaut. Roboto comporte trois styles sur un axe de largeur: la règle régulière est au centre de l'axe, et deux styles (le plus étroit et le plus large) se trouvent à chaque extrémité. Elles fournissent toutes les largeurs du style standard et sont combinées avec l'axe "Pondération" pour fournir toutes les largeurs pour chaque pondération.
Cela signifie qu'il existe des milliers de styles ! Cela peut sembler excessif, mais la qualité de l'expérience de lecture peut être remarquablement améliorée par cette diversité de styles de police. Si les performances ne sont pas affectées, les développeurs Web peuvent utiliser quelques styles ou autant de styles qu'ils le souhaitent, en fonction de leur conception.
Italique
La façon dont l'italique est géré dans les polices variables est intéressante, car il existe deux approches différentes. Les polices de caractères comme Helvetica ou Roboto ont des contours compatibles avec l'interpolation. Leurs styles romain et italique peuvent donc être interpolés entre eux et l'axe incliné peut être utilisé pour passer du format romain à l'italique.
D'autres polices de caractères (comme Garamond, Baskerville ou Bodoni) ont des contours de glyphes romains et italiques qui ne sont pas compatibles avec l'interpolation. Par exemple, les contours qui définissent généralement un "n" minuscule romain ne correspondent pas à ceux utilisés pour définir un "n" minuscule en italique. Au lieu d'interpoler un contour à l'autre, l'axe Italique passe des contours romains aux contours en italique.
Après le passage en italique, les axes disponibles pour l'utilisateur doivent être identiques à ceux du romain, tout comme le jeu de caractères.
Une capacité de substitution de glyphes peut également être observée pour des glyphes individuels et utilisée n'importe où dans l'espace de conception d'une police variable. Par exemple, une conception en forme de dollar avec deux barres verticales fonctionne mieux pour des tailles de points plus grandes, mais pour des tailles de points plus petites, une conception avec une seule barre est préférable. Lorsque nous avons moins de pixels pour afficher le glyphe, une conception à deux barres peut devenir illisible. Pour lutter contre ce problème, à l'instar de l'axe "Italique", une substitution de glyphe d'un glyphe par un autre peut se produire le long de l'axe Optical Size (Taille optique) à un point défini par le concepteur de type.
En résumé, lorsque les contours le permettent, les concepteurs de type peuvent créer des polices d’écriture qui interpolent entre différents styles dans un espace de conception multidimensionnel. Cela vous donne un contrôle granulaire de votre typographie, et une grande puissance.
Définition des axes
Il existe cinq axes enregistrés, qui contrôlent les caractéristiques connues et prévisibles de la police: l'épaisseur, la largeur, la taille optique, l'inclinaison et l'italique. En plus de ceux-ci, une police peut contenir des axes personnalisés. Celles-ci peuvent contrôler tous les aspects de conception de la police souhaités par le concepteur de la police: la taille des empattements, la longueur des étendues, la hauteur des ascendeurs ou la taille du point sur le i.
Même si les axes peuvent contrôler la même caractéristique, ils peuvent utiliser des valeurs différentes. Par exemple, dans les polices de variables Oswald et Hepta Slab, il n'y a qu'un seul axe disponible, "Weight" (Poids), mais les plages sont différentes. Oswald a la même plage qu'avant sa mise à niveau pour être variable, de 200 à 700, mais Hepta Slab a une épaisseur de ligne extrême de 1 qui correspond à une épaisseur maximale de 900.
Les cinq axes enregistrés comportent des balises de quatre caractères en minuscules qui permettent de définir leurs valeurs en CSS:
| Noms des axes et valeurs CSS | |
|---|---|
| Pondération |
wght
|
| Largeur |
wdth
|
| Agacement |
slnt
|
| Taille optique |
opsz
|
| Italique |
ital
|
Étant donné que le développeur de police définit les axes disponibles dans une police variable, ainsi que les valeurs qu'ils peuvent avoir, il est essentiel de connaître les offres de chaque police. Vous pouvez le fournir dans la documentation de la police. Sinon, vous pouvez inspecter la police à l'aide d'un outil comme Wakamai Fondue.
Cas d'utilisation et avantages
La définition des valeurs des axes dépend de vos goûts personnels et de l'application des bonnes pratiques typographiques. Toute nouvelle technologie présente un danger en cas d'usage abusif, et les paramètres trop artistiques ou trop exploratoires peuvent également réduire la lisibilité du texte lui-même. Pour les titres, explorer différents axes pour créer de superbes conceptions artistiques est passionnant, mais pour le corps du texte, cela risque de rendre le texte illisible.
Expression passionnante
Un exemple parfait d'expression artistique est illustré ci-dessus : une exploration de la police de caractères Decovar de Mandy Michael.
Vous pouvez afficher l'exemple fonctionnel et le code source de l'exemple ci-dessus ici.
Animation
Il est également possible d'explorer des personnages animés avec des polices variables. Ci-dessus, un exemple de différents axes utilisés avec la police Zycon. Consultez l'exemple d'animation en direct sur l'axe Axis.
Anicons est la première police d'icônes en couleur animée au monde, basée sur les icônes Material Design. Anicons est une expérience qui combine deux technologies de police de pointe: les polices variables et les polices de couleurs.
Finesse
Roboto Flex et Amstelvar proposent un ensemble d'axes paramétriques. Sur ces axes, les lettres sont décomposées en quatre aspects fondamentaux de la forme: les formes noires ou positives, les formes blanches ou négatives, et les dimensions x et y. De la même manière que les couleurs primaires peuvent être mélangées à n'importe quelle autre couleur pour l'ajuster, ces quatre aspects peuvent être utilisés pour affiner n'importe quel autre axe.
L'axe XTRA d'Amstelvar vous permet d'ajuster la valeur "blanc" pour mille vues, comme indiqué ci-dessus. En utilisant de petits bits de XTRA dans des directions opposées, la largeur des mots est uniforme.
Polices variables en CSS
Chargement de fichiers de polices variables
Les polices variables sont chargées via le même mécanisme @font-face que les polices Web statiques traditionnelles, mais avec deux nouvelles améliorations:
@font-face {
font-family: 'Roboto Flex';
src: url('RobotoFlex-VF.woff2') format('woff2-variations');
src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
1. Formats sources:nous ne voulons pas que le navigateur télécharge la police s'il n'est pas compatible avec les polices variables. Nous ajoutons donc les descriptions format et tech: une fois dans la nouvelle syntaxe (format('woff2') tech('variations')), une fois dans la syntaxe obsolète, mais compatible avec les navigateurs (format('woff2-variations')). Si le navigateur accepte les polices variables et la syntaxe à venir, il utilisera la première déclaration. S'il accepte les polices de variables des variables et la syntaxe actuelle, il utilisera la deuxième déclaration. Ils pointent tous deux vers le même fichier de police.
2. Plages de styles:vous remarquerez que nous fournissons deux valeurs pour font-weight et font-stretch. Au lieu d'indiquer au navigateur l'épaisseur spécifique fournie par cette police (par exemple, font-weight: 500;), nous lui attribuons désormais la plage d'épaisseurs prises en charge par la police. Pour Roboto Flex, l'axe "Weight" (Pondération) va de 100 à 1 000, et CSS mappe directement la plage de l'axe à la propriété de style font-weight. Si vous spécifiez la plage dans @font-face, toute valeur en dehors de cette plage sera "plafonnée" à la valeur valide la plus proche. La plage de l'axe "Largeur" est mappée de la même manière à la propriété font-stretch.
Si vous utilisez l'API Google Fonts, tout sera réglé. Le CSS contient non seulement les formats et les plages sources appropriés, mais Google Fonts envoie également des polices de remplacement statiques si les polices variables ne sont pas acceptées.
Utiliser les pondérations et les largeurs
Actuellement, les axes que vous pouvez définir de manière fiable à partir de CSS sont l'axe wght via font-weight et l'axe wdth via font-stretch.
Habituellement, vous devez définir font-weight comme mot clé (light, bold) ou comme valeur numérique comprise entre 100 et 900, par étapes de 100. Avec des polices variables, vous pouvez définir n'importe quelle valeur dans la plage de largeur de la police:
.kinda-light {
font-weight: 125;
}
.super-heavy {
font-weight: 1000;
}
De même, nous pouvons définir des font-stretch à l'aide de mots clés (condensed, ultra-expanded) ou de valeurs en pourcentage:
.kinda-narrow {
font-stretch: 33.3%;
}
.super-wide {
font-stretch: 151%;
}
Utiliser des italiques et des obliques
L'axe ital est destiné aux polices qui contiennent à la fois un style standard et un style italique. L'axe est censé être un bouton Marche/Arrêt: la valeur 0 est désactivée et affiche le style standard, tandis que la valeur 1 affiche les italiques. Contrairement aux autres axes,
il n'y a pas de transition. La valeur 0.5 ne vous permet pas de mettre du texte en demi-italique.
L'axe slnt est différent de l'italique, en ce sens qu'il ne s'agit pas d'un nouveau style, il oriente simplement le style standard. Par défaut, sa valeur est 0, ce qui correspond aux formes de lettres verticales par défaut. Roboto Flex a une inclinaison maximale de -10 degrés, ce qui signifie que les lettres pendent vers la droite lorsqu'elles vont de 0 à -10.
Il serait intuitif de définir ces axes via la propriété font-style, mais depuis avril 2020, la procédure à suivre est en cours de développement. Pour l'instant, vous devez les traiter comme des axes personnalisés et les définir via font-variation-settings:
i, em, .italic {
/* Should be font-style: italic; */
font-variation-settings: 'ital' 1;
}
.slanted {
/* Should be font-style: oblique 10deg; */
font-variation-settings: 'slnt' 10;
}
Utiliser des tailles optiques
Le rendu d'une police de caractères peut être de très petite taille (une note de bas de page de 12 pixels) ou de très grande taille (un titre de 80 pixels). Les polices peuvent réagir à ces changements de taille en modifiant la forme de ses lettres pour qu'elle s'adapte mieux à sa taille. Une petite taille peut être préférable sans détails fins, tandis qu'une grande taille peut bénéficier de plus de détails et de traits plus fins.
Une nouvelle propriété CSS a été ajoutée pour cet axe: font-optical-sizing. Par défaut, elle est définie sur auto, ce qui permet au navigateur de définir la valeur de l'axe en fonction de font-size. Cela signifie que le navigateur sélectionne automatiquement la meilleure taille optique. Toutefois, si vous souhaitez désactiver cette option, vous pouvez définir font-optical-sizing sur none.
Vous pouvez également définir une valeur personnalisée pour l'axe opsz si vous souhaitez délibérément une taille optique qui ne correspond pas à la taille de la police. Le code CSS suivant permet d'afficher le texte en grande taille, mais avec une taille optique, comme s'il était imprimé au format 8pt:
.small-yet-large {
font-size: 100px;
font-variation-settings: 'opsz' 8;
}
Utiliser des axes personnalisés
Contrairement aux axes enregistrés, les axes personnalisés ne sont pas mappés à une propriété CSS existante. Vous devrez donc toujours les définir via font-variation-settings.
Les tags des axes personnalisés sont toujours en majuscules, ce qui permet de les distinguer des axes enregistrés.
Roboto Flex propose quelques axes personnalisés, le plus important est le "Grade" (GRAD). Un axe de notation est intéressant, car il modifie l'épaisseur de la police sans modifier les largeurs, ce qui évite les sauts de ligne. En jouant avec un axe de notation, vous pouvez éviter d'être forcé à manipuler des modifications de l'axe de poids qui affectent la largeur globale, puis à des modifications de l'axe de largeur qui affectent la pondération globale.
Comme GRAD est un axe personnalisé, avec une plage de -200 à 150 dans Roboto Flex.
Nous devons le résoudre avec font-variation-settings:
.grade-light {
font-variation-settings: `GRAD` -200;
}
.grade-normal {
font-variation-settings: `GRAD` 0;
}
.grade-heavy {
font-variation-settings: `GRAD` 150;
}
Polices variables sur Google Fonts
Google Fonts a élargi son catalogue en ajoutant des polices variables et en ajoutant régulièrement de nouvelles polices.
L'interface vise actuellement à choisir des instances uniques dans la police : vous sélectionnez la variante de votre choix, puis cliquez sur "Sélectionner ce style". L'interface est ensuite ajoutée à l'élément <link> qui récupère le CSS et les polices à partir de Google Fonts.
Pour utiliser tous les axes ou plages de valeurs disponibles, vous devez composer manuellement l'URL de l'API Google Fonts. La présentation des polices variables répertorie l'ensemble des axes et des valeurs.
L'outil Google Variable Fonts Links peut également vous fournir les URL les plus récentes pour les polices variables complètes.
Héritage des paramètres de variation de police
Tous les axes enregistrés seront bientôt compatibles avec les propriétés CSS existantes, mais pour le moment, vous devrez peut-être utiliser font-variation-settings en remplacement. Si votre police comporte des axes personnalisés, vous aurez également besoin de font-variation-settings.
Cependant, il y a un petit problème avec font-variation-settings. Chaque propriété que vous ne définissez pas explicitement est automatiquement réinitialisée à sa valeur par défaut.
Les valeurs définies précédemment ne sont pas héritées. Cela signifie que les éléments suivants ne fonctionneront pas comme prévu:
<span class="slanted grade-light">
I should be slanted and have a light grade
</span>
Le navigateur appliquera d'abord font-variation-settings: 'slnt' 10 à partir de la classe .slanted. Ensuite, il appliquera font-variation-settings: 'GRAD' -200 à partir de la classe .grade-light. Toutefois, la valeur par défaut de slnt sera rétablie : 0. Le résultat sera un texte dans une pente claire, mais non incliné.
Heureusement, nous pouvons contourner ce problème en utilisant des variables CSS:
/* Set the default values */
:root {
--slnt: 0;
--GRAD: 0;
}
/* Change value for these elements and their children */
.slanted {
--slnt: 10;
}
.grade-light {
--grad: -200;
}
.grade-normal {
--grad: 0;
}
.grade-heavy {
--grad: 150;
}
/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}
Les variables CSS seront appliquées en cascade. Par conséquent, si un élément (ou l'un de ses parents) a défini slnt sur 10, il conservera cette valeur, même si vous définissez GRAD sur une autre valeur. Consultez la section Corriger l'héritage de police variable pour une explication détaillée de cette technique.
Notez que l'animation des variables CSS ne fonctionne pas (par conception), donc un élément semblable à celui-ci ne fonctionne pas:
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}
Ces animations devront avoir lieu directement sur font-variation-settings.
Des performances plus élevées
Les polices variables OpenType nous permettent de stocker plusieurs variantes d'une famille de types dans un seul fichier de police. Monotype a réalisé une expérience en combinant 12 polices d'entrée pour générer huit épaisseurs de police sur trois largeurs, dans les styles italique et romain. Le stockage de 48 polices individuelles dans un seul fichier de police variable a permis de réduire de 88% la taille du fichier.
Toutefois, si vous utilisez une seule police, telle que Roboto Regular et rien d'autre, vous ne constaterez peut-être pas de gain net en taille de police si vous passez à une police variable comportant de nombreux axes. Comme toujours, cela dépend de votre cas d'utilisation.
D'un autre côté, l'animation de la police entre les paramètres peut entraîner des problèmes de performances. Bien que cela s'améliorera une fois que la prise en charge des polices variables dans les navigateurs deviendrait plus mature, le problème peut être légèrement atténué en animant uniquement les polices actuellement à l'écran. Cet extrait pratique de Dinamo met en pause les animations dans les éléments de la classe vf-animation lorsqu'elles ne s'affichent pas à l'écran:
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
// Pause/Play the animation
if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
else entry.target.style.animationPlayState = "paused"
});
});
var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });
Si votre police réagit à l'interaction de l'utilisateur, il est recommandé de réguler ou retarder les événements d'entrée. Cela empêche le navigateur d'afficher les instances de la police variable qui a si peu changé par rapport à l'instance précédente que l'œil humain ne verrait pas la différence.
Si vous utilisez Google Fonts, il est recommandé d'établir une préconnexion à https://fonts.gstatic.com, le domaine sur lequel les polices de Google sont hébergées. Ainsi, le navigateur saura dès le début où obtenir les polices lorsqu'elles seront trouvées dans le CSS:
<link rel="preconnect" href="https://fonts.gstatic.com" />
Ce conseil fonctionne également pour les autres CDN: plus tôt vous laisserez le navigateur configurer une connexion réseau, plus vite il pourra télécharger vos polices.
Pour obtenir plus de conseils sur l'amélioration des performances pour charger Google Fonts, consultez Les polices Google Fonts les plus rapides.
Créations de remplacement et compatibilité avec les navigateurs
Tous les navigateurs récents sont compatibles avec les polices variables. Si vous devez prendre en charge des navigateurs plus anciens, vous pouvez choisir de créer votre site avec des polices statiques et d'utiliser des polices variables comme amélioration progressive:
/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
@font-face {
font-family: Roboto;
src: url('Roboto-Regular.woff2');
font-weight: normal;
}
@font-face {
font-family: Roboto;
src: url('Roboto-Bold.woff2');
font-weight: bold;
}
body {
font-family: Roboto;
}
.super-bold {
font-weight: bold;
}
}
/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Roboto';
src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
url('RobotoFlex-VF.woff2') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
.super-bold {
font-weight: 1000;
}
}
Pour les navigateurs plus anciens, le texte de la classe .super-bold s'affiche en gras normal, car il s'agit de la seule police en gras disponible. Lorsque les polices variables sont prises en charge, nous pouvons en fait utiliser la plus grande épaisseur de 1 000.
La règle @supports n'est pas compatible avec Internet Explorer. Ce navigateur n'affiche donc aucun style. Si cela pose problème, vous pouvez toujours utiliser l'une des méthodes de piratage à l'ancienne pour cibler les anciens navigateurs pertinents.
Si vous utilisez l'API Google Fonts, elle se charge de charger les polices adaptées aux navigateurs des visiteurs. Supposons que vous demandiez la police Oswald dans une plage de poids comprise entre 200 et 700, comme ceci:
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
Les navigateurs récents capables de gérer des polices variables se voient attribuer la police variable. Leur épaisseur est comprise entre 200 et 700. Sur les navigateurs plus anciens, des polices statiques individuelles sont proposées pour chaque épaisseur. Dans ce cas, cela signifie qu'ils vont télécharger six fichiers de police: un pour l'épaisseur de 200, un pour l'épaisseur de 300, etc.
Merci
Cet article n'aurait été possible qu'avec l'aide des personnes suivantes:
- Mustafa Kurtuldu, concepteur UX et porte-parole de la conception chez Google
- Roel Nieskens, concepteur/développeur UX et expert en typographie chez Kabisa
- Dave Crossland, gestionnaire de programme, Google Fonts
- David Berlow, typographe et typographe chez Font Bureau
- Laurence Penney, développeur de axis-praxis.org
- Mandy Michael, développeur de variablefonts.dev
Image principale par Bruno Martins sur Unsplash.