---
title: "Typografie"
description: "Eine Variable-Familie wird ernsthaft verwendet – Bricolage Grotesque, Achsen opsz 12–96 und Gewicht 200–800."
---

## Eine Familie, drei Achsen

Nibiru verwendet **Bricolage Grotesque** (kostenlos, Google Fonts) für jeden Textabschnitt. Der Trick ist, dass es sich um eine **variablen Schriftart** handelt, die zwei sinnvolle Achsen hat:

- **Optische Größe (`opsz`, 12–96)** — Anzeigegrößen werden zeichnerischer, gestenkt und leicht quadratischer; Textgrößen werden ruhiger und offener.
- **Gewicht (`wght`, 200–800)** — gesamter Bereich verfügbar.
- **Kursiv** — echtes Kursivschrift, nicht geneigt.

Also eine einzelne Schriftdatei bietet uns eine Anzeigeschriftart *und* eine Körperschriftart. Es ist keine Notwendigkeit, zusätzliche Schriftarten zu laden.
```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 */
```
Der Code verwendet **JetBrains Mono**, da er leise ausgezeichnet ist und gut zusammenpasst.

## Variationsvorlagen (die Bausteine)

| 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` | Lead paragraph |
| `--nibiru-fv-body`           | `'opsz' 14, 'wght' 400` | Body |
| `--nibiru-fv-body-bold`      | `'opsz' 14, 'wght' 600` | Strong |
| `--nibiru-fv-label`          | `'opsz' 12, 'wght' 600` | Labels, eyebrow |

## Schriftgradskala

| Token | Größe | Verwendung |
|---|---|---|
| `--nibiru-text-xs`   | 0,72rem | Eyebrow / Labels |
| `--nibiru-text-sm`   | 0,85rem | Captions |
| `--nibiru-text-md`   | 0,92rem | UI Steuerelemente, Seitenleiste |
| `--nibiru-text-base` | 1,00rem | Haupttext |
| `--nibiru-text-lg`   | 1,18rem | Leitabsatz |
| `--nibiru-text-xl`   | 1,45rem | Abschnittseinführungen |
| `--nibiru-text-2xl`  | 2,00rem | H3 |
| `--nibiru-text-3xl`  | 2,60rem | H2 |
| `--nibiru-text-hero` | clamp(2,6rem, 1,8rem + 4vw, 4,8rem) | H1, Hero |

## Verfolgung

Die Verfolgung wird enger, je größer die Größe ist – so bleibt ein Held dicht gefühlt und der Körper offen.

| Token | Wert | Verwendung |
|---|---|---|
| `--nibiru-tracking-display` | −0.04em | Hero / H1 |
| `--nibiru-tracking-heading` | −0.025em | H2, H3 |
| `--nibiru-tracking-body`    | −0.005em | Body |
| `--nibiru-tracking-label`   | 0.10em | Großbuchstaben-Labels |
| `--nibiru-tracking-eyebrow` | 0.22em | Hero Eyebrow, Abschnittszahlen |

## Ein Held, ausgeschrieben
```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;
}
```
Das ist ein Held. Das kursive Wort erhält eine einzelne Goldbleistiftunterstrichung. Nichts anderes braucht Dekoration.

## Ein Körper, ausgeschrieben
```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);
}
```
## Verboten

- Verwenden Sie nicht Bricolage Grotesque für Hero und Body im gleichen OPSZ – das verschwendet seine variable Achse.
- Verwenden Sie keine Fettschrift für Text unter `wght: 600`. Unter 600 wird es nicht als fett gelesen.
- Verwenden Sie keine positive Tracking für Displaytext. Verengen Sie es, wenn die Größe zunimmt.
- Verwenden Sie nicht Bricolage Italic für ganze Sätze – verwenden Sie es für einzelne Wörter innerhalb eines Überschriften. Der "Impress." Trick auf der Splash Page ist das Beispiel.
