Typographie
Le DSBJ s’appuie sur Montserrat pour l’interface, Spectral pour le contenu éditorial ou les citations, et une pile monospace pour le code.
Familles de polices
| Rôle | Variable CSS | Exemple |
|---|---|---|
| Sans-serif (corps) | --bj-font-sans | Montserrat - Services en ligne |
| Serif | --bj-font-serif | Spectral - Texte institutionnel |
| Monospace | --bj-font-mono | npm install @flrxnt/dsbj |
Titres d’affichage
Classes bj-display-xl à bj-display-sm - tailles renforcées à partir du breakpoint LG.
bj-display-xl
bj-display-lg
bj-display-md
bj-display-sm
<p class="bj-display-xl">…</p>
<p class="bj-display-lg">…</p>
<p class="bj-display-md">…</p>
<p class="bj-display-sm">…</p>Niveaux de titre
Balises h1–h6 ou classes bj-h1–bj-h6.
Titre niveau 1
Titre niveau 2
Titre niveau 3
Titre niveau 4
Titre niveau 5
Titre niveau 6
<h1 class="bj-h1">…</h1>
<h2 class="bj-h2">…</h2>
<!-- … -->Tailles de texte courant
bj-text-lg - Texte d’introduction ou mise en avant.
bj-text-md - Taille par défaut du corps (équivalent au body).
bj-text-sm - Métadonnées, légendes, aides de formulaire.
bj-text-xs - Mentions légales, précisions discrètes.
<p class="bj-text-lg">…</p>
<p class="bj-text-md">…</p>
<p class="bj-text-sm">…</p>
<p class="bj-text-xs">…</p>Graisses
| Nom | Jeton | Valeur | Classes |
|---|---|---|---|
| Regular | --bj-fw-regular | 400 | bj-text-regular |
| Medium | --bj-fw-medium | 500 | bj-text-medium |
| Semibold | --bj-fw-semibold | 600 | bj-text-semibold |
| Bold | --bj-fw-bold | 700 | bj-text-bold |
Variables d’échelle
Tailles de police (--bj-fs-*), interlignes (--bj-lh-*) et graisses (--bj-fw-*) sont définies sur :root.
| Catégorie | Jetons |
|---|---|
| Tailles | --bj-fs-xs à --bj-fs-6xl |
| Interligne | --bj-lh-tight, --bj-lh-normal, --bj-lh-loose |
| Graisse | --bj-fw-regular, --bj-fw-medium, --bj-fw-semibold, --bj-fw-bold |