Qu’est-ce qu’une échelle typographique modulaire ?
Une échelle modulaire multiplie une taille de base par le même ratio, encore et encore : avec une base de 16px et un ratio de 1,25, vous obtenez 16, 20, 25, 31,25 et ainsi de suite, et en divisant, les niveaux inférieurs 12,8 et 10,24. Comme toutes les tailles sont liées par un seul ratio, titres, texte courant et légendes semblent appartenir à la même famille.
Pourquoi deux ratios
Un petit écran ne peut pas accueillir un contraste spectaculaire entre titres et texte, alors qu’un grand écran paraît plat sans lui. Ce générateur prend donc un ratio pour le viewport minimal et un autre pour le maximal. Une combinaison courante associe une tierce mineure (1,2) sur mobile et une tierce majeure (1,25) ou une quarte juste (1,333) sur ordinateur. Chaque niveau devient alors sa propre valeur clamp(), qui passe de la petite à la grande échelle à mesure que le viewport s’élargit.
Utiliser les variables exportées
L’export est un bloc :root contenant des variables de --step--2 à --step-6. Attribuez-les aux éléments, par exemple h1 au niveau 5, h2 au niveau 4, le texte courant au niveau 0 et les petits caractères au niveau −1. Comme les noms décrivent des positions dans l’échelle et non des éléments, vous pourrez réajuster tout le système plus tard en changeant seulement la taille de base et les ratios.
Surveillez les niveaux les plus élevés : avec un grand ratio, ils peuvent dépasser la limite de zoom de 2,5× issue du critère WCAG 1.4.4. Le tableau indique la taille aux deux extrémités de la plage pour repérer les niveaux qui grandissent trop vite et réduire au besoin le ratio sur ordinateur.
Choisir un ratio
Les petits ratios comme 1,125 ou 1,2 conviennent aux interfaces denses, tableaux de bord et documentations. Les ratios moyens comme 1,25 et 1,333 sont polyvalents pour les pages marketing et les blogs. Les grands ratios comme 1,5 ou le nombre d’or 1,618 créent un fort contraste éditorial, mais demandent moins de niveaux pour rester exploitables.