# ZABA & ZINGO — Typography System

> Source: the ratified **ZZ Typography System v1** (`discord.zabazingo.eu/typography.html`,
> 2026-05-14). Fonts are **self-hosted** — no CDN substitutes. Body minimum **16px**.
> Wordmarks single-colour — accent runs through **weight**, never colour.

---

## Two voices, sharp roles

**Display carries the brand voice** — headlines, wordmarks, heroes.
**Sans carries the body** — UI, text, editorial. There is **no third font**.

| | Display · Serif | Sans · Neo-Grotesque |
|---|---|---|
| Family | **Noto Serif Display ExtraCondensed** | **PP Neue Montreal** |
| Cuts | ExtraLight 200 · Regular 400 · Bold 700 | Light 300 · Regular 400 · Semibold 600 · Bold 700 |
| Use | headlines, wordmarks, brand elements | 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 | see wordmark rules | headlines lowercase · UPPERCASE only in labels |
| Italic | **none** (Noto has no italic cut) | allowed (PP only) |
| Min size | **40px** — below that use Sans | body **16px** absolute floor |

Font-family alias `Zaba Logo` = *Noto Serif Display ExtraCondensed Bold* (logo-only weight).

---

## Cap-Accent rule (Display only)

Display headlines set the whole line **ExtraLight 200**, and the **first letter of each
capitalised word** jumps to **Regular 400**. Tracking `−0.05em`, leading `1.05`.

```html
<h1 class="zz-display">
  <span>T</span>he <span>S</span>ignal <span>N</span>oise <span>R</span>atio
</h1>
```
```css
.zz-display{ font-family:var(--zz-display); font-weight:200;
  letter-spacing:-0.05em; line-height:1.05; }
.zz-display span{ font-weight:400; }   /* the cap-accent */
```

PP Neue Montreal headlines do the **opposite**: **lowercase**, no cap-accent, no italic.

---

## Display type-scale (H1 → H4, stops at 40px)

| Step | Size | lh | ls |
|------|------|----|----|
| H1 | 96px | 1.05 | −0.05em |
| H2 | 72px | 1.05 | −0.05em |
| H3 | 54px | 1.05 | −0.05em |
| H4 | 40px | 1.05 | −0.05em |

Below H4 the ExtraCondensed cut becomes illegible — **PP Neue Montreal takes over**.

## Sans type-scale (H1 → Caption)

| Step | Cut | Size / setting | Example |
|------|-----|----------------|---------|
| H1 Sans | Light 300 | 72px · lh 1.2 · lowercase | reality is built by those who refuse it. |
| H2 Sans | Light 300 | 54px · lh 1.2 · lowercase | |
| H3 Sans | Light 300 | 40px · lh 1.2 · lowercase | |
| H4 Sans | Light 300 | 30px · lh 1.2 · lowercase | promo headline / card title |
| H5 Sans | Regular 400 | 22px · lh 1.25 · lowercase | |
| H6 Sans | Regular 400 | 18px · lh 1.3 · lowercase | ui sub-header |
| Body L | Light 300 | 16px · lh 1.6 | default body — web minimum |
| Body S | Light 300 | 13px · lh 1.5 | captions, metadata, footnotes — sparingly |
| Caption | Regular 400 CAPS | 11px · lh 1.4 · ls +0.14em | EYEBROW · LABEL · CATEGORY · TAG |

---

## The Slogan — one rule, no exception

`Reality isn't given. It's chosen.` — **not** a headline, does **not** follow the
cap-accent rule. Its own setting:

- Mantel (Reality, isn't, It's): **ExtraLight 200**
- Accent **`given.`** and **`chosen.`**: **Bold 700**
- Sentence case (R, I capital **without** weight-accent)
- Tracking `−0.05em`, leading `1.02`, apostrophe **typographic ’ (U+2019)**
- Always stands **alone** — 2 or 3 lines, never 1, never 4+.

```html
<p class="zz-slogan">Reality isn’t <b>given.</b><br>It’s <b>chosen.</b></p>
```
```css
.zz-slogan{ font-family:var(--zz-sans); text-transform:none; font-weight:200;
  font-size:clamp(2rem,6vw,4.5rem); line-height:1.02; letter-spacing:-0.05em;
  color:var(--zz-ink); }
.zz-slogan b{ font-weight:700; }
```

**Forbidden:** cap-accent on R+I · Title Case · All Caps · fully bold · italic ·
two-colour · random weight mix · wrong apostrophes (´ acute or straight ' are wrong).

---

## Platform sizing

| Context | Body | H1 Display |
|---------|------|-----------|
| Mobile ≤640px | 16–17px | 48–72px |
| Tablet 641–1024px | 17–18px | 72–96px |
| Desktop ≥1024px | 17–19px | 96–160px |
| Instagram Story | 40–48px | 120–200px |
| OOH / Billboard | — | 2000–3000pt, max 3–5 words |
| Email | 16px min | CTA buttons min 44×44px |

Social media: text **3–5× larger** than the web equivalent.

---

## @font-face (self-hosted, see `fonts/`)

```css
@font-face{font-family:"Zaba Logo";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Serif Display ExtraCondensed";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-ExtraLight.ttf") format("truetype");font-weight:200;font-display:swap}
@font-face{font-family:"Noto Serif Display ExtraCondensed";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif Display ExtraCondensed";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Semibold.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Bold.otf") format("opentype");font-weight:700;font-display:swap}
```