Fondations

Typographie

Une seule famille pour tout Forme : Aeonik pour le corps et les titres, Aeonik Mono pour le code. Les fichiers woff2 sont auto-hébergés dans /public/fonts ; tu ne charges rien depuis un CDN. Les familles se réfèrent par token — jamais par nom littéral.

font-family: var(--font-family-body);    /* Aeonik */
font-family: var(--font-family-heading); /* Aeonik */
font-family: var(--font-family-code);    /* Aeonik Mono */

Règle absolue. 15px est interdit. On ne sort jamais de l'échelle --font-size-*. Toute taille de texte vient d'un cran de cette échelle (ou d'un rôle sémantique qui l'emballe). Pas de font-size arbitraire.

Échelle `--font-size-*`

Douze crans, du plus petit au plus grand. Chaque ligne est rendue à sa taille réelle.

--font-size-4xs .375rem · 6px Forme Design System

--font-size-3xs .4375rem · 7px Forme Design System

--font-size-2xs .5rem · 8px Forme Design System

--font-size-xs .625rem · 10px Forme Design System

--font-size-sm .75rem · 12px Forme Design System

--font-size-base .875rem · 14px Forme Design System

--font-size-lg 1.0625rem · 17px Forme Design System

--font-size-xl 1.25rem · 20px Forme Design System

--font-size-2xl 1.5rem · 24px Forme Design System

--font-size-3xl 1.8125rem · 29px Forme Design System

--font-size-4xl 2.1875rem · 35px Forme Design System

--font-size-5xl 2.625rem · 42px Forme Design System

Rôles sémantiques `--text-*`

Chaque rôle emballe une taille, une graisse et un interligne cohérents. On réfère un rôle plutôt qu'un cran brut dès qu'un sens existe (titre, corps, libellé) : c'est le niveau d'abstraction du quotidien. Les balises h1…h6, p, small, code sont déjà câblées sur ces rôles par le thème.

--text-display-1 Forme Titrage héroïque, pages de couverture.

--text-display-2 Forme Grand titrage éditorial.

--text-display-3 Forme Titrage secondaire.

--text-heading-1 Forme Titre de page (h1).

--text-heading-2 Forme Titre de section (h2).

--text-heading-3 Forme Sous-section (h3).

--text-heading-4 Forme h4.

--text-heading-5 Forme h5.

--text-heading-6 Forme h6.

--text-large Forme Chapô, intro, texte mis en avant.

--text-label Forme Libellés de champs, méta.

--text-body Forme Corps de texte courant.

--text-supporting Forme Texte secondaire, aides.

--text-code Forme Monospace inline / blocs.

Chaque rôle expose trois sous-tokens : --text-heading-1-size, --text-heading-1-weight, --text-heading-1-leading.

Interligne & graisses

L'interligne (leading) et la graisse (weight) sont portés par le rôle, pas fixés à la main : réfère --text-body-leading et --text-heading-2-weight plutôt qu'un nombre. Aeonik est fournie en Regular et Medium (préchargées) ; ne simule jamais une graisse absente en gras synthétique.

✓ À faire

Réfère un cran de l'échelle ou, mieux, un rôle sémantique : font-size: var(--font-size-lg) ou var(--text-heading-2-size).

✕ À éviter

Écrire font-size: 15px (interdit) ou toute valeur hors échelle. La cohérence typographique inter-apps en dépend.