Présentation des polices variables sur le Web

Une nouvelle spécification de police qui peut réduire considérablement la taille des fichiers de police

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

Dans cet article, nous allons découvrir ce que sont les polices variables, leurs avantages et comment les utiliser dans notre travail. Tout d'abord, examinons 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 les articles Puis-je utiliser des polices variables ? et Polices de remplacement.

Introduction

Les termes "police" et "typographie" sont souvent utilisés de manière interchangeable par les développeurs. Il existe toutefois 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 typographie 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, comme "Gras italique", et une famille est l'ensemble complet de 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 d'imprimerie qui sera utilisé), etc. Mais ils peuvent utiliser autant de styles de police de caractères qu'ils le souhaitent. Par conséquent, la typographie des supports papier est souvent riche et sophistiquée, ce qui rend l'expérience de lecture vraiment agréable. Pensez à la dernière fois où vous avez apprécié feuilleter un excellent magazine.

Les concepteurs et développeurs Web sont soumis à des contraintes différentes de celles des concepteurs d'impression. L'une d'elles est importante : les coûts de bande passante associés à nos conceptions. Cela a été un point d'achoppement pour les expériences typographiques plus riches, 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 de rendu de la page. Si vous n'incluez que les styles "Regular" (Normal) et "Bold" (Gras), ainsi que leurs homologues en italique, les données de police peuvent représenter 500 Ko ou plus. Cela se produit même avant que nous ayons traité la façon dont les polices sont affichées, les modèles de remplacement que nous devons utiliser ou les effets secondaires indésirables tels que FOIT et FOUT.

De nombreuses familles de polices offrent une gamme beaucoup plus large de styles, des épaisseurs de Thin à Black, des largeurs étroites et larges, une variété de détails stylistiques et même des conceptions spécifiques à la taille (optimisées pour les 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 répondent à ces défis en empaquetant les styles dans un seul fichier.

Pour ce faire, commencez par un style central ou "par défaut", généralement "Regular" (Normal), une conception romaine verticale avec le poids et la largeur les plus typiques, qui convient le mieux au texte brut. Il est ensuite associé à d'autres styles dans une plage continue, appelée "axe". L'axe le plus courant est Épaisseur, qui peut relier le style par défaut à un style en gras. Chaque style individuel peut être situé le long d'une axe et est appelé "instance" de la police variable. Certaines instances sont nommées par le développeur de la police. Par exemple, l'emplacement de l'axe "Épaisseur" 600 est appelé "SemiBold".

La police variable Roboto Flex possède trois styles pour son axe Weight (Épaisseur). Le style standard se trouve au centre, et deux styles se trouvent aux extrémités opposées de l'axe, l'un plus clair et l'autre plus foncé. Vous avez le choix entre 900 instances :

Le développeur de polices peut proposer un ensemble d'axes différents. Vous pouvez les combiner, car ils partagent tous les mêmes styles par défaut. Roboto comporte trois styles dans une épaisseur : le style Regular se trouve au centre de l'axe, et deux styles, plus étroits et plus larges, se trouvent à chaque extrémité. Ils fournissent toutes les largeurs du style "Regular" (Normal) et se combinent avec l'axe "Weight" (Épaisseur) pour fournir toutes les largeurs pour chaque épaisseur.

Cela signifie qu'il existe des milliers de styles. Cela peut sembler excessif, mais cette diversité de styles de police peut améliorer considérablement la qualité de l'expérience de lecture. Et, s'il n'y a pas de pénalité de performances, les développeurs Web peuvent utiliser quelques styles ou autant qu'ils le souhaitent, selon leur conception.

Italique

La manière dont les polices variables sont gérées en italique est intéressante, car il existe deux approches différentes. Les polices de caractères telles que Helvetica ou Roboto ont des contours compatibles avec l'interpolation. Par conséquent, leurs styles romain et italique peuvent être interpolés, et l'axe Inclinaison peut être utilisé pour passer du romain à l'italique.

D'autres polices (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 aux contours utilisés pour définir un "n" minuscule italique. Au lieu d'interpoler un contour à l'autre, l'axe Italique bascule entre les contours romains et italiques.

Une fois le passage en italique effectué, les axes disponibles pour l'utilisateur doivent être les mêmes que ceux de l'écriture romaine, tout comme le jeu de caractères.

Une fonctionnalité de substitution de glyphes peut également être appliquée à des glyphes individuels et utilisée n'importe où dans l'espace de conception d'une police variable. Par exemple, une conception du signe dollar avec deux barres verticales fonctionne mieux avec des tailles de point plus grandes, mais avec des tailles de point plus petites, une conception avec une seule barre est préférable. Lorsque nous disposons de moins de pixels pour afficher le glyphe, une conception à deux barres peut devenir illisible. Pour y remédier, comme pour l'axe italique, une substitution de glyphes peut se produire le long de l'axe Taille optique à un point déterminé par le concepteur de police.

En résumé, lorsque les contours le permettent, les concepteurs de polices peuvent créer des polices qui interpolent entre différents styles dans un espace de conception multidimensionnel. Vous pouvez ainsi contrôler précisément votre typographie et bénéficier d'une grande puissance.

Définitions des axes

Il existe cinq axes enregistrés, qui contrôlent les caractéristiques connues et prévisibles de la police : épaisseur, largeur, taille optique, inclinaison et italique. En outre, une police peut contenir des axes personnalisés. Ceux-ci peuvent contrôler tous les aspects de la conception de la police souhaités par le concepteur de type: la taille des empattements, la longueur des traits, la hauteur des ascendres 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 variables Oswald et Hepta Slab, il n'y a qu'un seul axe disponible, "Épaisseur", mais les plages sont différentes. Oswald a la même plage qu'avant sa conversion en police variable, de 200 à 700, mais Hepta Slab a une épaisseur extrême de 1 qui va jusqu'à 900.

Les cinq axes enregistrés comportent des balises minuscules de 4 caractères qui sont utilisées pour définir leurs valeurs dans CSS:

Étant donné que le développeur de la police définit les axes disponibles dans une police variable et les valeurs qu'ils peuvent avoir, il est essentiel de savoir ce que chaque police propose. La documentation de la police doit le fournir, ou vous pouvez inspecter la police à l'aide d'un outil tel que Wakamai Fondue.

Cas d'utilisation et avantages

Définir les valeurs des axes dépend de vos goûts personnels et de l'application des bonnes pratiques typographiques. Le danger de toute nouvelle technologie est un usage abusif possible, et des paramètres trop artistiques ou exploratoires peuvent également réduire la lisibilité du texte réel. Pour les titres, il est intéressant d'explorer différents axes afin de créer de superbes conceptions artistiques, mais pour le corps du texte, cela risque de rendre le texte illisible.

Expression excitante

L'exemple ci-dessus est un excellent exemple d'expression artistique. Il s'agit d'une exploration de la typographie Decovar par Mandy Michael.

Pour consulter l'exemple fonctionnel et le code source de l'exemple ci-dessus, cliquez ici.

Animation

Vous pouvez également explorer l'animation de personnages avec des polices variables. Vous trouverez ci-dessus un exemple d'utilisation de différents axes avec la police Zycon. Consultez l'exemple d'animation en direct sur Axis Praxis.

Anicons est la première police d'icônes en couleur animée au monde, basée sur les icônes Material Design. Les anicons sont un test qui combine deux technologies de polices de pointe : les polices variables et les polices de couleur.

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 avec n'importe quelle autre couleur pour l'ajuster, ces quatre aspects peuvent être utilisés pour affiner n'importe quel autre axe.

Dans Amstelvar, l'axe XTRA vous permet d'ajuster la valeur "blanc" pour mille, comme illustré ci-dessus. En utilisant de petits bits de XTRA dans des directions opposées, la largeur des mots est équilibrée.

Polices variables en CSS

Charger des 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 source : 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 des descriptions format et tech : une fois dans la future syntaxe (format('woff2') tech('variations')), une fois dans la syntaxe obsolète mais compatible avec les navigateurs (format('woff2-variations')). Si le navigateur est compatible avec les polices variables et avec la syntaxe à venir, il utilisera la première déclaration. S'il prend en charge les polices variables et la syntaxe actuelle, il utilisera la deuxième déclaration. Ils pointent tous les deux vers le même fichier de police.

2. Intervalles de style : 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 à présent la plage d'épaisseurs compatibles avec la police. Pour Roboto Flex, l'axe "Poids" varie de 100 à 1 000, et le CSS mappe directement la plage de l'axe à la propriété de style font-weight. En spécifiant la plage dans @font-face, toute valeur en dehors de cette plage sera limitée à la valeur valide la plus proche. La plage de l'axe de largeur est mappée de la même manière que la propriété font-stretch.

Si vous utilisez l'API Google Fonts, cette opération sera effectuée. Le CSS ne contient pas seulement les formats et les plages sources appropriés, mais Google Fonts envoie également des polices de remplacement statiques au cas où les polices variables ne seraient pas prises en charge.

Utiliser des épaisseurs et des 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.

Traditionnellement, vous définissez font-weight en tant que mot clé (light, bold) ou en tant que valeur numérique comprise entre 100 et 900, par incréments de 100. Avec les 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 font-stretch avec des mots clés (condensed, ultra-expanded) ou avec des valeurs de pourcentage :

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

Utiliser les italiques et les obliques

L'axe ital est destiné aux polices qui contiennent à la fois un style normal et un style italique. L'axe doit être un bouton marche/arrêt : la valeur 0 est désactivée et affiche le style normal, la valeur 1 affiche les italiques. Contrairement aux autres axes, il n'y a pas de transition. Une valeur de 0.5 ne vous donnera pas de "demi-italique".

L'axe slnt est différent des italiques en ce sens qu'il ne s'agit pas d'un nouveau style, mais qu'il incline simplement le style normal. Par défaut, sa valeur est 0, ce qui signifie les formes de lettres verticales par défaut. Roboto Flex a une inclinaison maximale de -10 degrés, ce qui signifie que les lettres penchent vers la droite de 0 à -10.

Il serait intuitif de définir ces axes via la propriété font-style, mais en avril 2020, la méthode exacte pour ce faire est toujours en cours d'élaboration. Pour l'instant, vous devez les considérer 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

Une police de caractères peut être affichée très petite (une note de bas de page de 12 pixels) ou très grande (un titre de 80 pixels). Les polices peuvent répondre à ces changements de taille en modifiant la forme des lettres pour mieux s'adapter à leur 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é introduite pour cette axe : font-optical-sizing. Par défaut, il est défini 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électionnera automatiquement la meilleure taille optique. Si vous souhaitez désactiver cette fonctionnalité, 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 CSS suivant afficherait le texte à une grande taille, mais à une taille optique comme s'il était imprimé en 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 devez donc toujours les définir via font-variation-settings. Les tags des axes personnalisés sont toujours en majuscules, pour les distinguer des axes enregistrés.

Roboto Flex propose quelques axes personnalisés, dont le plus important est Grade (GRAD). Un axe de type Grade est intéressant, car il modifie l'épaisseur de la police sans modifier les largeurs. Les sauts de ligne ne changent donc pas. En jouant avec une échelle de qualité, vous pouvez éviter d'avoir à modifier l'axe "Poids" qui affecte la largeur globale, puis l'axe "Largeur" qui affecte le poids global.

Comme GRAD est une axe personnalisée, sa plage est comprise entre -200 et 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 avec des polices variables et en ajoute régulièrement. L'interface est actuellement conçue pour sélectionner des instances uniques de la police : vous sélectionnez la variation souhaitée, cliquez sur "Sélectionner ce style", et elle est ajoutée à l'élément <link> qui extrait le CSS et les polices de Google Fonts.

Pour utiliser tous les axes ou plages de valeurs disponibles, vous devez composer manuellement l'URL dans 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 (Liaisons Google Variable Fonts) peut également vous fournir les dernières URL des 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. 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.

Toutefois, il existe un petit problème avec font-variation-settings. Toutes les propriétés que vous ne définissez pas explicitement seront automatiquement réinitialisées aux valeurs par défaut. Les valeurs précédemment définies 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 applique d'abord font-variation-settings: 'slnt' 10 à partir de la classe .slanted. Il appliquera ensuite font-variation-settings: 'GRAD' -200 à partir de la classe .grade-light. Toutefois, cela rétablira la valeur par défaut de slnt (0). Le résultat sera du texte de niveau léger, mais pas 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 sont en cascade. Par conséquent, si un élément (ou l'un de ses parents) a défini slnt sur 10, il conserve cette valeur, même si vous définissez GRAD sur une autre valeur. Consultez la section Corriger l'héritage des polices variables pour obtenir une explication détaillée de cette technique.

Notez que l'animation de variables CSS ne fonctionne pas (par conception). Par conséquent, une approche comme celle-ci ne fonctionne pas :

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

Ces animations doivent se produire directement sur font-variation-settings.

Des performances plus élevées

Les polices variables OpenType nous permettent de stocker plusieurs variantes d'une famille de polices dans un seul fichier de polices. Monotype a effectué un test en combinant 12 polices d'entrée pour générer huit épaisseurs, sur trois largeurs, dans les styles italique et romain. Le stockage de 48 polices individuelles dans un seul fichier de polices variables a permis de réduire la taille des fichiers de 88 %.

Toutefois, si vous n'utilisez qu'une seule police, comme Roboto Regular, vous ne verrez peut-être pas de gain net de taille de police si vous passez à une police variable avec de nombreux axes. Comme toujours, cela dépend de votre cas d'utilisation.

En revanche, animer la police entre les paramètres peut entraîner des problèmes de performances. Bien que cela s'améliore une fois que la prise en charge des polices variables dans les navigateurs gagne en maturité, le problème peut être atténué en n'animant que les polices actuellement affichées à l'écran. Cet extrait pratique de Dinamo met en pause les animations dans les éléments de la classe vf-animation lorsqu'ils ne sont 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épond aux interactions de l'utilisateur, il est conseillé de limiter ou de temporiser les événements d'entrée. Cela empêche le navigateur d'afficher des instances de la police variable qui ont tellement changé par rapport à l'instance précédente que l'œil humain ne voit pas la différence.

Si vous utilisez Google Fonts, nous vous recommandons de se préconnecter à https://fonts.gstatic.com, le domaine sur lequel les polices Google sont hébergées. Cela permettra au navigateur de savoir rapidement où obtenir les polices lorsqu'il les trouve dans le CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Ce conseil fonctionne également pour d'autres CDN : plus tôt vous laissez le navigateur configurer une connexion réseau, plus tôt il peut télécharger vos polices.

Pour obtenir d'autres conseils sur les performances de chargement des polices Google Fonts, consultez The Fastest Google Fonts.

Solutions de remplacement et compatibilité avec les navigateurs

Tous les navigateurs récents acceptent les polices variables. Si vous devez prendre en charge des navigateurs plus anciens, vous pouvez créer votre site avec des polices statiques et utiliser des polices variables pour une 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 anciens navigateurs, le texte avec la classe .super-bold est affiché en gras normal, car il s'agit de la seule police en gras disponible. Lorsque les polices variables sont prises en charge, nous pouvons utiliser l'épaisseur la plus forte de 1 000.

La règle @supports n'est pas compatible avec Internet Explorer. Par conséquent, ce navigateur n'affiche aucun style. Si c'est un problème, vous pouvez toujours utiliser l'un des anciens hacks pour cibler les anciens navigateurs pertinents.

Si vous utilisez l'API Google Fonts, elle se chargera de charger les polices appropriées pour les navigateurs de vos visiteurs. Supposons que vous demandiez la police Oswald dans la plage d'épaisseur de 200 à 700, comme suit :

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

Les navigateurs modernes capables de gérer les polices variables recevront la police variable et auront accès à toutes les épaisseurs comprises entre 200 et 700. Les anciens navigateurs recevront des polices statiques individuelles pour chaque épaisseur. Dans ce cas, cela signifie qu'il téléchargera six fichiers de polices : un pour la pondération 200, un pour la pondération 300, etc.

Merci

Cet article n'aurait pas été possible sans l'aide des personnes suivantes :

• Mayafa Kurtuldu, concepteur UX et porte-parole du design chez Google
• Roel Nieskens, concepteur/développeur UX et expert en typographie chez Kabisa
• Dave Crossland, responsable de programme, Google Fonts
• David Berlow, concepteur et typographe de polices chez Font Bureau
• Laurence Penney, développeur de axis-praxis.org
• Mandy Michael, développeur de variablefonts.dev

Image héros par Bruno Martins sur Unsplash.