TypographieTypography
Police principale : Atkinson Hyperlegible — conçue pour la basse vision, différenciation maximale des caractères ambigus (l/1, O/0, b/d). Trois niveaux : body, label, heading. Jamais de valeur en dur. Primary typeface: Atkinson Hyperlegible — designed for low vision, maximum disambiguation of ambiguous characters (l/1, O/0, b/d). Three levels: body, label, heading. No hardcoded values.
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.
Spécimens typographiquesType specimens
Heading —
--sda-semantic-typography-heading-size · weight 700Titre de section principal
Body —
--sda-semantic-typography-body-size · weight 400Texte courant. Ce paragraphe illustre la lisibilité du texte principal avec le token body. L'interlignage de 1.5 assure une lecture confortable sur tous les écrans et résolutions.
Label —
--sda-semantic-typography-label-size · weight 500→400Label de bouton · Champ de formulaire · Badge de statut
Tokens sémantiquesSemantic tokens
| Token CSS | ValeurValue | IntentionIntent |
|---|---|---|
--sda-semantic-typography-fontFamily | Police système — Atkinson Hyperlegible (accessibilité basse vision)System typeface — Atkinson Hyperlegible (low-vision accessibility) | |
--sda-semantic-typography-body-size | Taille du texte courantBody text size | |
--sda-semantic-typography-body-weight | Graisse du texte courantBody text weight | |
--sda-semantic-typography-body-line-height | Interlignage du texte courantBody line height | |
--sda-semantic-typography-label-size | Taille des labels et libellés de boutonsLabel and button text size | |
--sda-semantic-typography-label-weight | Graisse des labels (arrondie à 400 — Atkinson n'a pas de 500)Label weight (rounded to 400 — Atkinson has no 500) | |
--sda-semantic-typography-label-line-height | Interlignage compact des labelsCompact label line height | |
--sda-semantic-typography-heading-size | Taille des titres de sectionSection heading size | |
--sda-semantic-typography-heading-weight | Graisse bold pour hiérarchie forteBold weight for strong hierarchy | |
--sda-semantic-typography-heading-line-height | Interlignage compact des titresCompact heading line height |
RèglesRules
-
font-size: 16px— utiliserusevar(--sda-semantic-typography-body-size) -
font-family: 'Atkinson Hyperlegible'— utiliserusevar(--sda-semantic-typography-fontFamily) -
font-weight: bold— utiliserusevar(--sda-semantic-typography-heading-weight) - Import Google Fonts :Google Fonts import:
family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700 - Toujours définir
line-heightvia un token sémantiqueAlways setline-heightvia a semantic token