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.

Adam Argyle

Prenons la démonstration suivante, 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.

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

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 empêcher le cumul Layout Shift (CLS) de cet outil.

Navigateurs pris en charge

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

Source

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. Contenu visuellement choquant.
  3. Déplacement des zones cibles interactives (le menu déroulant saute).

Mettre à l'échelle les polices avec size-adjust

Introduction à 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 de caractères personnalisée nommée Adjusted Typeface.
  2. Utilise size-adjust pour augmenter la taille de chaque glyphe jusqu'à 150% de leur 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";
}

Limiter le CLS avec un échange de police fluide

Dans le GIF suivant, regardez les exemples à gauche et observez le décalage lié au changement de police. Il ne s'agit que d'un exemple avec un seul élément de titre, et le problème est très notable.

La mise en page de l'exemple de gauche est décalée, celle de l'exemple de droite ne l'est pas.

Pour améliorer le rendu des polices, le remplacement des polices est une excellente technique. Affichez une police système à chargement rapide pour afficher le contenu en premier, puis remplacez-la par une police Web lorsque le chargement de la police Web est terminé. Vous profitez 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 l'utilisateur au contenu. Toutefois, le problème est que, lorsque la police Web se charge, la page entière est décalée, car la hauteur de zone est légèrement différente.

Plus de contenu équivaut à un décalage de mise en page potentiel plus important lors des changements de police

En plaçant size-adjust dans la règle @font-face, vous définissez un ajustement de glyphe global pour la police de caractères. 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.

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

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 la normalisation de l'échelle de police. Vous pouvez normaliser les polices 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 à celles que vous téléchargez.

Stratégies de calibrage de size-adjust:

  1. Cible distante :
    ajuste les polices locales vers les polices téléchargées.
  2. Cible locale
    :ajustez les polices téléchargées pour les 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, ce qui permet un échange sans accroc.

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 calibration. C'est une excellente nouvelle pour les systèmes de conception.

Avoir une police de caractères de marque comme cible est également la façon dont fonctionne la calculatrice de Malte. Choisissez une police Google Fonts, et le système calculera comment ajuster Arial pour l'utiliser 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'exemple de 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 a l'avantage d'afficher le rendu sans aucun ajustement, puis d'ajuster les polices entrantes en conséquence.

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

Si le scaling 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 versions ultérieures, et Firefox 89 et versions ultérieures.

ciseaux ci-dessus et souffler les forçages de mots, en montrant les zones auxquelles les éléments géographiques peuvent être rognés

ascent-override

Navigateurs pris en charge

  • Chrome : 87
  • Edge : 87.
  • Firefox: 89
  • Safari : non compatible.

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 en bleu a été ajusté pour que sa hauteur de fin s'adapte à l'ensemble du cadre de délimitation.

descent-override

Navigateurs pris en charge

  • Chrome: 87
  • Edge : 87.
  • Firefox: 89
  • Safari: non compatible.

Source

Le descripteur descent-override définit la hauteur en dessous de 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

Navigateurs pris en charge

  • Chrome : 87
  • Edge : 87.
  • Firefox : 89.
  • Safari : non compatible.

Source

Le descripteur line-gap-override définit la métrique de l'espacement entre les lignes pour la police. Il s'agit de la police recommandée pour l'interligne ou le début 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. Sa valeur est donc 0%, tandis que le titre en bleu a été ajusté de 50%, créant de l'espace au-dessus et en dessous des lettres en conséquence.

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 personnaliser la zone de texte pour une présentation plus 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 et d'éviter ainsi un décalage de mise en page pour vos utilisateurs. Pour en savoir plus, consultez ces ressources:

Photo par Kristian Strand sur Unsplash