Ajustement de la taille du CSS pour @font-face

Lorsqu'une police Web se charge, vous pouvez désormais ajuster son échelle pour normaliser la taille des polices du document et éviter les décalages de mise en page lors du changement de police.

Adam Argyle

Prenons l'exemple de cette démonstration, où l'en-tête font-size est un 64px cohérent, et où la seule différence entre chacun de ces en-têtes est l'en-tête font-family. Les exemples de gauche n'ont pas été ajustés et ont une taille finale incohérente. Les exemples de droite utilisent size-adjust pour s'assurer que 64px est la taille finale cohérente.

Dans cet exemple, les outils de débogage de la mise en page de la grille CSS des outils pour les développeurs Chrome sont utilisés pour afficher les hauteurs.

Cet article explore un nouveau descripteur CSS font-face appelé size-adjust. Il présente également quelques méthodes pour corriger et normaliser les tailles de police afin d'offrir une expérience utilisateur plus fluide, des systèmes de conception cohérents et une mise en page plus prévisible. Un cas d'utilisation important consiste à optimiser l'affichage des polices Web pour éviter le Cumulative Layout Shift (CLS).

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

Voici une démonstration interactive de l'espace de problème. Essayez de modifier la typographie à l'aide du menu déroulant et observez les changements :

  1. Différences de hauteur dans les résultats.
  2. Décalages de contenu visuellement dérangeants.
  3. Déplacement des zones cibles interactives (le menu déroulant se déplace).

Ajuster les polices avec size-adjust

Présentation de la syntaxe :

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. Crée une police personnalisée nommée Adjusted Typeface.
  2. Utilise size-adjust pour agrandir chaque glyphe à 150 % de sa taille par défaut.
  3. N'affecte que la police importée.

Utilisez la police de caractères personnalisée ci-dessus comme suit :

h1 {
  font-family: "Adjusted Typeface";
}

Atténuer le CLS grâce au remplacement fluide des polices

Dans le GIF suivant, observez les exemples de gauche et la façon dont un décalage se produit lorsque la police est modifiée. Il s'agit d'un petit exemple avec un seul élément de titre, et le problème est très visible.

L'exemple de gauche présente un décalage de mise en page, contrairement à celui de droite.

Pour améliorer l'affichage des polices, une excellente technique consiste à changer de police. Affichez une police système à chargement rapide pour afficher d'abord le contenu, puis remplacez-la par une police Web lorsque celle-ci a fini de se charger. Vous gagnez ainsi sur tous les tableaux : le contenu est visible dès que possible, et vous obtenez une page bien stylisée sans sacrifier le temps d'accès au contenu de l'utilisateur. Le problème, cependant, est que parfois, lorsque la police Web se charge, elle déplace toute la page, car elle se présente à une taille de hauteur de boîte légèrement différente.

Plus il y a de contenu, plus le risque de décalage de mise en page est élevé lors du changement de police.

En plaçant size-adjust dans la règle @font-face, vous définissez un ajustement global des glyphes pour la police. Si vous choisissez le bon moment, le changement visuel sera minime et la transition se fera en douceur. Pour créer un remplacement fluide, ajustez manuellement la taille ou essayez ce calculateur d'ajustement de la taille de Malte Ubl.

Choisissez une police Google Web et obtenez un extrait @font-face préajusté.

Au début de cet article, nous avons résolu le problème de taille de police par tâtonnement. size-adjust a été ajusté dans le code source jusqu'à ce que le même en-tête dans Cookie et Arial affiche le même 64px que Press Start 2P naturellement. J'ai aligné deux polices sur une taille de police cible.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Calibrage des polices…

En tant qu'auteur, vous déterminez la ou les cibles de calibrage pour normaliser l'échelle de police. Vous pouvez normaliser sur Times, Arial ou une police système, puis ajuster les polices personnalisées pour qu'elles correspondent. Vous pouvez également ajuster les polices locales pour qu'elles correspondent à celles que vous téléchargez.

Stratégies de calibration de size-adjust :

  1. Cible distante :
    Ajustez les polices locales en fonction des polices téléchargées.
  2. Cible locale :
    Ajustez les polices téléchargées en fonction des polices cibles locales.

Exemple 1 : Cible distante

Prenons l'extrait de code suivant, qui ajuste une police disponible localement pour qu'elle corresponde à la taille d'une police personnalisée src distante. Une police personnalisée distante est la cible de l'étalonnage, peut-être une police de marque :

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

Dans cet exemple, la police locale Arial s'ajuste en prévision d'une police personnalisée chargée, pour un remplacement fluide.

Cette stratégie présente l'avantage d'offrir aux concepteurs et aux développeurs la même police pour le dimensionnement et la typographie. La marque est la cible de l'étalonnage. C'est une excellente nouvelle pour les systèmes de conception.

Le calculateur de Malte fonctionne également en ayant une typographie de marque comme cible. Choisissez une police Google Fonts, et l'outil calculera comment ajuster Arial pour la remplacer de manière fluide. Voici un exemple de CSS Roboto issu du calculateur, où Arial est chargé et nommé "Roboto-fallback" :

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Pour créer un ajustement entièrement multiplate-forme, consultez l'exemple suivant, qui fournit deux polices de remplacement locales ajustées en prévision d'une police de marque.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Exemple 2 : Cible locale

Prenons l'extrait de code suivant, qui ajuste une police personnalisée de marque pour qu'elle corresponde à Arial :

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Cette stratégie présente l'avantage d'effectuer le rendu sans aucun ajustement, puis d'ajuster les polices entrantes pour qu'elles correspondent.

Affinage avec ascent-override, descent-override et line-gap-override

Si la mise à l'échelle générique des glyphes ne suffit pas pour vos stratégies de conception ou de chargement, voici quelques options de réglage plus précises qui fonctionnent avec size-adjust. Les propriétés ascent-override, descent-override et line-gap-override sont actuellement implémentées dans Chromium 87 et versions ultérieures, et Firefox 89 et versions ultérieures.

Ciseaux au-dessus et en dessous du mot "overrides" (remplacements), indiquant les zones que les fonctionnalités peuvent couper

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

Le descripteur ascent-override définit la hauteur au-dessus de la ligne de base d'une police.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Le titre rouge (non ajusté) comporte un espace au-dessus des lettres majuscules A et O, tandis que le titre bleu a été ajusté de sorte que sa hauteur de capitale s'adapte parfaitement au cadre de délimitation global.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

Le descripteur descent-override définit la hauteur sous la ligne de base de la police.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Le titre rouge (non ajusté) comporte un espace sous les lignes de base des lettres D et O, tandis que le titre bleu a été ajusté de sorte que ses lettres reposent sur la ligne de base.

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

Le descripteur line-gap-override définit la métrique d'interligne de la police. Il s'agit de l'interligne recommandé pour la police ou de l'interligne externe.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Le titre rouge (non ajusté) n'a pas de line-gap-override, il est essentiellement à 0%, tandis que le titre bleu a été ajusté de 50 % vers le haut, créant ainsi de l'espace au-dessus et en dessous des lettres.

Synthèse

Chacune de ces options de remplacement offre un moyen supplémentaire de supprimer l'excédent du cadre de délimitation du texte sécurisé du Web. Vous pouvez adapter la zone de texte pour une présentation précise.

Conclusion

La fonctionnalité CSS @font-face size-adjust est un moyen intéressant de personnaliser le cadre de délimitation du texte de vos mises en page Web afin d'améliorer l'expérience de changement de police, évitant ainsi les décalages de mise en page pour vos utilisateurs. Pour en savoir plus, consultez les ressources suivantes :