Correction des décalages visuels causés par les polices web

Vincent Bernat

En 2020, Google a in­tro­duit les mé­triques Core Web Vi­tals pour me­su­rer cer­tains as­pects de l’ex­pé­rience uti­li­sa­teur sur le web. Ce blog a constam­ment ob­tenu de bons scores pour deux de ces mé­triques : Lar­gest Content­ful Paint et In­ter­ac­tion to Next Paint. Ce­pen­dant, l’op­ti­mi­sa­tion de la troi­sième mé­trique, Cu­mu­la­tive Layout Shift, qui me­sure les chan­ge­ments de mise en page in­at­ten­dus, a été plus dif­fi­cile. Soyons hon­nêtes : op­ti­mi­ser pour cette mé­trique n’est pas vrai­ment utile pour un site comme ce­lui-ci. Mais ob­te­nir un meilleur score est tou­jours une bonne dis­traction. 💯

Pour évi­ter le « flash de texte in­vi­sible » lors de l’uti­li­sa­tion de po­lices web, les dé­ve­lop­peurs sont en­cou­ra­gés à pla­cer la pro­priété font-display sur swap dans les règles @font-face. Cette mé­thode per­met aux na­vi­ga­teurs d’af­fi­cher ini­tia­le­ment le texte en uti­li­sant une po­lice de sub­sti­tu­tion, puis de la rem­pla­cer par la po­lice fi­nale lorsqu’elle est char­gée. Bien que cela amé­liore le score LCP, cela pro­voque des dé­ca­lages de mise en page si les po­lices de sub­sti­tu­tion n’ont pas des mé­triques com­pa­tibles. Ces dé­ca­lages af­fectent né­ga­ti­ve­ment le score CLS. CSS four­nit des pro­prié­tés pour ré­soudre ce pro­blème en adap­tant les mé­triques des po­lices de sub­sti­tu­tion : size-adjust, ascent-override, descent-override et line-gap-override.

Deux ar­ticles com­plets ex­pliquent chaque pro­priété et leurs mé­thodes de cal­cul en dé­tail : Crea­ting Per­fect Font Fall­backs in CSS et Im­pro­ved font fallbacks.

Outil interactif#

Au lieu de cal­cu­ler chaque pro­priété à par­tir des mé­triques moyennes des po­lices, j’ai créé un ou­til pour ré­gler in­ter­ac­ti­ve­ment les mé­triques des po­lices de sub­sti­tution1.

Mode d’emploi#

  1. Char­gez votre po­lice per­son­nalisée.

  2. Sé­lec­tion­nez une po­lice de sub­stitution.

  3. Ajus­tez la pro­priété size-adjust pour faire cor­res­pondre la lar­geur de votre po­lice per­son­na­li­sée avec celle de la po­lice de sub­sti­tu­tion. Avec une po­lice pro­por­tion­nelle, il n’est sou­vent pas pos­sible d’ob­te­nir une cor­res­pon­dance parfaite.

  4. Af­fi­nez la pro­priété ascent-override. Es­sayez d’ali­gner le point fi­nal du der­nier pa­ra­graphe tout en sur­veillant la ligne de base de la po­lice. Pour un ajus­te­ment plus pré­cis, désac­ti­vez l’op­tion «  ».

  5. Mo­di­fiez la pro­priété descent-override. L’ob­jec­tif est de faire cor­res­pondre les deux boîtes. Vous de­vrez peut-être al­ter­ner entre cette pro­priété et la pré­cé­dente pour ob­te­nir des ré­sul­tats optimaux.

  6. Si né­ces­saire, ajus­tez la pro­priété line-gap-override. Cette étape n’est gé­né­ra­le­ment pas requise.

Le pro­ces­sus doit être ré­pété pour chaque po­lice de sub­sti­tu­tion. Cer­taines pla­te­formes peuvent ne pas in­clure cer­taines po­lices. No­tam­ment, An­droid n’a pas la plu­part des po­lices pré­sentes dans d’autres sys­tèmes d’ex­ploi­ta­tion. Il rem­place Geor­gia par Noto Se­rif, qui n’est pas com­pa­tible au ni­veau des mé­triques.

Outil#

Cet ou­til né­ces­site JavaScript.

Cet ou­til n’est pas dis­po­nible de­puis le flux Atom.

100%
100%
100%
0%

La confé­dé­ra­tion BGP est une tech­nique uti­li­sée pour ré­duire le nombre de ses­sions iBGP et amé­lio­rer le pas­sage à l’échelle dans les grands sys­tèmes au­to­nomes (AS). Elle di­vise un AS en sous-AS. La plu­part des règles eBGP s’ap­pliquent entre les sous-AS, sauf que le saut sui­vant, la MED et les pré­fé­rences lo­cales res­tent in­chan­gés. La lon­gueur du che­min d’AS ignore les contri­bu­tions des sous-AS de la confé­dé­ra­tion. La confé­dé­ra­tion BGP est ra­re­ment uti­li­sée et la ré­flexion des routes BGP lui est gé­né­ra­le­ment pré­fé­rée.
Le rem­pla­ce­ment d’AS est une fonc­tion­na­lité qui per­met à un rou­teur de rem­pla­cer l’ASN d’un voi­sin dans le che­min d’AS des routes BGP sor­tantes par le sien. C’est utile lorsque deux sys­tèmes au­to­nomes dis­tincts par­tagent le même ASN. Ce­pen­dant, cela in­ter­fère avec le mé­ca­nisme de pré­ven­tion des boucles de BGP et doit être uti­lisé avec pru­dence.

Résultats#

Pour la po­lice uti­li­sée pour le texte de ce blog, j’ob­tiens la dé­fi­ni­tion CSS suivante :

@font-face {
  font-family: Merriweather;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/merriweather.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Fallback for Merriweather";
  src: local("Noto Serif"), local("Droid Serif");
  size-adjust: 98.3%;
  ascent-override: 99%;
  descent-override: 27%;
}
@font-face {
  font-family: "Fallback for Merriweather";
  src: local("Georgia");
  size-adjust: 106%;
  ascent-override: 90.4%;
  descent-override: 27.3%;
}

font-family: Merriweather, "Fallback for Merriweather", serif;

Mise à jour (10.2026)

J’ai rem­placé Mer­ri­wea­ther par Li­te­rata pour le corps du texte.

Après un mois, la mé­trique CLS s’est bien amé­liorée à 0 :

Scores Core Web Vitals pour vincent.bernat.ch montrant les 6 métriques dans le vert. Notamment, la métrique CLS à 0.
Scores Core Web Vitals pour vincent.bernat.ch

À propos des polices personnalisées#

L’uti­li­sa­tion de po­lices sys­tèmes ou d’un en­semble de po­lices est sou­vent plus simple. Ce­pen­dant, je pré­fère les po­lices web per­son­na­li­sées. Mer­ri­wea­ther et Io­sevka, qui sont uti­li­sées dans ce blog, amé­liorent l’ex­pé­rience de lec­ture. Une ap­proche al­ter­na­tive se­rait d’uti­li­ser Geor­gia comme po­lice prin­ci­pale. Mal­heu­reu­se­ment, la plu­part des po­lices à chasse fixe par dé­faut sont laides.

De plus, les pa­ra­graphes qui com­binent des po­lices à chasse va­riable et fixe peuvent créer une per­tur­ba­tion vi­suelle. Cela se pro­duit en rai­son des dif­fé­rences des mé­triques ver­ti­cales ou des graisses. Pour ré­soudre ce pro­blème, j’ajuste les mé­triques d’Io­sevka et sa graisse pour les ali­gner avec les ca­rac­té­ris­tiques de Mer­ri­weather.