Amélioration des polices de remplacement

Katie Hempenius
Katie Hempenius
X

Résumé

Cet article présente en détail les polices de remplacement ainsi que 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 correspondant exactement ou exactement aux dimensions d'une police Web. Cela réduit ou élimine les décalages de mise en page causés par le remplacement de police.

Si vous préférez ne pas lire cet article, voici quelques-uns des outils que vous pouvez utiliser pour commencer à utiliser ces API immédiatement:

Outils de framework :

  • @next/font: à partir des 13 prochains mois, next/font utilisera 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 correspondant aux polices utilisées dans les feuilles de style de votre application Nuxt.

Outils non basés sur un 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 forçages de métriques de police pour toutes les polices hébergées par Google Fonts. Ces valeurs peuvent être copiées et collées dans vos feuilles de style.

Contexte

Une police de remplacement est un type de police utilisé lorsque la police principale n'est pas encore chargée 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 (c'est-à-dire en utilisant font-display: swap). Par conséquent, le contenu de la page est lisible et utile plus tôt. Toutefois, historiquement, cela s'est fait au détriment de l'instabilité de la mise en page : des changements de mise en page se produisent généralement lorsqu'une police de remplacement est remplacée par la police Web. Toutefois, 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 la même quantité d'espace que leur équivalent de police Web.

Amélioration des polices de remplacement

Il existe deux approches pour générer des polices de remplacement "améliorées". L'approche la plus simple n'utilise que l'API de forçage des métriques de police. L'approche plus complexe (mais plus puissante) utilise à la fois l'API de forçage des métriques de police et size-adjust. Cet article explique ces deux approches.

Fonctionnement des forçages de métriques de police

Introduction

Les forçages de métriques de police permettent de forcer la montée, la descente et l'espacement des lignes d'une police :

  • L'ascendance mesure la distance maximale à laquelle les glyphes d'une police s'étendent au-dessus de la ligne de base.
  • La descente mesure la distance maximale à laquelle les glyphes d'une police s'étendent sous la ligne de base.
  • L'écart de ligne, également appelé "début", mesure la distance entre des lignes de texte successives.

Schéma illustrant l'ascendance, la descente et l'espacement des lignes d'une police.

Les forçages de métriques de police permettent de remplacer l'ascendance, la descente et l'espacement des lignes d'une police de remplacement pour qu'ils correspondent à ceux 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 forçages de métriques de police sont utilisés dans une feuille de style comme suit :

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 listés au début de cet article peuvent générer les valeurs de forçage de métrique de police appropriées. Vous pouvez toutefois également calculer vous-même ces valeurs.

Calculer les forçages de métriques de police

Les équations suivantes génèrent les forçages de métriques de police pour une police Web donnée. Les valeurs des forçages de métriques de police doivent être écrites sous forme de pourcentages (par exemple, 105%) plutôt que sous forme décimale.

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

Par exemple, voici les forçages 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 des tables 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 ses remplacements de métriques de police.

Capture d'écran de la boîte de dialogue "Informations sur la police" dans FontForge. La boîte de dialogue affiche des métriques de police telles que "Typo Ascent" (Hauteur de la police), "Typo Descent" (Baisse de la police) et "Typo Line Gap" (Espacement entre les lignes de la police).
Afficher les métadonnées de police à l'aide de FontForge

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 les forçages 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 diverses métriques de police.
  • Le site Web fontdrop.info vous permet d'afficher les tableaux des polices et d'autres informations liées aux polices dans le navigateur.
  • Font Forge est un éditeur de polices de bureau populaire. 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.

Comprendre les tables de polices

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

Selon la police, le navigateur et le système d'exploitation, une police est affichée à l'aide des métriques hhea, typo ou win.

Mac Windows
Chrome Utilise les métriques du tableau "hhea". Utilise les métriques de la table "typo" si "USE_TYPO_METRICS" a été défini, sinon utilise les métriques de la table "win".
Firefox Utilise les métriques de la table "typo" si la valeur "USE_TYPO_METRICS" a été définie, sinon utilise les métriques de la table "hhea". Utilise les métriques de la table "typo" si "USE_TYPO_METRICS" a été défini, sinon utilise les métriques de la table "win".
Safari Utilise les métriques du tableau "hhea". Utilise les métriques de la table de fautes de frappe si la valeur "USE_TYPO_METRICS" a été définie. Sinon, les métriques de la table "victoires" sont utilisées.

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

Compatibilité multi-appareil

Pour la grande majorité des polices (par exemple, environ 90% des polices hébergées par Google Fonts), les forçages de 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 ou non. Ce dépôt fournit des informations sur les polices auxquelles cela s'applique ou non.

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

Utiliser des forçages de métriques de police

Étant donné que les forçages 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 les mêmes quelle que soit la police utilisée comme police de remplacement. 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 la taille

Introduction

Le descripteur CSS size-adjust étale proportionnellement la largeur et la hauteur des glyphes de police. Par exemple, size-adjust: 200% double la taille des glyphes de la police, tandis que size-adjust: 50% réduit de moitié la taille des glyphes de la police.

Schéma illustrant les résultats de l'utilisation de "size-adjust: 50%" et "size-adjust: 200%".

size-adjust n'a que des applications limitées pour améliorer les polices de remplacement. Dans la plupart des cas, une police de remplacement doit être légèrement affinée ou élargie (plutôt que mise à l'échelle proportionnellement) pour correspondre à une police Web. Toutefois, en combinant size-adjust avec des forçages de métriques de police, vous pouvez 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 de la méthode de calcul de size-adjust (qui est expliquée dans la section suivante), la valeur de size-adjust (et les forçages de métrique 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%;
}

Calcul des forçages de taille et de métriques de police

Voici les équations permettant de calculer les forçages de métriques de police et 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 (c'est-à-dire la montée, la descente et l'écart entre les lignes) peuvent être lues directement à partir des métadonnées de la police Web. Toutefois, avgCharacterWidth doit être approché.

Approximation de la largeur moyenne des caractères

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

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

Graphique comparant la largeur de glyphes de Roboto [a-zs] individuels.
Largeur des glyphes Roboto

Toutefois, si vous attribuez une pondération égale à tous les caractères, la largeur des lettres fréquemment utilisées (par exemple, e) sera probablement sous-pondérée, tandis que celle des lettres rarement utilisées (par exemple, z) sera surpondérée.

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

Graphique montrant la fréquence des lettres en anglais.
Fréquence des lettres en anglais

Choisir une approche

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

  • Utiliser des remplacements de métriques de police uniquement est une bonne approche à adopter si vous commencez à optimiser vos polices de remplacement. Bien qu'il s'agisse de la plus simple des deux approches, elle est généralement assez puissante pour réduire sensiblement l'ampleur des décalages de mise en page liés aux polices.

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

Choisir des polices de remplacement

Les techniques décrites dans cet article reposent sur l'utilisation de forçages de métriques de police et de size-adjust pour transformer des polices locales largement disponibles, plutôt que de tenter de trouver une police locale qui se rapproche le plus de la police Web. Lorsque vous choisissez des polices locales, gardez à l'esprit que très peu de polices sont disponibles en local sur la plupart des appareils et qu'aucune police n'est disponible 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 Serif. Toutefois, 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 étendue sur les appareils: une police de remplacement qui cible les appareils Windows/Mac, une police de remplacement qui cible les appareils Android et une police de remplacement 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%;
}

Demande de commentaires

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