Amélioration des polices de remplacement

Katie Hempenius

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 presque 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 de Next 13, next/font utilise automatiquement des 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 utilisées par votre application Nuxt.

Outils non basés sur un framework:

• Fontaine: bibliothèque qui génère et insère automatiquement des polices de remplacement qui utilisent des forçages de métriques de police.
• Ce repo contient les forçages 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 une police utilisée lorsque la police principale n'est pas encore chargée ou qu'elle ne comporte pas 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 possibles 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 l'ascension, 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'espacement entre les lignes, également appelé "interlignage", mesure la distance entre les lignes de texte successives.

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 (et plus précisément ses tables de polices) contiennent toutes les informations dont vous avez besoin pour calculer ses forçages de métriques 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 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.
• fontdrop.info est un site Web qui vous permet d'afficher des tables de polices et d'autres informations sur les polices depuis 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 s'explique par le fait que les différents systèmes d'exploitation adoptent des approches différentes pour le rendu des polices: les programmes sur les appareils OSX 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*.

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.

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 repo fournit des informations sur les polices auxquelles cette modification s'applique et celles auxquelles elle ne s'applique pas.

Si vous utilisez une police qui nécessite d'utiliser des ensembles distincts de forçages de métriques de police pour les appareils macOS et Windows, nous vous recommandons de n'utiliser des forçages de métriques de police et size-adjust que si vous pouvez faire varier 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.

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 façon dont size-adjust est calculé (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 l'ascension, la descente et l'espacement des 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'approximée. Toutefois, dans certains cas, elle peut être calculée avec précision: par exemple, lorsque vous utilisez une police monotype ou lorsque le contenu d'une chaîne de texte est connu à l'avance.

Une approche naïve pour calculer avgCharacterWidth consiste à prendre la largeur moyenne de tous les caractères [a-z\s].

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.

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 à suivre. Si elle est correctement implémentée, 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 avec 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 des 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 expérience avec les forçages de métriques de police et size-adjust.