Amélioration des polices de remplacement

Katie Hempenius

Twitter

Résumé

Cet article présente en détail les polices de remplacement et les API size-adjust, ascent-override, descent-override et line-gap-override. Ces API permettent d'utiliser des polices locales pour créer des polices de remplacement qui correspondent exactement ou étroitement aux dimensions d'une police Web. Cela réduit ou élimine les décalages de mise en page causés par le changement de police.

Si vous préférez ignorer cet article, voici quelques outils que vous pouvez utiliser pour commencer à utiliser ces API immédiatement:

Outils de cadre:

• @next/font: à partir de Next 13, next/font utilise automatiquement les remplacements de métriques de police et size-adjust pour fournir des polices de remplacement correspondantes.
• @nuxtjs/fontaine: à partir de Nuxt 3, vous pouvez utiliser nuxt/fontaine pour générer et insérer automatiquement des polices de remplacement correspondantes dans les feuilles de style utilisées par votre application Nuxt.

Outils hors framework:

• Fontaine: Fontaine est une bibliothèque qui génère et insère automatiquement des polices de remplacement qui utilisent des remplacements de métriques de police.
• Ce dépôt contient les remplacements de métriques de police pour toutes les polices hébergées par Google Fonts. Vous pouvez copier et coller ces valeurs dans vos feuilles de style.

Contexte

Une police de remplacement est un type de police utilisé lorsque le cadran principal n'est pas encore chargé ou lorsqu'il manque les glyphes nécessaires pour afficher le contenu de la page. Par exemple, le code CSS ci-dessous indique que la famille de polices sans-serif doit être utilisée comme police de remplacement pour "Roboto".

font-family: "Roboto" , sans-serif;

Les polices de remplacement peuvent être utilisées pour afficher le texte plus rapidement (en utilisant font-display: swap). Le contenu de la page est ainsi plus lisible et utile plus tôt, mais cela a toujours eu un impact sur l'instabilité de la mise en page: les décalages de mise en page se produisent généralement lorsqu'une police de remplacement est remplacée par la police Web. Cependant, les nouvelles API décrites ci-dessous peuvent réduire ou éliminer ce problème en permettant de créer des polices de remplacement qui occupent le même espace que leurs polices Web homologues.

Amélioration des remplacements de police

Deux approches sont possibles pour générer des polices de remplacement "améliorées". L'approche la plus simple n'utilise que l'API de remplacement des métriques de police. L'approche plus compliquée (mais plus puissante) utilise à la fois la métrique de police remplace l'API et size-adjust. Cet article explique ces deux approches.

Fonctionnement des remplacements de métriques de police

Introduction

Les forçages de métriques de police permettent de remplacer l'ascension, la descente et l'écart entre les lignes d'une police:

• Ascension : mesure la distance la plus éloignée entre les glyphes d'une police et la ligne de base.
• La descente mesure la distance la plus éloignée entre les glyphes d'une police et la ligne de base.
• L'interligne, également appelé "interligne", mesure la distance entre des lignes de texte successives.

Vous pouvez utiliser des forçages de métriques de police pour remplacer l'ascension, la descente et l'interligne d'une police de remplacement afin qu'ils correspondent à l'ascension, à la descente et à l'écart entre les lignes de la police Web. Par conséquent, la police Web et la police de remplacement ajustée auront toujours les mêmes dimensions verticales.

Les remplacements de métriques de police sont utilisés dans une feuille de style de la manière suivante:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

Les outils répertoriés au début de cet article peuvent générer les valeurs de remplacement des métriques de police appropriées. Cependant, vous pouvez également calculer ces valeurs vous-même.

Calcul des remplacements de métriques de police

Les équations suivantes génèrent les remplacements de métriques de police pour une police Web donnée. Les valeurs de remplacement des métriques de police doivent être écrites en pourcentage (par exemple, 105%) et non en décimales.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

Remarque:L'unité par em (UPM) fait référence à la taille de la grille utilisée lors de la conception de la police. Bien qu'il existe d'autres tailles de grille, 1000 (une grille de 1 000 x 1 000) ou 2048 (une grille de 2 048 x 2 048) sont de loin les plus populaires. Il est important de connaître UPM pour mettre en perspective d'autres métriques. Par exemple, une ascension de 900 signifie des choses très différentes selon que l'UPM d'une police est 1000 ou 2048.

Par exemple, voici les remplacements de métriques de police pour la police Poppins:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

Les valeurs de ascent, descent, line-gap et unitsPerEm proviennent toutes des métadonnées de la police Web. La section suivante de cet article explique comment obtenir ces valeurs.

Lire les tableaux de polices

Les métadonnées d'une police (en particulier ses tableaux de polices) contiennent toutes les informations dont vous avez besoin pour calculer les remplacements de métriques de police.

Utiliser FontForge pour afficher les métadonnées de police

Voici quelques outils que vous pouvez utiliser pour lire les métadonnées d'une police:

• fontkit est un moteur de polices conçu pour Node.js. Cet extrait de code montre comment utiliser fontkit pour calculer des remplacements de métriques de police.
• Capsize est une bibliothèque de mise en page et de dimensionnement de police. Capsize fournit une API permettant d'obtenir des informations sur différentes métriques de police.
• fontdrop.info est un site Web qui vous permet d'afficher des tableaux de polices et d'autres informations sur les polices dans le navigateur.
• Font Forge est un éditeur de polices pour ordinateur couramment utilisé. Pour afficher ascent, descent et line-gap: ouvrez la boîte de dialogue Font Info, sélectionnez le menu OS/2, puis l'onglet Metrics. Pour afficher UPM, ouvrez la boîte de dialogue Font Info, puis sélectionnez le menu General.

Remarque:Certaines bibliothèques JavaScript liées aux polices se rapprochent de l'ascension, de la descente et de l'écart entre les lignes en dessinant des glyphes sur le canevas et en mesurant le résultat. Cependant, cette approche est moins précise que de lire les métriques sur les polices directement à partir du tableau des polices.

Comprendre les tableaux de polices

Vous remarquerez peut-être que plusieurs métriques font référence à des concepts tels que "ascent" (par exemple, il existe des métriques hheaAscent, typoAscent et winAscent). Cela est dû aux différentes approches adoptées par différents systèmes d'exploitation pour le rendu des polices: sur les appareils OSX, les programmes utilisent généralement des métriques de police hhea*, tandis que les programmes sur les appareils Windows utilisent généralement des métriques de police typo* (également appelées sTypo*) ou win*.

Remarque:Plus précisément, les programmes sur les appareils Windows suivent généralement la convention d'utilisation des métriques typo* si une police est définie sur USE_TYPO_METRICS, et d'utiliser les métriques win* dans le cas contraire. USE_TYPO_METRICS est un paramètre booléen qui a été introduit pour permettre aux graphistes de définir une préférence entre les métriques typo* et win*.

En fonction de la police, du navigateur et du système d'exploitation, une police sera affichée à l'aide des métriques hhea, typo ou win.

	Mac	Windows
Chromium	Utilise les métriques du tableau "hhea".	Utilise les métriques du tableau "typo" si "USE_TYPO_METRICS" a été défini. Sinon, utilise les métriques du tableau "win".
Firefox	Utilise les métriques du tableau "typo" si "USE_TYPO_METRICS" a été défini. Sinon, utilise les métriques du tableau "hhea".	Utilise les métriques du tableau "typo" si "USE_TYPO_METRICS" a été défini. Sinon, utilise les métriques du tableau "win".
Safari	Utilise les métriques du tableau "hhea".	Utilise les métriques du tableau "typo" si "USE_TYPO_METRICS" a été défini. Sinon, utilise les métriques du tableau "win".

Pour en savoir plus sur le fonctionnement des métriques de police sur les différents systèmes d'exploitation, consultez cet article sur les métriques verticales.

Compatibilité multi-appareil

Dans la grande majorité des polices (par exemple, environ 90% des polices hébergées par Google Fonts), les remplacements des métriques de police peuvent être utilisés en toute sécurité sans connaître le système d'exploitation de l'utilisateur. En d'autres termes, pour ces polices, les valeurs de ascent-override, descent-override et linegap-override restent exactement les mêmes, que les métriques hhea, typo ou win s'appliquent. Ce dépôt fournit des informations sur les polices concernées et celles auxquelles il ne s'applique pas.

Si vous utilisez une police nécessitant l'utilisation d'ensembles distincts de remplacement de métriques de police pour les appareils OSX et Windows, nous vous recommandons d'utiliser des remplacements de métriques de police et size-adjust si vous pouvez modifier vos feuilles de style en fonction du système d'exploitation de l'utilisateur.

Remarque:Cette section explique comment déterminer si une police utilise les mêmes forçages de métriques de police sur les appareils OSX et Windows. Commencez par déterminer si la police a activé USE_TYPO_METRICS.

• Si USE_TYPO_METRICS est activé, la police est affichée à l'aide des métriques hhea sur les appareils OSX et typo sur les appareils Windows.
• Pour calculer une hauteur de ligne normale sous OSX, utilisez l'équation suivante: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Pour calculer une hauteur de ligne normale sous Windows, utilisez l'équation suivante: (typoAscent + typoDescent + typoLineGap)/unitsPerEm.
• Si la hauteur des lignes est identique sous OSX et Windows, vous pouvez utiliser les mêmes remplacements de métriques de police pour les deux systèmes d'exploitation.
• Si USE_TYPO_METRICS n'est pas activé, la police s'affiche avec les métriques hhea sur les appareils OSX et win sur les appareils Windows.
• Pour calculer une hauteur de ligne normale sous OSX, utilisez l'équation suivante: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Pour calculer une hauteur de ligne normale sous Windows, utilisez l'équation suivante: (winAscent + winDescent)/unitsPerEm. (Remarque: winLineGap n'existe pas.)
• Si les deux conditions suivantes sont remplies, vous pouvez utiliser les mêmes forçages de métriques de police sous OSX et Windows: a) hheaLineGap == 0, b) hauteur de ligne sous OSX et Windows.

Utiliser des remplacements de métriques de police

Étant donné que les remplacements de métriques de police sont calculés à l'aide de mesures provenant des métadonnées de la police Web (et non de la police de remplacement), ils restent identiques, quelle que soit la police utilisée. Exemple :

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

Fonctionnement de l'ajustement de taille

Introduction

Le descripteur CSS size-adjust redimensionne proportionnellement la largeur et la hauteur des glyphes de police. Par exemple, size-adjust: 200% redimensionne les glyphes de police au double de leur taille d'origine. size-adjust: 50% redimensionne les glyphes de police à la moitié de leur taille d'origine.

size-adjust ne dispose que d'un nombre limité d'applications pour améliorer les polices de remplacement: dans la plupart des cas, une police de remplacement doit être légèrement réduite ou élargie (au lieu d'être mise à l'échelle proportionnellement) pour correspondre à une police Web. Toutefois, la combinaison de size-adjust avec des forçages de métriques de police permet de faire correspondre deux polices à la fois horizontalement et verticalement.

Voici comment size-adjust est utilisé dans les feuilles de style:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

En raison du mode de calcul de size-adjust (expliqué dans la section suivante), la valeur de size-adjust (et les remplacements de métriques de police correspondants) change en fonction de la police de remplacement utilisée:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Remarque : Les remplacements de métriques de police et size-adjust sont déclarés à l'aide de pourcentages, mais ces pourcentages sont définis différemment (par exemple, size-adjust: 10% adapte une police à 1/10e de sa taille d'origine, tandis que ascent-override: 10% ne réduit pas nécessairement la taille d'une police, mais modifie les proportions de la police, c'est-à-dire que la taille de l'ascension est égale à 10% de l'UPM).

Calculer les remplacements de métriques d'ajustement de taille et de police

Voici les équations permettant de calculer les remplacements de métriques de police et de size-adjust:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

La plupart de ces entrées (montée, descente et interligne) peuvent être lues directement à partir des métadonnées de la police Web. Toutefois, avgCharacterWidth doit être estimé.

Largeur approximative du nombre de caractères

En général, la largeur moyenne de caractères ne peut être qu'approximative. Toutefois, dans certains cas, elle peut être calculée exactement, par exemple lors de l'utilisation d'une police à chasse fixe ou lorsque le contenu d'une chaîne de texte est connu à l'avance.

Remarque : Les polices peuvent être à largeur fixe ou à largeur fixe. Dans les polices à chasse fixe, tous les caractères occupent la même quantité d'espace horizontal. Dans les polices à largeur fixe, les caractères ont des largeurs différentes. Les polices monolithiques sont couramment utilisées dans les IDE, mais sur le Web, elles sont généralement moins courantes que les polices à largeur fixe.

Remarque:Par souci de simplicité, cet article fait référence à la "largeur" d'un glyphe. Bien que cette terminologie ne soit pas fausse en soi, "avancer", avancer la largeur ou "avancer horizontale" sont la terminologie généralement utilisée dans le champ de typographie.

Un exemple d'approche naïve pour calculer avgCharacterWidth consiste à utiliser la largeur moyenne de tous les caractères [a-z\s].

Largeur des glyphes Roboto

Toutefois, une pondération égale de tous les caractères risque de sous-pondérer la largeur des lettres fréquemment utilisées (par exemple, e) et de surpondérer la largeur des lettres rarement utilisées (par exemple, z).

Une approche plus complexe qui améliore la précision consiste à prendre en compte la fréquence des lettres et à calculer à la place la largeur moyenne pondérée en fonction de la fréquence de [a-z\s] caractères. Cet article constitue une bonne référence pour déterminer la fréquence des lettres et la longueur moyenne des mots dans les textes en anglais.

Fréquence des lettres en anglais

Remarque:Cet article explique comment calculer la valeur avgCharacterWidth pour les polices de remplacement qui seront utilisées avec du texte en anglais. Toutefois, ces mêmes concepts peuvent également être appliqués à d'autres langues et à d'autres jeux de caractères. Nous aimerions beaucoup connaître votre avis sur l'utilisation de cette technique avec des contenus qui ne sont pas en anglais.

Remarque:Pour obtenir une approximation de avgCharacterWidth, vous pouvez également utiliser xAvgCharWidth. xAvgCharWidth est une valeur préremplie qui existe dans la table OS/2 d'une police. Sachez toutefois que cette métrique n'est pas toujours correcte. Par exemple, de nombreux outils de sous-configuration de police ne mettent pas à jour xAvgCharWidth lorsque des glyphes sont ajoutés ou supprimés d'une police. De plus, même si xAvgCharWidth est calculé correctement, la méthodologie de calcul de la métrique xAvgcharWidth a évolué au fil des ans: la valeur de xAvgCharWidth varie en fonction de la version de la table OS/2 utilisée par la police.

Choisir une approche

Les deux approches décrites dans cet article présentent chacune des avantages et des inconvénients:

• L'utilisation de remplacements de métriques de police en eux-mêmes est une bonne approche si vous commencez à optimiser vos remplacements de police. Bien qu'il s'agisse de la plus simple des deux approches, elle est généralement assez puissante pour réduire considérablement l'ampleur des décalages de mise en page liés à la police.

• En revanche, si vous souhaitez plus de précision et que vous êtes prêt à effectuer un peu plus de travail et de test, il est recommandé d'incorporer size-adjust. Lorsqu'elle est implémentée correctement, cette approche peut éliminer efficacement les décalages de mise en page liés aux polices.

Remarque:Vous vous demandez peut-être pourquoi vous ne pouvez pas simplement définir un line-height fixe au lieu d'utiliser des remplacements de métriques de police ou size-adjust. Bien que line-height puisse parfois être utilisé pour réduire ou éliminer les décalages de mise en page liés à la police, cette pratique n'est pas recommandée. Les remplacements de métriques de police et size-adjust permettent de résoudre le problème à l'origine des incohérences entre la police Web et la police de remplacement. line-height ne le permet pas (line-height définit la hauteur de la zone de ligne CSS). De plus, vous constaterez probablement que l'utilisation de line-height à cette fin est plus compliquée que prévu. Cet article offre quelques informations importantes sur les éléments à prendre en compte lorsque vous utilisez line-height.

Choisir des polices de remplacement

Les techniques décrites dans cet article reposent sur l'utilisation de remplacements de métriques de police et sur size-adjust pour transformer les polices locales largement disponibles, au lieu d'essayer de trouver une police locale qui se rapproche le plus de la police Web. Lorsque vous choisissez des polices locales, il est important de garder à l'esprit que très peu de polices sont largement disponibles en local et qu'aucune police unique n'existe sur tous les appareils.

Arial est la police de remplacement recommandée pour les polices Sans-Serif et Times New Roman est la police de remplacement recommandée pour les polices à empattement. Cependant, aucune de ces polices n'est disponible sur Android (Roboto est la seule police système sur Android).

L'exemple ci-dessous utilise trois polices de remplacement pour assurer une couverture large sur les appareils: une police de remplacement qui cible les appareils Windows/Mac, une police de remplacement qui cible les appareils Android et une autre qui utilise une famille de polices générique.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Remarque:D'autres polices locales peuvent être utilisées comme polices de remplacement, mais pour cela, il est nécessaire de connaître le système d'exploitation de l'utilisateur. Par exemple, "Calibri", "Lucinda Sans" et "Impact" sont des polices largement disponibles sous Windows, mais pas sur d'autres systèmes d'exploitation.

Demande de commentaires

N'hésitez pas à nous contacter si vous avez des commentaires sur l'utilisation des remplacements de métriques de police et de size-adjust.