Typografie

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.

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

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

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.