---
title: "Typographie"
description: "Une famille de variables utilisée sérieusement — Bricolage Grotesque, axes opsz 12–96 et poids 200–800."
---

## Une famille, trois axes

Nibiru utilise **Bricolage Grotesque** (gratuit, Google Fonts) pour chaque élément de texte. L'astuce réside dans le fait qu'il s'agit d'une **police variable** avec deux axes significatifs :

- **Taille optique (`opsz`, 12–96)** — les tailles d'affichage deviennent plus caractéristiques, étroites et légèrement carrées ; les tailles de corps sont plus calmes et ouvertes.
- **Poids (`wght`, 200–800)** — plage complète disponible.
- **Italique** — italique véritable, pas incliné.

Donc un seul fichier de police nous donne une police d'affichage *et* une police de corps. Pas besoin de charger des polices supplémentaires.
```css
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-variation-settings: 'opsz' 96, 'wght' 600;   /* display */
font-variation-settings: 'opsz' 14, 'wght' 400;   /* body */
```
Le code utilise **JetBrains Mono** car il est discrètement excellent pour le code et s'associe bien.

## Préréglages de variation (les éléments de base)

| Token | Variation | Use |
|---|---|---|
| `--nibiru-fv-display-hero`   | `'opsz' 96, 'wght' 600` | Hero H1 |
| `--nibiru-fv-display-large`  | `'opsz' 64, 'wght' 600` | H2 |
| `--nibiru-fv-display-medium` | `'opsz' 36, 'wght' 600` | H3 |
| `--nibiru-fv-heading-small`  | `'opsz' 18, 'wght' 600` | H4 |
| `--nibiru-fv-lead`           | `'opsz' 24, 'wght' 400` | Paragraphe de lead |
| `--nibiru-fv-body`           | `'opsz' 14, 'wght' 400` | Corps du texte |
| `--nibiru-fv-body-bold`      | `'opsz' 14, 'wght' 600` | Texte en gras |
| `--nibiru-fv-label`          | `'opsz' 12, 'wght' 600` | Étiquettes, eyebrow |

## Échelle de taille

| Token | Taille | Utilisation |
|---|---|---|
| `--nibiru-text-xs`   | 0,72rem | Sourcils / étiquettes |
| `--nibiru-text-sm`   | 0,85rem | Sous-titres |
| `--nibiru-text-md`   | 0,92rem | Contrôles d'interface utilisateur, barre latérale |
| `--nibiru-text-base` | 1,00rem | Corps |
| `--nibiru-text-lg`   | 1,18rem | Paragraphe de lead |
| `--nibiru-text-xl`   | 1,45rem | Intros de section |
| `--nibiru-text-2xl`  | 2,00rem | H3 |
| `--nibiru-text-3xl`  | 2,60rem | H2 |
| `--nibiru-text-hero` | clamp(2,6rem, 1,8rem + 4vw, 4,8rem) | H1, héros |

## Suivi

Le suivi se renforce à mesure que la taille augmente — c'est ainsi que vous maintenez un héros ressentant de la densité et un corps ressentant de l'ouverture.

| Token | Valeur | Utilisation |
|---|---|---|
| `--nibiru-tracking-display` | −0.04em | Héros / H1 |
| `--nibiru-tracking-heading` | −0.025em | H2, H3 |
| `--nibiru-tracking-body`    | −0.005em | Corps du texte |
| `--nibiru-tracking-label`   | 0.10em | Étiquettes en majuscules |
| `--nibiru-tracking-eyebrow` | 0.22em | Eyebrow de l'héro, numéros de section |

## Un héros, écrit à la main
```css
h1.atelier-hero__title {
  font-family: var(--nibiru-font-display);
  font-variation-settings: var(--nibiru-fv-display-hero);
  font-size:        var(--nibiru-text-hero);
  letter-spacing:   var(--nibiru-tracking-display);
  line-height:      0.96;
  color:            var(--nibiru-ink);
  max-width:        16ch;
}

h1.atelier-hero__title em {
  font-style: normal;
  color: var(--nibiru-iris-deep);
  position: relative;
}
h1.atelier-hero__title em::after {
  content: '';
  position: absolute;
  inset: auto 0 0.05em 0;
  height: 0.18em;
  background: var(--nibiru-aurum);
  opacity: 0.3;
  z-index: -1;
}
```
C'est un héros. Le mot italique obtient une simple soulignature en or. Rien d'autre n'a besoin de décoration.

## Un corps, écrit à la main
```css
body, .prose p {
  font-family: var(--nibiru-font-text);
  font-variation-settings: var(--nibiru-fv-body);
  font-size: var(--nibiru-text-base);
  line-height: 1.7;
  letter-spacing: var(--nibiru-tracking-body);
  color: var(--nibiru-ink);
}
```
## Ne faites pas

- Ne utilisez pas Bricolage Grotesque à la même taille d'opérateur (OPSZ) pour le héros et le corps — cela gaspille son axe variable.
- Ne mettez pas en gras le texte du corps en dessous de `wght: 600`. En dessous de 600, il ne semble pas gras.
- Ne suivez pas un espacement positif pour le texte d'affichage. Compressez-le au fur et à mesure que la taille augmente.
- Ne utilisez pas Bricolage Italic pour des phrases entières — utilisez-le pour des mots simples dans un titre. La technique "*Impress.*" sur la page de démarrage est la référence.
