Ajustement de la taille du CSS pour @font-face

Lorsque vous chargez une police Web, vous pouvez désormais ajuster son échelle pour normaliser les tailles de police du document et éviter le décalage de la mise en page lorsque vous passez d'une police à une autre.

Prenons l'exemple suivant, où font-size est un 64px cohérent, et la seule différence entre chacun de ces en-têtes est 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.

Cet article explore un nouveau descripteur de police CSS appelé size-adjust. Il présente également quelques façons de corriger et de normaliser les tailles de police pour une expérience utilisateur plus fluide, des systèmes de conception cohérents et une mise en page de page plus prévisible. Un cas d'utilisation important consiste à optimiser le rendu des polices Web pour éviter le déplacement cumulatif de la mise en page (CLS).

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

1. Différences de hauteur dans les résultats.
2. Des changements de contenu visuellement choquants.
3. Déplacement des zones cibles interactives (le menu déroulant saute).

Ajuster la taille des 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 à un échange de polices fluide

Dans le GIF suivant, regardez les exemples à gauche et comment il y a un décalage lorsque la police est modifiée. Il ne s'agit que d'un petit exemple avec un seul élément de titre, et le problème est très visible.

Pour améliorer le rendu des polices, la technique de remplacement de police est très efficace. Affichez d'abord une police système à chargement rapide pour afficher le contenu, puis remplacez-la par une police Web lorsque le chargement de la police Web est terminé. Vous bénéficiez ainsi du meilleur des deux mondes: le contenu est visible dès que possible et vous obtenez une page bien stylisée sans sacrifier le temps de vos utilisateurs au contenu. Le problème est que, parfois, lorsque la police Web se charge, elle déplace l'ensemble de la page, car elle présente une taille de boîte légèrement différente.

En plaçant size-adjust dans la règle @font-face, vous définissez un ajustement global des glyphes pour le style de police. Si vous le faites correctement, le changement visuel sera minimal et le remplacement fluide. Pour créer un échange fluide, ajustez manuellement ou essayez cet outil de calcul de l'ajustement de la taille de Malte Ubl.

Au début de cet article, la résolution du problème de taille de police a été effectuée par tâtonnement. size-adjust a été modifié 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');
}

Calibrer les polices

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

Stratégies de calibrage de size-adjust:

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

Exemple 1: Cible distante

Prenons l'extrait suivant, qui ajuste une police disponible localement pour qu'elle corresponde à une police personnalisée de source distante. Une police personnalisée distante est la cible de la calibration, par exemple 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 échange 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 calibrage. C'est une excellente nouvelle pour les systèmes de conception.

La calculatrice de Malte fonctionne également sur la base d'une typographie de marque comme cible. Choisissez une police Google, et elle calculera comment ajuster Arial pour le remplacer facilement. Voici un exemple de CSS Roboto de la calculatrice, 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 la 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 de s'afficher sans aucun ajustement, puis d'ajuster les polices entrantes en conséquence.

Ajustement plus précis avec ascent-override, descent-override et line-gap-override

Si la mise à l'échelle générique des glyphes n'est pas suffisante pour votre conception ou vos stratégies 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 dans Firefox 89 et versions ultérieures.

ascent-override

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é pour que sa hauteur de majuscule s'adapte parfaitement à la zone de délimitation globale.

descent-override

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é pour que ses lettres reposent bien sur la ligne de base.

line-gap-override

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

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

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

Synthèse

Chacun de ces forçages offre un moyen supplémentaire de réduire l'excès de la zone de délimitation du texte sécurisé sur le Web. Vous pouvez adapter la zone de texte pour une présentation précise.

Conclusion

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

• Spécification des polices CSS de niveau 5
• Ajustement de la taille sur le MDN
• Générateur @font-face pour un échange fluide
• Cumulative Layout Shift (CLS) sur web.dev
• Une nouvelle façon de réduire l'impact du chargement des polices: les descripteurs de polices CSS

Photo par Kristian Strand, publiée sur Unsplash