story-research-zapwall/docs/ui-typography-reference.md

Référence Typographie et Espacement

Auteur : Équipe 4NK Date : 2025-01-27

Système de tailles de texte

Hiérarchie typographique

Usage	Classe Tailwind	Taille	Exemple
Métadonnées, labels	text-xs	12px	Dates, catégories, badges
Texte secondaire	text-sm	14px	Descriptions, helper text
Corps de texte	text-base	16px	Contenu principal (défaut)
Sous-titres	text-lg	18px	Titres de sections
Titres de sections	text-xl	20px	Titres de modals
Titres principaux	text-2xl	24px	Titres d'articles, pages
Titres hero	text-3xl+	30px+	Titres de landing

Poids de police

Usage	Classe	Poids
Texte courant	font-normal	400
Emphase légère	font-medium	500
Emphase moyenne	font-semibold	600
Titres, CTA	font-bold	700

Espacement

Échelle Tailwind (4px base)

• gap-2 : 8px - Espacement serré (icônes, badges)
• gap-4 : 16px - Espacement standard (éléments de liste)
• gap-6 : 24px - Espacement large (sections)
• gap-8 : 32px - Espacement très large (sections principales)

Padding

• Cards : p-4 (compact) ou p-6 (standard)
• Containers : px-4 py-8 (mobile) ou px-6 py-12 (desktop)
• Sections : mb-8 ou mb-12 entre sections

Marges verticales

• Entre éléments liés : mb-2 à mb-4
• Entre sections : mb-8 à mb-12
• Espacement de page : py-8 (mobile) ou py-12 (desktop)

Largeur de ligne optimale

Pour le contenu de lecture :

• Utiliser max-w-prose pour le contenu texte
• Largeur max ~65-75 caractères
• Padding horizontal : px-4 (mobile) ou px-6 (desktop)

Exemples d'utilisation

Titre de page

<h1 className="text-2xl font-bold text-neon-cyan mb-4">Titre de page</h1>

Titre de section

<h2 className="text-lg font-semibold text-neon-cyan mb-2">Section</h2>

Corps de texte

<p className="text-base text-cyber-accent">Contenu principal</p>

Texte secondaire

<p className="text-sm text-cyber-accent/70">Description ou helper text</p>

Métadonnées

<span className="text-xs text-cyber-accent/50">Date, catégorie</span>