Typographie

Inter, échelle modulaire, hiérarchie

Famille principale : Inter

Inter est la seule famille typographique utilisée par Gradly. Elle est chargée via @fontsource-variable/inter (self-hosted, pas d’appel à Google Fonts).

Variable font : un seul fichier .woff2 couvre tous les poids de 100 à 900
Latin étendu : supporte le français avec tous les accents et caractères spéciaux
Fallback : system-ui, -apple-system, sans-serif

Dans global.css :

--font-sans: 'Inter', system-ui, -apple-system, sans-serif;

Échelle modulaire

Gradly utilise l’échelle Tailwind par défaut, du plus petit au plus grand :

Note discrète, label de formulaire, copyright footer.

Texte secondaire, captions, metadata.

Texte principal du corps, paragraphes standards.

Sous-titres, emphase ponctuelle.

Intros de paragraphe, sous-titres de sections.

H3, titres de cartes.

H2, titres de sections principales.

H1 (mobile), titres de pages.

H1 hero desktop.

Hero headlines, cover display.

Poids utilisés

Inter est chargé en version variable : tous les poids (100 à 900) sont disponibles dans un seul fichier .woff2.

Poids	Usage
400 (regular)	Texte courant
500 (medium)	Sous-titres, boutons
600 (semibold)	Emphases
700 (bold)	H2, H3
800 (extrabold)	H1, display

Ne pas utiliser 100, 200, 300 (trop fins pour notre hiérarchie) ni 900 (trop lourd, casse le rythme).

Hiérarchie des titres

Exemple d’utilisation concrète dans une page du site :

<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight">
  Bulletins RNCP et preuves Qualiopi en 3 clics.
</h1>

<h2 class="text-3xl lg:text-4xl font-bold mb-4">
  Fonctionnalités
</h2>

<h3 class="text-xl font-semibold mb-2">
  Suivi des compétences
</h3>

Note : les H1 sur écran desktop utilisent text-5xl ou text-6xl (48 à 60 px) avec font-extrabold (800) pour un contraste visuel fort, et leading-tight (line-height 1.25) pour compacter.

Letter-spacing

Par défaut, letter-spacing normal. Exceptions :

Titres display (text-5xl et +) : tracking-tight (letter-spacing -0.025em) pour un rendu plus serré
Labels en capitales (badges, chapeaux d’articles) : tracking-wider (letter-spacing 0.05em)

Line-height

Taille	Line-height
Titres display	`leading-tight` (1.25) ou `leading-none` (1)
Sous-titres	`leading-tight` (1.25)
Texte courant	`leading-relaxed` (1.625)
Longs paragraphes	`leading-loose` (2)