# Tipografia

Fonte: `2. Tipografia/` (Drive), `Manual de marca.pdf` p. 9 (`references/manual/page-09.jpg`).
Arquivos das fontes em `assets/fonts/` (variáveis, licença OFL — uso livre, inclusive
comercial e web). Eixos confirmados nos próprios `.ttf`.

## 1. Famílias

| Papel | Família | Arquivo | Eixos |
|---|---|---|---|
| **Títulos** | Zalando Sans | `ZalandoSans-VariableFont-wdth-wght.ttf` (+ Italic) | `wght` 200–900 · `wdth` 75–125 |
| **Corpo** | Public Sans | `PublicSans-VariableFont-wght.ttf` (+ Italic) | `wght` 100–900 |

Fallback autorizado quando a fonte não carrega:
`system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif`.

Nunca misture: Zalando não vai em corpo de texto, Public Sans não vai em título.
E nunca digite o wordmark em Zalando para "fazer o logo" (uso proibido nº 6).

## 2. As quatro vozes tipográficas do manual (p. 9)

O manual especifica exatamente como a marca compõe (formato: peso · line-height ·
letter-spacing):

| Voz | Espec do manual | Tradução prática |
|---|---|---|
| **Headline** | Zalando Sans **Medium** · 100% · **-2%** | Títulos de peça/hero: `wght 500`, `line-height 1.0–1.1`, `letter-spacing -0.02em` |
| **Overline** | Zalando Sans **Itálico** · 100% · **+5%** | Kicker acima do título: itálico, CAIXA ALTA, `letter-spacing 0.05em`, colorido (verde-500 sobre claro, lime sobre escuro) |
| **Corpo** | Public Sans **Regular** · **140%** · 0 | Texto de peça: `line-height 1.4`. Em leitura longa (web/doc), use 1.5–1.6 |
| **Botão** | Zalando Sans **Bold** · 100% · 0 | Label de CTA: CAIXA ALTA, `wght 700` (ver `ui-componentes.md`) |

Headlines da marca costumam misturar pesos na mesma frase para ênfase
("**O carbono está em tudo:** no nosso corpo…" — bold na tese, regular no resto).

## 3. Pesos autorizados

**Zalando Sans (títulos):** 300 Light (número gigante/display opcional), **500 Medium
(headline padrão de peça)**, 600 SemiBold (título de seção/UI), 700 Bold (ênfase, capa,
label de botão). **Public Sans (corpo):** 400 Regular (padrão), 500 Medium (label,
tabela, botão discreto), 600 SemiBold (ênfase, lead).

Evite: 100–200 (ilegível), 800–900 (pesado demais para a marca).
`wdth` do Zalando: fica em **100**; só compressão pontual de título muito longo,
nunca fora de 90–110.

## 4. Escala tipográfica (web/UI)

Escala 1.25, base 16px. Use estes degraus.

| Token | px | Família/peso | LH | LS |
|---|---|---|---|---|
| `display` | 61 | Zalando 500 (ou 300 p/ número) | 1.05 | -0.02em |
| `h1` | 49 | Zalando 500–700 | 1.10 | -0.02em |
| `h2` | 39 | Zalando 600 | 1.15 | -0.01em |
| `h3` | 31 | Zalando 600 | 1.20 | -0.01em |
| `h4` | 25 | Zalando 600 | 1.30 | 0 |
| `h5` | 20 | Zalando 600 | 1.40 | 0 |
| `body-lg` | 20 | Public 400 | 1.55 | 0 |
| `body` | 16 | Public 400 | 1.55 | 0 |
| `body-sm` | 14 | Public 400 | 1.50 | 0 |
| `caption` | 12 | Public 500 | 1.45 | +0.01em |
| `overline` | 12–14 | Zalando 600 itálico CAPS (marca) ou Public 600 CAPS (UI) | 1.4 | +0.05–0.08em |

Mobile: desça um degrau em `display`/`h1`/`h2` (ex.: h1 49 → 39px).
Marketing/peça: line-heights mais justos (manual = 100–140%); produto/leitura: mais
abertos. Números-destaque em decks: Zalando 300–500, 96px+, com overline em cima.

## 5. Regras de composição

- CAIXA ALTA só em overline e label de botão/CTA. Título nunca em caps.
- Medida de leitura: 60–75 caracteres (`max-width: 65ch`).
- Itálico: reservado ao overline da marca, citação e termo estrangeiro.
- Números em tabela/dado: Public Sans 500 + `font-variant-numeric: tabular-nums`.
- Não justificar texto. Alinhamento à esquerda; centralizado só em peça social/capa.
- Hierarquia de peça (padrão dos posts): overline colorido → headline → corpo →
  CTA/rodapé. Uma ideia por bloco.

## 6. Web — carregando as fontes

```css
@font-face {
  font-family: 'Zalando Sans';
  src: url('../fonts/ZalandoSans-VariableFont-wdth-wght.ttf') format('truetype-variations');
  font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans';
  src: url('../fonts/ZalandoSans-Italic-VariableFont-wdth-wght.ttf') format('truetype-variations');
  font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-VariableFont-wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Italic-VariableFont-wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
```

Alternativa (produção, mais leve) — Google Fonts:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,300..700;1,300..700&family=Public+Sans:ital,wght@0,400..600;1,400..600&display=swap" rel="stylesheet">
```

`.woff2` (recomendado): `pip install fonttools brotli && fonttools ttLib.woff2 compress "assets/fonts/PublicSans-VariableFont-wght.ttf"`

## 7. Documentos e apresentações

Fontes variáveis `.ttf` nem sempre expõem os pesos em PowerPoint/Word: instale os
`.ttf` (duplo clique) e, se faltar peso, baixe instâncias estáticas no Google Fonts.
Ao distribuir, **incorpore as fontes** (PowerPoint: Arquivo → Opções → Salvar →
Incorporar fontes) ou exporte PDF. Se nada disso for possível, o fallback autorizado
é o do sistema (Segoe UI/Helvetica) — nunca uma terceira família.
