Pour faire correspondre la taille apparente d’une police de repli à celle d’une police web, normalisez leurs hauteurs d’x avec CSS font-size-adjust, ou mettez à l’échelle une police de repli spécifique avec size-adjust. Ce guide explique comment choisir, calculer et tester l’ajustement dans un navigateur de bureau sur Mac.

Choisir la métrique adaptée à votre texte

Pour du texte courant en anglais, commencez par la hauteur d’x : la hauteur des lettres minuscules par rapport à la taille de la police. Deux polices définies à 16px peuvent avoir des hauteurs d’x différentes : des tailles CSS identiques ne paraissent donc pas forcément identiques. MDN décrit font-size-adjust précisément comme un moyen de normaliser une métrique de police choisie parmi les polices utilisées pour afficher le texte. MDN : font-size-adjust

Choisissez la métrique avant de modifier les valeurs. Les paragraphes comportant beaucoup de minuscules orientent généralement vers ex-height ; les libellés en majuscules peuvent nécessiter cap-height. L’option ch-width normalise la chasse du caractère zéro, ce qui répond à une question différente de celle de la correspondance de la hauteur des minuscules. Aucune de ces options ne garantit des largeurs identiques pour tous les mots. MDN : valeurs de font-size-adjust

Pour cette tâche, utilisez une page de test synthétique comprenant un titre tel que Collection d’exemples, un libellé tel que Tuile 024 et un paragraphe tel que Des tuiles ambrées côtoient un cercle bleu. Chaque tuile porte un court libellé. Le but est de donner aux minuscules de la police de repli une taille visuelle similaire, tout en vérifiant que ces éléments tiennent toujours dans leur espace.

Votre tâche immédiate Commencez par Éléments à vérifier séparément
Normaliser la taille des minuscules dans une pile de polices font-size-adjust avec un rapport de hauteur d’x cible Retours à la ligne et interligne
Régler une police de repli précise et connue Un alias de repli avec size-adjust Disponibilité de cette police locale précise
Réduire les différences de disposition verticale Surcharges des métriques de police après l’ajustement de taille Lignes de base et hauteur des paragraphes

Les deux premiers mécanismes ont des portées différentes : font-size-adjust s’applique au texte, tandis que size-adjust se trouve dans une règle @font-face et met à l’échelle les contours et les métriques de cette police. MDN : font-size-adjust, MDN : size-adjust

Établir une comparaison fiable sur votre Mac

Utilisez une page d’aperçu dont vous pouvez modifier la feuille de style. Les exemples ci-dessous appellent la police web existante Sample Web ; remplacez ce nom par le nom de famille CSS réellement utilisé. Ce sont des fragments d’intégration qui supposent que la police web est déjà déclarée et que les éléments d’exemple existent.

Dans Chrome sur votre Mac, faites un clic droit sur le paragraphe d’exemple et choisissez Inspecter. Vous pouvez aussi appuyer sur Commande + Option + C, puis le sélectionner. Chrome ouvre le panneau Éléments, où Styles affiche le CSS appliqué. Chrome : ouvrir les outils de développement Chrome

Ouvrez Calculé, faites défiler jusqu’à Polices affichées et confirmez quelle police dessine réellement l’exemple. Une liste de familles déclarée ne suffit pas à établir que la police privilégiée est bien celle qui s’affiche. La documentation de Chrome montre comment utiliser cette section pour distinguer les ressources de polices locales et réseau. Chrome : appliquer d’autres effets

Pendant la comparaison, gardez fixes la fenêtre d’affichage, le zoom, la graisse, le style, l’espacement des lettres et la largeur du conteneur. Examinez d’abord l’état avec la police web. Modifiez ensuite temporairement la propriété font-family du paragraphe pour utiliser la police de repli souhaitée, par exemple Arial, sans-serif, puis vérifiez de nouveau la police affichée.

Utilisez Styles pour modifier les déclarations et leurs cases à cocher pour activer ou désactiver les ajustements. Vous pouvez ainsi comparer le même paragraphe sans en changer le texte ni la mise en page. Chrome : référence des fonctionnalités CSS

Pour effectuer des mesures en JavaScript, attendez le chargement de la police concernée au lieu d’utiliser un délai arbitraire. document.fonts.load() peut demander une police précise ; document.fonts.ready se résout une fois terminés le chargement des polices du document et les opérations de mise en page associées. Aucun de ces mécanismes ne remplace la vérification de la police réellement affichée. MDN : FontFaceSet.load(), MDN : FontFaceSet.ready

Calculer et appliquer le rapport de hauteur d’x cible

La valeur numérique cible de font-size-adjust est un rapport, et non un pourcentage d’agrandissement. Lorsque ces métriques sont disponibles pour la police exacte, divisez la hauteur d’x de la police web par ses unités par em. Le navigateur ajuste alors chaque police sélectionnée pour qu’elle atteigne cette proportion cible de la taille déclarée. W3C : module CSS Fonts niveau 5

Considérez ces valeurs explicitement données à titre d’illustration ; elles ne correspondent pas aux mesures d’une police nommée :

Métrique Police web cible Police de repli
Unités par em 1 000 1 000
Hauteur d’x en unités de police 520 470
Rapport de hauteur d’x 0,52 0,47

Pour une taille déclarée de 16px, la hauteur d’x cible est de 16 × 0.52 = 8.32px. Pour atteindre cette hauteur, la police de repli nécessite un facteur d’échelle de 0,52 ÷ 0,47, soit environ 1.106383. Sa taille d’affichage ajustée est d’environ 17.7021px. Ces calculs illustrent la formule de la spécification ; ils ne permettent pas de prévoir les retours à la ligne réels.

Pour l’approche basée sur la propriété, appliquez le rapport cible au texte. Ce fragment CSS suppose que le paragraphe d’exemple porte la classe sample-copy :

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

Ici, 0.52 correspond à la police web illustrative. Remplacez-le par le rapport de votre police cible. Une valeur inexacte modifie aussi la taille d’affichage de la police privilégiée, car la propriété s’applique à toutes les polices sélectionnées, y compris la police web. W3C : module CSS Fonts niveau 5

Si vous ne disposez pas d’un rapport fiable, le W3C décrit une méthode d’étalonnage visuel : comparez deux échantillons utilisant la même police, la même taille et le même contenu, en désactivant l’ajustement sur l’un et en appliquant un ajustement numérique d’essai à l’autre. Commencez par 0.5, puis affinez jusqu’à obtenir une correspondance. Utilisez des échantillons agrandis et isolés pour l’étalonnage, puis revenez à une taille de lecture normale pour évaluer le résultat. Considérez toute valeur déterminée visuellement comme une approximation. W3C : module CSS Fonts niveau 5

Le mot-clé from-font tire sa valeur cible de la première police disponible. Si la police web souhaitée n’est pas disponible, la cible peut donc provenir d’une autre police. Pour une police de repli qui doit correspondre à une police web connue même si celle-ci ne se charge jamais, utilisez un rapport numérique établi. MDN : valeurs de font-size-adjust

Utiliser un alias de repli pour contrôler une seule police

Choisissez size-adjust pour associer la mise à l’échelle à une police de repli précise. Pour la paire illustrative ci-dessus, convertissez le facteur d’échelle en pourcentage : 100 × 0.52 ÷ 0.47 = 110.6383%. Ce descripteur met à l’échelle les avances des glyphes ainsi que les contours et les autres métriques associées. MDN : size-adjust

Ce fragment d’intégration de remplacement suppose que Arial Regular est disponible localement et que la police web cible est déjà déclarée. Le pourcentage est fourni à titre d’illustration ; mesurez donc votre paire avant de l’adopter :

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

L’alias synthétique limite l’ajustement à cette pile. Ses sources local() désignent une police précise ; elles ne sélectionnent pas une police sans empattement quelconque du système. La spécification CSS Fonts recommande de fournir les noms complet et PostScript pour assurer la correspondance entre les plateformes. Si aucune de ces sources n’est disponible, le navigateur passe à la famille suivante de la liste. W3C : module CSS Fonts niveau 4

Utilisez cette méthode comme alternative à la précédente. Appliquer font-size-adjust à du texte utilisant une police dont la taille est ajustée peut annuler la mise à l’échelle voulue, car la propriété utilise la métrique déjà surchargée. MDN : description de font-size-adjust

Diagnostiquer séparément les différences de retour à la ligne et de ligne de base

Après avoir fait correspondre la hauteur des minuscules, comparez le titre, le libellé et le paragraphe dans les espaces auxquels ils sont destinés. Il est utile de vérifier d’abord la taille apparente, ensuite les fins de ligne, puis la hauteur totale du bloc. Vous distinguerez ainsi trois problèmes visibles qui pourraient autrement vous pousser à continuer de modifier un même pourcentage.

Si la taille des minuscules semble correcte, mais que le paragraphe se coupe différemment, essayez une autre police de repli avant d’affiner davantage l’échelle. Adapter la taille à une seule métrique de hauteur ne permet pas à des dessins de glyphes différents d’avoir la même chasse. Notez le dernier mot de chaque ligne avec la police web et avec la police de repli pour cerner concrètement la différence restante.

Si la ligne de base ou la hauteur du bloc diffère encore, examinez ascent-override, descent-override et line-gap-override. Ces propriétés contrôlent les métriques de mise en page ; elles ne définissent pas une autre cible de taille visuelle. Par exemple, l’ascendante est la métrique située au-dessus de la ligne de base et utilisée pour calculer les blocs de ligne. Calculez les surcharges à partir de la paire de polices réelle au lieu de reprendre des pourcentages sans rapport. MDN : ascent-override

Pour obtenir un point de départ généré, la fonction documentée createFontStack de Capsize accepte les métriques dans l’ordre des familles préférées et renvoie à la fois fontFamily et fontFaces pour la police de repli. Utilisez les deux résultats ensemble. La documentation décrit aussi @capsizecss/metrics pour les polices incluses et @capsizecss/unpack pour extraire les métriques d’un fichier personnalisé. Les déclarations générées doivent tout de même être testées avec votre mise en page d’exemple. Documentation de Capsize

Préserver la mise en page du navigateur et le façonnage du texte

Les mesures Canvas peuvent aider à comparer des chaînes, mais elles répondent à des questions plus limitées. WHATWG définit measureText().width comme la largeur d’avance, tandis que les mesures de la boîte englobante réelle décrivent le texte dessiné. Canvas prépare une ligne hypothétique de largeur infinie : sa largeur ne mesure donc pas un paragraphe DOM renvoyé à la ligne. WHATWG : norme HTML, Canvas

Gardez des mots et des phrases entiers dans votre test. Évitez de reconstruire le texte avec des caractères positionnés individuellement ou de supposer que la somme des largeurs de caractères reproduit une chaîne façonnée. CSS définit les conditions qui régissent le façonnage au-delà des limites entre éléments en ligne, notamment lorsque ces limites s’accompagnent de changements d’espacement ou d’alignement. Conservez la structure normale du composant lorsque vous vérifiez sa police de repli. W3C : module CSS Text niveau 3

Vérifier la prise en charge des navigateurs et terminer la comparaison

MDN indique que la prise en charge de base de font-size-adjust est assurée depuis 2024 et que size-adjust est largement disponible depuis septembre 2023. Cela ne garantit pas la prise en charge de toutes les métriques ou de tous les mots-clés plus récents dans les anciens navigateurs. Consultez les tableaux de compatibilité pour la syntaxe que vous utilisez réellement. MDN : font-size-adjust, MDN : size-adjust

Si une forme avancée de métrique n’est pas disponible, utilisez une normalisation numérique de la hauteur d’x prise en charge si elle convient à la tâche, ou un descripteur de police de repli pris en charge. Si l’ajustement nécessaire n’est pas pris en charge du tout, gardez une police de repli visuellement proche et vérifiez la mise en page sans ajustement dans ce navigateur.

Terminez en répétant la comparaison pour chaque graisse et style utilisés, puis dans les navigateurs Mac que vous comptez prendre en charge. Confirmez à chaque fois quelle police s’affiche. Conservez l’ajustement choisi uniquement si le titre, le libellé et le paragraphe synthétiques ont une taille apparente, des retours à la ligne et un espacement acceptables dans les deux cas : avec la police web et avec la police de repli.

Sources