Documentation

Stack de repli

Choisissez le groupe de polices système à utiliser comme repli :

• Sans-Serif — Arial + Roboto : pour les polices sans empattement (Inter, Poppins, Open Sans, Nunito…).
• Serif — Times New Roman + Roboto Serif : pour les polices avec empattement (Playfair Display, Lora, Merriweather…).
• Condensed — Impact + Roboto Condensed : pour les polices condensées ou d'affichage.

Chaque stack génère deux déclarations @font-face — une pour chaque police système — et les insère toutes deux dans la stack font-family finale.

Pourquoi Arial et Roboto ?

Arial est disponible sur pratiquement tous les systèmes : Windows depuis 1992, macOS, iOS et la grande majorité des distributions Linux. C'est la police sans-serif la plus universellement présente sur desktop et iOS.

Roboto est la police système par défaut d'Android depuis la version 4.0 (Ice Cream Sandwich, 2011) — Arial n'étant pas disponible sur Android. Cela couvre également ses variantes : Roboto Serif et Roboto Condensed.

Ce choix est directement lié aux Core Web Vitals mesurés par Google via le CrUX (Chrome User Experience Report). CrUX collecte les données de performance réelles des utilisateurs Chrome dans le monde entier. Or, Android représente environ 70 % du trafic mobile mondial. Si votre police de repli n'est pas calibrée pour Roboto, vos scores CLS dans CrUX seront dégradés sur la majorité du trafic mobile — ce qui affecte directement votre référencement Google.

En ciblant à la fois Arial (desktop + iOS) et Roboto (Android), vous couvrez l'essentiel du parc mondial et garantissez de bons scores CLS dans les données réelles de Google.

Précision technique : substituts métriques pour Arial et Times New Roman

Arial et Times New Roman sont des fontes propriétaires Microsoft, distribuées sous licence avec Windows et incluses dans macOS et iOS pour des raisons historiques. Nous n'avons pas le droit de les redistribuer dans cet outil. Sur les systèmes Linux sans le paquet msttcorefonts (la majorité), ces deux fontes sont tout simplement absentes.

Pour que l'aperçu et le test A/B fonctionnent correctement sur ces systèmes, nous embarquons leurs équivalents libres (Apache 2.0) conçus par Google pour être métriquement identiques aux originaux :

Fonte propriétaire	Substitut bundlé
Arial	Arimo (/fonts/arimo/Arimo-Regular.woff2)
Times New Roman	Tinos (/fonts/tinos/Tinos-Regular.woff2)

Caractéristiques de l'équivalence métrique :

• Largeur de chaque glyphe : identique au pixel près
• Hauteur de ligne intrinsèque, ascent, descent : identiques
• Retours à la ligne d'un paragraphe : identiques
• Forme des lettres : subtilement différentes (un graphiste verra les variations sur les "a", "e", "g", "R", empattements, terminaisons)

Concrètement, le CSS injecté pour l'aperçu fait par exemple :

src: local('Arial'), url('/fonts/arimo/Arimo-Regular.woff2') format('woff2');

→ Les utilisateurs avec la fonte originale localement (Windows, macOS, iOS) chargent leur vraie fonte. Les utilisateurs sans (Linux desktop, navigateurs avec polices restreintes) chargent silencieusement notre substitut, qui a exactement les mêmes métriques.

Le CSS exporté pour votre site contient uniquement les local() — on n'inclut pas les URLs Arimo/Tinos. Sur les sites de vos visiteurs, l'écrasante majorité a Arial / Times New Roman (Windows, macOS, iOS), et les utilisateurs Android passent par le second fallback Roboto (ou Roboto Serif). Vous n'avez donc aucun fichier additionnel à embarquer.

Pour la calibration des métriques (objet de cet outil), les paires produisent numériquement les mêmes valeurs de size-adjust, ascent-override, etc. Le résultat de votre tuning est valide indifféremment contre l'original ou le substitut.

Note : Impact (utilisé pour le stack Condensed) n'a pas d'équivalent OSS métriquement strict. Les visiteurs Linux sans Impact verront le second fallback (Roboto Condensed) jusqu'au chargement de votre vraie fonte. Cela n'affecte pas la calibration pour les visiteurs Windows/macOS/iOS/Android qui composent l'écrasante majorité de votre trafic.

Texte de prévisualisation

Sept types de contenus prédéfinis couvrent les cas d'usage les plus courants :

• Paragraphes : texte courant en prose. Représente ~80 % du contenu réel d'un site. C'est le cas le plus important à calibrer en premier.
• Majuscules : révèle les différences de hauteur de capitale entre les polices.
• Gras & italique : le navigateur synthétise le gras à partir du repli Regular, ce qui produit des métriques différentes. Important si votre mise en page contient du texte en gras dans la zone de premier écran.
• Liste à puces : les différences de hauteur de ligne s'accumulent. Une liste de 10 items avec 1 px de différence par ligne = 10 px de décalage total.
• Titres h2/h3 : les titres sont souvent en tête de contenu, chargés en premier. Un h2 de grande taille amplifie visuellement toute différence.
• Tableau : le cas le plus complexe. Chaque cellule est un conteneur indépendant dont la hauteur est calculée séparément.
• Couverture glyphique : chaque caractère répété 30 fois. Permet de repérer des glyphes individuels qui se comportent différemment.
• Personnalisé : saisissez votre propre texte ou HTML pour tester avec votre contenu réel. Sauvegardé en localStorage.

size-adjust 50 % – 150 %, défaut : 100 %

Le paramètre le plus impactant. Il met à l'échelle l'ensemble des glyphes de la police de repli de façon proportionnelle, modifiant ainsi la largeur des caractères et donc les retours à la ligne.

Comment l'utiliser : commencez par ajuster ce curseur jusqu'à ce que les retours à la ligne soient identiques entre les deux calques. Si votre police personnalisée est plus étroite qu'Arial, une valeur inférieure à 100 % réduira les caractères du repli pour s'en rapprocher.

C'est souvent le seul paramètre nécessaire pour les polices proches des standards système. Les autres permettent un ajustement fin de la position verticale du texte.

ascent-override 0 % – 200 %, ou « normal »

Contrôle l'espace alloué au-dessus de la ligne de base (baseline). La valeur « normal » utilise la métrique native de la police de repli.

Quand le modifier : quand, même après avoir ajusté size-adjust, les blocs de texte ne sont pas à la même hauteur verticale entre les deux calques. Typiquement visible quand les titres ou le début du texte ne s'alignent pas.

descent-override 0 % – 100 %, ou « normal »

Contrôle l'espace alloué en dessous de la ligne de base. La valeur « normal » utilise la métrique native.

Quand le modifier : quand le bas des blocs de texte ne s'aligne pas, notamment visible sur la dernière ligne d'un paragraphe ou la hauteur totale d'un bloc.

line-gap-override 0 % – 100 %, ou « normal »

Contrôle l'espace supplémentaire entre les lignes (line gap). Distinct de line-height en CSS : c'est une métrique intrinsèque de la police.

Quand le modifier : quand la hauteur totale d'un bloc de texte diffère encore entre les deux calques après avoir calibré size-adjust, ascent-override et descent-override.

Le piège du line-height

Subtilité importante du spec CSS : line-gap-override (ainsi que ascent-override et descent-override) ne s'applique que lorsque le rendu utilise line-height: normal. Si la page définit un line-height numérique (1.5, 24px, etc.), le navigateur utilise cette valeur et ignore complètement les overrides de métriques.

Comme la quasi-totalité des sites de production définit un line-height explicite, line-gap-override n'a généralement aucun effet visible en production. C'est pour cela qu'on recommande de le laisser à normal dans 99 % des cas.

Le comportement automatique de l'outil

Pour rendre les overrides de métriques pédagogiques, le mode d'aperçu utilise par défaut un line-height numérique de 1.35 (typique d'un site de production). Les calques s'alignent proprement et vous calibrez size-adjust, ascent-override et descent-override dans les conditions réelles.

Dès que vous décochez « normal » sur n'importe quel line-gap-override (Fallback 1 ou 2, n'importe quel stack), l'aperçu bascule automatiquement en line-height: normal pour que votre réglage soit visible. Un avertissement orangé apparaît sous le slider pour rappeler que cet override n'aura probablement pas d'effet en production.

Modes de prévisualisation

Clignoter

Alterne entre la police originale et la police de repli toutes les 500 ms. Quand le texte ne bouge pas pendant le clignotement, le repli est parfaitement calibré. C'est le test décisif.

Lignes

Affiche des lignes de référence typographiques (soulignement + surlignement) sur chaque élément de texte. Permet de comparer visuellement l'alignement des lignes de base entre les deux calques sans dépendre uniquement des couleurs.

Couleurs des calques

En mode clair, les deux calques utilisent mix-blend-mode: multiply sur fond blanc :

• Les zones où les deux calques se superposent parfaitement apparaissent en couleur mélangée (neutre foncé).
• Les zones où il y a un décalage montrent chacun des calques dans sa couleur.

En mode sombre, mix-blend-mode: screen est utilisé avec des couleurs claires, produisant le même effet inverse sur fond sombre.

Cliquez sur l'icône palette à côté du nom de chaque police pour personnaliser sa couleur. Le choix est sauvegardé par thème en localStorage.

Étape Test A/B

Cette étape simule le chargement réel de votre police avec un délai paramétrable, et compare visuellement le résultat dans deux panneaux :

• Sans fallback ajusté — le navigateur n'a que la police générique (sans-serif/serif). Quand la vraie police arrive, ce panneau saute (effet rouge pulsé) — c'est le CLS qu'on cherche à éliminer.
• Avec fallback ajusté — le navigateur utilise vos overrides @font-face. Si vos métriques sont bien calibrées, ce panneau ne saute pas.

Connexion réseau : choisissez parmi Wi-Fi (300 ms), Fast 3G (1.5 s), Slow 3G (4 s) ou un délai personnalisé via la modale (100 ms à 10 s).

Échantillon de texte : sélectionnez le même type de contenu que dans l'aperçu (paragraphe, titres, liste, tableau…).

Taille de la police : slider 14–36 px, partagé avec l'aperçu des étapes Fallback 1/2 (la valeur est sauvegardée en localStorage).

Le delta en pixels entre l'avant et l'après-swap est mesuré et affiché à droite de chaque panneau quand un saut est détecté.