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

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0 1 2 3 4 5 6 7 8 9

! @ # $ % & * ( ) [ ] { } , . ; : ' " - _ / ? + = < >

Caractères ambigus — différenciation maximaleAmbiguous characters — maximum disambiguation l 1 I · O 0 · b d p q · n u m · rn m

Caractères accentuésAccented characters À Â Ä Æ Ç É È Ê Ë Î Ï Ô Œ Ù Û Ü à â ä æ ç é è ê ë î ï ô œ ù û ü

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

Hero display

3rem · lh 1.0

4xl

Heading 1

2.5rem · lh 1.0

3xl

Heading 2

2rem · lh 1.0

2xl

Heading 3

1.75rem · lh 1.1

xl

Heading 4

1.5rem · lh 1.1

lg

Heading 5

1.25rem · lh 1.1

base

Body

1rem · lh 1.6

sm

Label / metadata

0.875rem · lh 1.6

xs

Detail / caption

0.75rem · lh 1.6

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.6

Texte courant, labels, captions. Conforme WCAG 1.4.12. Maximise le confort de lecture sur plusieurs lignes.Body text, labels, captions. Conforms to WCAG 1.4.12. Maximises reading comfort across multiple lines.

heading — 1.1

Titres h5 → h3. Compact sans être étouffant.Headings h5 → h3. Compact without feeling cramped.

display — 1.0

h2, h1, hero.h2, h1, hero.

RèglesRules

font-size: 16px — utiliseruse var(--sda-primitive-fontSize-base)
font-family: 'Atkinson Hyperlegible' — utiliseruse var(--sda-semantic-typography-fontFamily)
font-weight: bold — utiliseruse var(--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 lineHeight selon le rôle : reading ≤ base, heading pour lg–2xl, display pour 3xl+Always pick the lineHeight mode for the role: reading ≤ base, heading for lg–2xl, display for 3xl+