TypographieTypography
Police principale : Atkinson Hyperlegible — conçue pour la basse vision. Échelle Minor Third (ratio 1.200, 9 échelons xs→5xl) arrondie au multiple de 4px. Trois modes de line-height : reading (1.6), heading (1.1), display (1.0). Voir ADR-023.
Primary typeface: Atkinson Hyperlegible — designed for low vision. Minor Third scale (ratio 1.200, 9 steps xs→5xl) rounded to 4px multiples. Three line-height modes: reading (1.6), heading (1.1), display (1.0). See ADR-023.
Police — Atkinson HyperlegibleTypeface — Atkinson Hyperlegible
--sda-semantic-typography-fontFamily
2 graisses disponibles : Regular (400) · Bold (700). Le token fontWeight.medium (500) s'arrondit à 400.
2 weights available: Regular (400) · Bold (700). The fontWeight.medium token (500) rounds to 400.
Échelle Minor Third — 9 échelonsMinor Third scale — 9 steps
Ratio : 1.200 (tierce mineure). Chaque échelon = échelon précédent × 1.2, arrondi au multiple de 4px le plus proche. Unité rem pour respecter le zoom navigateur (WCAG 1.4.4).
Ratio: 1.200 (minor third). Each step = previous step × 1.2, rounded to the nearest 4px multiple. rem unit to honour browser zoom (WCAG 1.4.4).
5xl
4xl
3xl
2xl
xl
lg
base
sm
xs
Tableau — primitifs fontSizeTable — fontSize primitives
| ÉchelonStep | Valeur rem (px)Value rem (px) | Line-height | Weight | RôleRole |
|---|---|---|---|---|
fontSize.5xl |
3rem (48px) | 1.0 | 700 | Hero display |
fontSize.4xl |
2.5rem (40px) | 1.0 | 700 | Heading 1 |
fontSize.3xl |
2rem (32px) | 1.0 | 700 | Heading 2 |
fontSize.2xl |
1.75rem (28px) | 1.1 | 700 | Heading 3 |
fontSize.xl |
1.5rem (24px) | 1.1 | 700 | Heading 4 |
fontSize.lg |
1.25rem (20px) | 1.1 | 700 | Heading 5 |
fontSize.base |
1rem (16px) | 1.6 | 400 | Body |
fontSize.sm |
0.875rem (14px) | 1.6 | 400 | Label / metadata |
fontSize.xs |
0.75rem (12px) | 1.6 | 400 | Detail / caption |
Modes de line-heightLine-height modes
reading — 1.6heading — 1.1display — 1.0RèglesRules
-
font-size: 16px— utiliserusevar(--sda-primitive-fontSize-base) -
font-family: 'Atkinson Hyperlegible'— utiliserusevar(--sda-semantic-typography-fontFamily) -
font-weight: bold— utiliserusevar(--sda-primitive-fontWeight-bold) - Taille hors-échelle :Off-scale size:
15px,18px,22px— choisir l'échelon Minor Third le plus prochepick the closest Minor Third step - Import Google Fonts :Google Fonts import:
family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700 - Toujours choisir le mode
lineHeightselon le rôle :reading≤ base,headingpour lg–2xl,displaypour 3xl+Always pick thelineHeightmode for the role:reading≤ base,headingfor lg–2xl,displayfor 3xl+