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 le décalage de mise en page lorsque vous changez de police.

Adam Argyle

Prenons l'exemple suivant, où font-size est un 64px cohérent et où la seule différence entre chacun de ces en-têtes est le 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 font-face CSS appelé size-adjust. Il montre é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 plus prévisible. L'un des cas d'utilisation importants consiste à optimiser le rendu des polices Web pour éviter le décalage de mise en page cumulatif (CLS).

Browser Support

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

Source

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

  1. Différences de hauteur dans les résultats.
  2. Contenu visuellement choquant
  3. Déplacement des zones cibles interactives (le menu déroulant saute partout !).

Adapter 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 typographie personnalisée nommée Adjusted Typeface.
  2. Utilise size-adjust pour mettre à l'échelle chaque glyphe à 150 % de sa taille par défaut.
  3. N'affecte que la typographie 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 police fluide

Dans le GIF suivant, observez les exemples de gauche et la façon dont ils se décalent lorsque la police est modifiée. Il ne s'agit là que d'un petit exemple avec un seul élément d'en-tête, 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 le rendu des polices, une excellente technique consiste à échanger les polices. Affichez d'abord le contenu à l'aide d'une police système à chargement rapide, puis remplacez-la par une police Web une fois que celle-ci est chargée. Vous bénéficiez ainsi du meilleur des deux mondes : le contenu est visible le plus rapidement possible et vous obtenez une page bien mise en forme sans faire perdre de temps à vos utilisateurs. Le problème, cependant, est que parfois, lorsque la police Web se charge, elle déplace toute la page, car elle présente une hauteur de boîte légèrement différente.

Plus il y a de contenu, plus le décalage de mise en page est susceptible de se produire 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 typographie. Si vous choisissez le bon moment, le changement visuel sera minime et le remplacement se fera en douceur. Pour créer un échange fluide, ajustez manuellement ou essayez ce calculateur d'ajustement de taille de Malte Ubl.

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

Au début de cet article, la correction du problème de taille de police a été effectuée par essais et erreurs. size-adjust a été déplacé 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 de manière naturelle. 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 calibration pour normaliser l'échelle de la 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 par rapport aux 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 suivant, qui ajuste une police disponible localement pour qu'elle corresponde à la taille d'une police personnalisée src distante. Une police personnalisée à distance est la cible de la calibration, 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 la taille et la typographie. La marque est la cible de calibration. C'est une excellente nouvelle pour les systèmes de conception.

La calculatrice 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 provenant 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 secours 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 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 à ajuster 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 Firefox 89+.

ciseaux au-dessus et souffler sur les remplacements de mots, en montrant les zones que les fonctionnalités peuvent couper

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

Dans le titre rouge (non ajusté), il y a un espace au-dessus des lettres majuscules A et O. En revanche, le titre bleu a été ajusté de sorte que sa hauteur de majuscule s'adapte parfaitement à la boîte englobante globale.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

La ligne de base de la typographie rouge (non ajustée) est espacée sous les lettres D et O, tandis que celle de la typographie bleue a été ajustée pour que les lettres reposent bien sur la ligne de base.

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

@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 donc à 0%. Le titre bleu a été ajusté de 50 %, ce qui a créé de l'espace au-dessus et en dessous des lettres.

Synthèse

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

Conclusion

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

Photo de Kristian Strand sur Unsplash