#Typografie- & Brand-Regelwerk
Quelle: das ratifizierte ZZ Typography System (CI Guide v1,
discord.zabazingo.eu/typography.html). Diese Seite rendert die Regeln mit den echten ZABAZINGO-Schriften (lokal ausgeliefert, keine CDN-Substitute). Body min. 16px. Wortmarken einfarbig — Akzent läuft ausschließlich über Gewicht, nie über Farbe.
#Zwei Stimmen, scharfe Rollen
Display trägt die Brand-Stimme — Headlines, Wortmarken, Heros. Sans trägt den Body — UI, Text, Editorial. Es gibt keine dritte Schrift im System.
| Display · Serif | Sans · Neo-Grotesque | |
|---|---|---|
| Schrift | Noto Serif Display ExtraCondensed | PP Neue Montreal |
| Cuts | ExtraLight 200 · Regular 400 · Bold 700 | Light 300 · Regular 400 · Semibold 600 · Bold 700 |
| Einsatz | Headlines, Wortmarken, Brand-Elemente | UI, Body, Editorial, Captions, Buttons, Labels |
| Tracking | −0.05em (default) | −0.015em (Headlines) · 0 (Body) · +0.14em (Caps-Labels) |
| Leading | 1.05 (display) · 1.02 (extreme tight) | 1.2 (Headlines) · 1.5–1.65 (Body) |
| Case | siehe Wortmark-Regeln | Headlines lowercase · UPPERCASE nur in Labels |
| Min. Größe | 22px — darunter Sans verwenden | — |
#Der Slogan — eine Regel, keine Ausnahme
Der Brand-Slogan ist kein Headline und folgt nicht der Display-Cap-Akzent-Regel. Er hat seine eigene Setting: Mantel ExtraLight 200, Akzent «given.» und «chosen.» in Bold 700. Sentence Case (R, I groß ohne Weight-Akzent). Tracking −0.05em, Leading 1.02. Apostroph typografisch ’ (U+2019). Der Slogan steht immer alleine — 2 oder 3 Zeilen, nie 1, nie 4+.
It’s chosen.
Verboten (Auswahl aus §04 Don’ts): Cap-Akzent auf R + I · Title Case · All Caps · komplett Bold · Italic (Noto Serif Display hat keinen Italic-Cut — Italic ist im ZZ-System nur PP Neue Montreal vorbehalten) · zweifarbig · Random-Weight-Mix · falsche Apostrophe (´ Akut oder gerade ' sind falsch).
#Wortmarken (Brand Elements)
Jedes Brand-Element hat exakt eine Setting. Nicht improvisieren, nicht über andere Weights skalieren. Brand-Name immer UPPERCASE — niemals lowercase, niemals Mixed-Case, niemals nur eine Hälfte. Mantel = ExtraLight 200, Akzent (Z · & · Z) = Bold 700, einfarbig.
#DBE / GFYS-Familie
Alle vier Varianten sind dieselbe Schrift (Display Serif). Der Unterschied liegt nur in Weight + Case: Caps + Bold = laut, lowercase + ExtraLight = leise.
| Mark | Weight | Case | Bedeutung / Einsatz |
|---|---|---|---|
| DBE | Regular 400 | UPPERCASE | Akronym "Don’t Believe Everything" · Sub-Brand-Labels, Tags, Footer |
| dbe | ExtraLight 200 | lowercase | leiseste Form · Editorial / Captions / Body-Mentions |
| GFYS | Bold 700 | UPPERCASE | lautester Zustand · Statement-Walls, Merch, Single-Word-Heros |
| gfys | ExtraLight 200 | lowercase | Editorial-Annotation, Inline-Reference |
Tracking durchgehend −0.05em, Leading 1.0. Niemals in einer anderen Schrift.
#Display Type-Scale (H1 → H4)
Display Serif folgt der Brand-Regel: ExtraLight 200 als Mantel, der erste Buchstabe jedes groß geschriebenen Wortes Regular 400 (Cap-Akzent). Tracking einheitlich −0.05em, Leading 1.05. Display stoppt bei H4 (40px) — kleiner wird Extra-Condensed unleserlich, ab H5 übernimmt PP Neue Montreal.
#Sans Type-Scale (H1 → Caption)
PP Neue Montreal trägt die UI-Hierarchie und übernimmt unterhalb H4. Tracking einheitlich −0.015em, Leading 1.2 über alle Headline-Größen, Body 1.5–1.65. Lowercase in allen Sans-Headlines, kein Cap-Akzent. UPPERCASE nur für Labels (+0.14em).
| Stufe | Cut | Größe / Setting | Beispiel |
|---|---|---|---|
| H1 Sans | Light 300 | 72px · lh 1.2 · lowercase | reality is built by those who refuse it. |
| H4 Sans | Light 300 | 30px · lh 1.2 · lowercase | promo headline / card title |
| H6 Sans | Regular 400 | 18px · lh 1.3 · lowercase | ui sub-header |
| Body L | Light 300 | 16px · lh 1.6 | Default Body — Mindestgröße im Web, sobald Inhalt kein UI ist. |
| Body S | Light 300 | 13px · lh 1.5 | Captions, Metadaten, Footnotes — sparsam. |
| Caption | Regular 400 caps | 11px · lh 1.4 · ls +140 | EYEBROW · LABEL · KATEGORIE · TAG |
#Palette
| Token | Wert | Rolle |
|---|---|---|
--bg (dark) |
#22201f |
warm-dunkler Hintergrund |
--bg (light) |
#fffada |
creme Hintergrund |
--ink |
#22201f / #f3eee4 |
Text |
--accent / Terra |
#A53A2A |
einziger Akzent (CTA, Live, Links) |
Diese Doku selbst ist in der ZABAZINGO CI gesetzt: Display = Noto Serif Display ExtraCondensed, Sans = PP Neue Montreal, Akzent = Terra #A53A2A. Theme-Toggle oben rechts (dunkel ↔ creme).