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 changement 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 du 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 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. 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 (à l'aide de font-display: swap). Par conséquent, le contenu de la page est lisible et utile plus tôt. Toutefois, historiquement, cela a été au détriment de l'instabilité de la mise en page: des décalages 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 le même espace que celles de leur 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 utilise uniquement l'API de remplacement des métriques de police. L'approche plus compliquée (mais plus efficace) utilise à la fois l'API de remplacement des métriques de police et size-adjust. Cet article explique ces deux approches.

Fonctionnement des remplacements de métriques de police

Introduction

Les forçages de métrique de police permettent de remplacer l'ascension, la descente et l'interligne d'une police:

  • La montée mesure la distance la plus éloignée à partir de laquelle les glyphes d'une police s'étendent au-dessus de la ligne de base.
  • La descente mesure la distance la plus éloignée située en dessous de la ligne de base par les glyphes d'une police.
  • L'écart de ligne, également appelé "début", mesure la distance entre les lignes de texte successives.

Schéma illustrant la montée, la descente et l'écart entre les lignes d'une police.

Les forçages de métrique de police peuvent être utilisés pour remplacer l'incrément, la descente et l'interligne d'une police de remplacement afin qu'ils correspondent à l'ascension, à la descente et à l'interligne 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 comme ceci:

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 figurant 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.

Calculer des remplacements de métriques de police

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

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

Par exemple, voici les forçages de métrique 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.

Lecture des 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 ses remplacements de métriques de police.

Capture d'écran de la boîte de dialogue "Font Information" (Informations sur la police) dans FontForge. La boîte de dialogue affiche des métriques de police telles que "Typo Ascent", "Typo Descent" et "Typo Line Gap".
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 les remplacements de métriques de police.
  • Capsize est une bibliothèque de mise en page et de dimensionnement de police. Capsize fournit une API pour obtenir des informations sur différentes 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 populaire pour les ordinateurs de bureau. 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 tableaux de polices

Vous remarquerez peut-être que des concepts tels que "ascent" sont désignés par plusieurs métriques (hheaAscent, typoAscent et winAscent, par exemple). 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 des 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*.

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

Mac Windows
Chromium 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.
Firefox Utilise les métriques du tableau "typo" si "USE_TYPO_METRICS" a été défini. Sinon, utilise les métriques de la table "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.
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 police sur 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 remplacements 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. 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 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 la taille

Introduction

Le descripteur CSS size-adjust adapte de manière proportionnelle la largeur et la hauteur des glyphes de police. Par exemple, size-adjust: 200% redimensionne les glyphes de police pour deux fois leur taille d'origine, tandis que size-adjust: 50% réduit les glyphes de police à la moitié de leur taille d'origine.

Diagramme illustrant les résultats des règles "size-adjust: 50%" et "size-adjust: 200%"

En soi, size-adjust a 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 réduite ou élargie (plutôt que proportionnellement mise à l'échelle) pour s'adapter à une police Web. Toutefois, en combinant size-adjust avec des remplacements de métriques de police, il est possible 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 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%;
}

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

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

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. Cependant, avgCharacterWidth doit être approximatif.

Largeur de caractères moyenne approximative

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, en pondérant tous les caractères de la même manière, vous risquez de sous-pondérer la largeur des lettres fréquemment utilisées (par exemple, e) et de surcharger celles des lettres peu utilisées (par exemple, z).

Une approche plus complexe améliorant la précision consiste à prendre en compte la fréquence des lettres et à calculer plutôt 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 sur la fréquence des lettres et la longueur moyenne des mots dans les textes anglais.

Graphique illustrant la fréquence des lettres pour l'anglais
Fréquence des lettres en anglais

Choisir une approche

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

  • L'utilisation de remplacements de métriques de police en elles-mêmes est une bonne approche à utiliser 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 efficace pour réduire sensiblement 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 tests, l'intégration de size-adjust est une bonne approche. Lorsqu'elle est implémentée correctement, cette approche peut éliminer efficacement les décalages de mise en page liés à la police.

Choisir des polices de remplacement

Les techniques décrites dans cet article reposent sur l'utilisation de remplacements de métriques de police et d'size-adjust pour transformer les polices locales largement disponibles, plutôt que 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 Serif. 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 é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.