Échelle typographique : Minor Third rem + règles de line-height

English summary: Establishes a rem-based Minor Third (1.2 ratio) type scale, rounded to the 4px grid, running from xs (12px) to 5xl (48px), with three line-height rules assigned by context (1.6 for reading text, 1.1 for mid-size headings, 1.0 for display sizes) to satisfy WCAG 1.4.4 and 1.4.12.

>

*The original French version follows below — preserved unaltered as the historical record.*

Contexte

L'échelle typographique précédente comportait 3 tailles (sm/md/xl en px) sans logique d'échelle formalisée, sans gestion du line-height par contexte, et sans distinction entre les besoins des contextes marketing, e-commerce et SaaS. L'objectif est une échelle accessible, cohérente, et adaptée aux profils d'usage.

Situation avant

"fontSize": {
  "sm": "14px",
  "md": "16px",
  "xl": "24px"
},
"lineHeight": {
  "tight": "1.25",
  "normal": "1.5"
}

Trois tailles en px, deux line-heights sans règles d'assignation.

Décision

Unité : rem (relatif à la base navigateur)

Toutes les tailles de police sont exprimées en rem (reference = 1rem = 16px). Cette convention :

• Respecte les préférences de zoom utilisateur (accessibilité WCAG)
• Permet aux utilisateurs malvoyants d'agrandir sans casser les mises en page relatives
• Reste compatible avec la grille 4px (les px équivalents sont des multiples de 4)

Échelle : Minor Third (ratio 1.2)

L'échelle des grandes tailles (titres) suit la gamme musicale Minor Third (ratio 1.2), arrondie au multiple de 4px le plus proche pour respecter la grille.

16px × 1.200¹ = 19.2  → 20px  (lg)
16px × 1.200² = 23.0  → 24px  (xl)
16px × 1.200³ = 27.6  → 28px  (2xl)
16px × 1.200⁴ = 33.2  → 32px  (3xl)
16px × 1.200⁵ = 39.8  → 40px  (4xl)