Lors du chargement d'une police Web, vous pouvez désormais ajuster son échelle afin de normaliser les tailles de police des documents et d'éviter un décalage de mise en page lors du passage d'une police à une autre.
Prenons la démonstration suivante, où font-size est une valeur 64px cohérente, 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 leur taille finale est incohérente. Les exemples de droite utilisent size-adjust pour s'assurer que 64px est la taille finale cohérente.
Cet article présente un nouveau descripteur CSS font-face 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 plus prévisible. Un cas d'utilisation important consiste à optimiser le rendu des polices Web pour éviter le décalage de mise en page cumulatif (CLS).
Voici une démonstration interactive de l'espace problématique. Essayez de modifier la police de caractères avec le menu déroulant et observez:
- Les différences de hauteur dans les résultats.
- Changements de contenu visuellement perturbants
- Déplacement des zones cibles interactives (le menu déroulant défile).
Mettre à l'échelle les polices avec size-adjust
Une introduction à la syntaxe:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- Crée une police de caractères personnalisée nommée
Adjusted Typeface. - Utilise
size-adjustpour augmenter la taille de chaque glyphe de 150% par défaut. - Ne s'applique qu'à la seule police de caractères importée.
Utilisez la police de caractères personnalisée ci-dessus comme ceci:
h1 {
font-family: "Adjusted Typeface";
}
Réduire le CLS grâce au remplacement fluide des polices
Dans le GIF suivant, regardez les exemples de gauche et découvrez 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 perceptible.
Pour améliorer le rendu des polices, l'échange de polices est une excellente technique. Affichez une police système à chargement rapide pour afficher d'abord le contenu, puis remplacez-la par une police Web une fois le chargement 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 l'utilisateur au profit du contenu. Toutefois, le problème est que parfois, lors du chargement de la police Web, elle déplace toute la page, car elle s'affiche à une hauteur de zone légèrement différente.
En plaçant size-adjust dans la règle @font-face, vous définissez un ajustement global du glyphe pour la police. Le timing de ce bon moment conduira à un changement visuel minimal, un échange fluide. Pour faciliter l'échange, ajustez la taille à la main ou essayez cette calculatrice d'ajustement de taille de Malte Ubl.
@font-face pré-ajusté.
Au début de cet article, la résolution du problème de taille de la police a été faite par tâtonnement. size-adjust a été rappelé dans le code source jusqu'à ce que le même en-tête dans Cookie et Arial affiche naturellement le même 64px que Press Start 2P.
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 la normalisation de l'échelle de police. Vous pouvez normaliser les polices Times, Arial ou 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 d'étalonnage de size-adjust:
- Cible distante:
Ajustez les polices locales par rapport aux polices téléchargées. - 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 du calibrage, une police de marque, par exemple:
@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 pour anticiper le chargement d'une police personnalisé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 l'objectif de calibrage. C'est une excellente nouvelle pour les systèmes de conception.
Avoir une police de caractères de la marque comme cible est également la façon dont la calculatrice de Malte fonctionne. Choisissez une police Google Fonts, et le système calculera le réglage d'Arial pour une transition facile avec celle-ci. Voici un exemple de CSS Roboto issu de la calculatrice, dans lequel 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 permet d'ajuster 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 de s'afficher 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 la mise à l'échelle générique des glyphes ne suffit pas à ajuster 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 Firefox 89+.
ascent-override
Le descripteur ascent-override définit la hauteur au-dessus de la base d'une police.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
ascent-override: 71%;
}
Le titre rouge (non ajusté) dispose d'un espace au-dessus des lettres majuscules A et O, tandis que le titre en bleu a été ajusté de sorte que sa hauteur majuscule s'adapte parfaitement au cadre de délimitation global.
descent-override
Le descripteur descent-override définit la hauteur sous la référence de la police.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
descent-override: 0%;
}
Le titre rouge (non ajusté) dispose d'un espace en dessous des références D et O, tandis que le titre bleu a été ajusté de sorte que les lettres soient parfaitement ajustées sur la base.
line-gap-override
Le descripteur line-gap-override définit la métrique d'écart entre les lignes pour la police.
Il s'agit de l'interligne ou de l'interligne 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é) n'a pas de line-gap-override, il est essentiellement à 0%, tandis que le titre en bleu a été ajusté de 50%, créant ainsi un espace au-dessus et en dessous des lettres.
Synthèse
Chacun de ces forçages offre un moyen supplémentaire de supprimer l'excédent du cadre de délimitation de texte sécurisé du Web. Vous pouvez adapter la zone de texte pour obtenir une présentation plus précise.
Conclusion
La fonctionnalité CSS @font-face size-adjust est un excellent moyen de personnaliser le cadre de délimitation de texte de vos mises en page Web afin d'améliorer l'expérience de remplacement des polices 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 Fonts 5
- Ajustement de la taille sur MN
- Générateur d'échange @font-face facile
- CLS (Cumulative Layout Shift) sur web.dev
- Une nouvelle façon de réduire l'impact du chargement des polices: les descripteurs de police CSS
Photo par Kristian Strand, publiée sur Unsplash