Skip to main content

Chapitre 87 : Approfondissement : Internationalisation et Accessibilité

L'utilisation de font-size-adjust devient critique lorsque l'on gère des sites multilingues.

Le défi des glyphes CJK​

Les caractères chinois, japonais et coréens (CJK) occupent généralement un carré complet (em-square). À taille égale (16px), un caractère chinois paraît souvent beaucoup plus massif qu'un caractère latin. Si vous mélangez les deux dans une même phrase, le déséquilibre visuel est flagrant.

En utilisant font-size-adjust, vous pouvez harmoniser la perception visuelle entre les polices latines et les polices CJK de secours, évitant ainsi que le texte ne semble "sauter" visuellement lors du passage d'une langue à l'autre.

L'impact sur le CLS (Cumulative Layout Shift)​

Le CLS est une métrique Core Web Vital qui mesure la stabilité visuelle. Lorsqu'une police web (WebFont) finit de charger, le navigateur remplace la police de secours par la police finale. Si la hauteur x diffère, le texte change de taille, ce qui déplace les éléments environnants.

font-size-adjust réduit drastiquement ce saut en forçant la police de secours à imiter la proportion de la police finale, minimisant ainsi le déplacement des blocs de texte lors de l'activation de la WebFont.

Questions clés​

  1. Quelle est la différence fondamentale entre font-size et font-size-adjust ?
Découvrir la réponse

font-size définit la taille nominale de la police (la boîte englobante). font-size-adjust définit le ratio de la hauteur x par rapport à cette taille. Cela permet d'ajuster la taille réelle du rendu pour que différentes polices aient la même perception visuelle de "taille".

  1. Pourquoi font-size-adjust est-il particulièrement utile pour l'accessibilité ?
Découvrir la réponse

Certains utilisateurs utilisent des extensions de navigateur ou des paramètres système pour forcer des polices spécifiques (ex: polices pour dyslexiques). Si ces polices ont des proportions très différentes de vos polices de design, le texte peut devenir trop petit. font-size-adjust garantit que le texte reste lisible quel que soit le choix de police.

  1. Comment calculer le ratio pour font-size-adjust ?
Découvrir la réponse

Le ratio se calcule en divisant la hauteur x de la police par la taille de la police (ex: hauteur_x / font-size). On peut utiliser des outils de design comme Figma ou inspecter les tables de métadonnées de la police via des outils de typographie.

  1. Est-ce que font-size-adjust modifie la police principale si elle est chargée ?
Découvrir la réponse

Non. La propriété agit principalement sur les polices de secours (fallback). Si la police principale est disponible et respecte déjà le ratio, elle ne sera pas modifiée. L'objectif est d'aligner le fallback sur la police principale.

  1. Quel est l'impact sur les performances de rendu ?
Découvrir la réponse

L'impact est négligible. Le calcul du ratio est effectué par le moteur de rendu du navigateur lors de la phase de calcul des styles, avant le layout.

Mise en pratique​

Exercice 1 : Reproduction guidée​

Objectif : Implémenter un fallback robuste pour un titre utilisant une police personnalisée.

Consigne : Créez un élément <h1> avec la police "Open Sans", et en fallback "Arial". Appliquez un font-size-adjust de 0.5 pour garantir que Arial ne paraisse pas trop petit.

Découvrir la solution commentée
h1 {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 2.5rem;
  /* 
     On force le ratio de 0.5 pour que Arial (le fallback) 
     ait une hauteur x proportionnelle à Open Sans.
  */
  font-size-adjust: 0.5;
}

Exercice 2 : Adaptation​

Objectif : Créer un système de variables CSS pour gérer plusieurs niveaux de lisibilité.

Consigne : Définissez trois variables CSS (--ratio-tight, --ratio-standard, --ratio-loose) représentant des ratios de hauteur x (0.4, 0.5, 0.6). Appliquez-les à des classes .text-compact, .text-normal, et .text-wide pour tester la cohérence visuelle des fallbacks.

Découvrir la solution commentée
:root {
  --ratio-tight: 0.4;
  --ratio-standard: 0.5;
  --ratio-loose: 0.6;
}

.text-compact {
  font-family: "Inter", "Helvetica", sans-serif;
  font-size-adjust: var(--ratio-tight);
}

.text-normal {
  font-family: "Inter", "Helvetica", sans-serif;
  font-size-adjust: var(--ratio-standard);
}

.text-wide {
  font-family: "Inter", "Helvetica", sans-serif;
  font-size-adjust: var(--ratio-loose);
  /* 
     Un ratio plus élevé force le fallback à être plus grand 
     pour compenser une police principale très "haute".
  */
}

Exercice 3 : Conception​

Objectif : Résoudre un problème de saut visuel (CLS) lors du chargement d'une police WebFont.

Consigne : Vous avez une police principale "Montserrat", et vous Arial sebagai fallback. Vous remarquez que Montserrat a une hauteur x beaucoup plus grande que Arial. Montserrat est chargée via @font-face. Écrivez le CSS nécessaire pour que le passage de Arial à Montserrat soit presque invisible.

Découvrir la solution commentée
/* 
   1. Définition de la police via @font-face 
*/
@font-face {
  font-family: "Montserrat";
  src: url("montserrat.woff2") format("woff2");
  font-display: swap; /* Important pour éviter le texte invisible (FOIT) */
}

/* 
   2. Application du ratio d'aspect 
   CK : Montserrat a une hauteur x généreuse (environ 0.52)
*/
body {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  
  /* 
     En ajustant le ratio à 0.52, on demande au navigateur 
     d'agrandir Arial pour que sa hauteur x 
     corresponde à celle de Montserrat.
  */
  font-size-adjust: 0.52;
  
  /* 
     On s'assure que le line-height est défini explicitement 
     pour éviter que le navigateur 
     ne recalcule la hauteur de ligne 
     en fonction de la taille ajustée de la police.
  */
  line-height: 1.5;
}