Typographie
Les familles de polices sont chargées dans src/app/layout.tsx via next/font/google. Les classes typographiques sont des utilitaires Tailwind, pas des CSS vars — cette page documente leur usage dans les composants Patrimo.
Familles
| Variable CSS | Famille | Usage |
|---|---|---|
--font-ibm | IBM Plex Sans | Corps, navigation, labels, titres |
--font-mono | IBM Plex Mono | Montants financiers, chiffres tabulaires |
Chargement : next/font/google dans src/app/layout.tsx.
Poids IBM Plex Sans : 300, 400, 500, 600, 700 (normal + italic) Poids IBM Plex Mono : 400, 500, 600
Échelle typographique
| Contexte | Classes Tailwind |
|---|---|
| Valeur KPI principale | text-3xl font-bold tabular-nums leading-none |
| Valeur solde (AccountCard) | text-2xl font-bold tabular-nums |
| Titre page login | text-3xl font-bold tracking-tight |
| Nom de compte | text-sm font-semibold |
| Navigation active | text-sm font-medium |
| Label de section (KPI, carte) | text-xs font-medium uppercase tracking-widest |
| Label input / section login | text-xs font-medium uppercase tracking-wider |
| Institution, metadata | text-xs |
La classe .tabular-nums
Définie dans globals.css :
.tabular-nums {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
Règle absolue : tout montant financier affiché utilise .tabular-nums. Cela garantit :
- L'alignement vertical des colonnes de chiffres dans les tableaux
- La largeur fixe des chiffres (pas de « 1 » plus étroit que « 8 »)
- La lecture en un coup d'œil des variations (les décimales s'alignent)
À faire
<span className="text-3xl font-bold tabular-nums">124 500,00 €</span>
À ne pas faire
{/* sans tabular-nums : les colonnes de chiffres se déforment */}
<span className="text-3xl font-bold">124 500,00 €</span>
Formatage locale
Les montants sont formatés via Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }) avant d'être passés aux composants. Cela garantit :
- Séparateur de milliers correct (espace insécable en FR)
- Virgule décimale (pas de point)
- Symbole de devise selon la locale
Le composant lui-même ne formate jamais — il affiche une string déjà formatée. Voir AccountCard — props.