Tipografia

Closed vocabulary of typeface roles, canonical CSS variables, hosting rules, weights, scale, fallback chain, and tests for typography in every Koder surface (web/landing, Flutter mobile/desktop, CLI/TUI). Self-hosted-first: webfonts ship as `.woff2` from the consumer's own origin; Google Fonts / jsDelivr / unpkg are forbidden.

Spec fonte: specs/fonts/typography.kmd

Roles (vocabulário fechado)

Outras specs Koder referenciam roles, nunca nomes específicos de fonte. Wave 1 reusa Inter + JetBrains Mono sob OFL; Wave 2 introduz Koder Display; Wave 3 entrega Koder Sans + Koder Mono proprietários.

sans

Corpo de UI, controles, navegação — a fonte de trabalho. Default em tudo.

Wave 1: Inter · --kds-font-sans

O brilho do sol e a paz da neve. 0123456789.

mono

Código, saída de terminal, tabelas numéricas, IDs e hashes.

Wave 1: JetBrains Mono · --kds-font-mono

fn run() -> Result<(), Error> { let n = 42; Ok(()) }

display

Headlines, hero, posters, OG images. Wave 1 cai pra sans em pesos pesados.

Wave 1: Inter 700/800 · --kds-font-display

Construa a próxima geração.

serif

Modo leitura long-form (opcional, opt-in por surface).

Wave 1: ui-serif / Georgia · --kds-font-serif

Leitura longa se beneficia de formas calmas e line-height generoso.

Pesos

Pesos obrigatórios por role. Fontes variáveis (Inter VF, JetBrains Mono VF) são preferidas — um único .woff2 cobre toda a família.

sans

  • 400 Koder Design System
  • 500 Koder Design System
  • 600 Koder Design System
  • 700 Koder Design System

mono

  • 400 Koder Design System
  • 700 Koder Design System

display

  • 700 Koder Design System
  • 800 Koder Design System

serif

  • 400 Koder Design System
  • 700 Koder Design System

Escala tipográfica

Use estes valores em px pra font-size; mapeie para CSS custom properties quando a surface tiver mais que ~5 tamanhos. Line-heights seguem os buckets body/UI/headline/leitura.

12px caption A forma segue a função. line-height: 1.4
14px small A forma segue a função. line-height: 1.4
16px body, base A forma segue a função. line-height: 1.5
18px lead A forma segue a função. line-height: 1.5
24px h4 A forma segue a função. line-height: 1.2
32px h3 A forma segue a função. line-height: 1.2
48px h2 A forma segue a função. line-height: 1.2
64px h1 / display A forma segue a função. line-height: 1.2

Tokens CSS canônicos

Declare em :root uma vez. CSS de componente resolve font-family pela variável — o swap Wave-2/3 vira mudança de uma linha.

:root {
  --kds-font-sans:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kds-font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --kds-font-display: var(--kds-font-sans);
  --kds-font-serif:   ui-serif, Georgia, "Times New Roman", serif;
}

body, button, input, select, textarea { font-family: var(--kds-font-sans); }
code, kbd, pre, samp, .mono           { font-family: var(--kds-font-mono); }
h1, h2, h3, .display                  { font-family: var(--kds-font-display); }

Gates de auditoria (T1-T7)

Toda surface — landing, mobile, desktop, TV, web — deve passar nesses checks antes do release. Veja specs/fonts/typography.kmd § Tests.

IDTeste
T1grep por hosts proibidos (fonts.googleapis, fonts.gstatic, jsdelivr/unpkg de font CDN) retorna vazio.
T2Todo font-family em CSS/Dart/templ resolve pra um role da tabela acima ou pra cadeia de fallback.
T3Todo bloco @font-face inclui font-display: swap.
T4Hero / páginas críticas emitem <link rel="preload" as="font" type="font/woff2" crossorigin> pra fonte body.
T5Cada .woff2 entregue ≤ 50 KB por subset/peso (ou carrega comentário de exceção).
T6Fonte variável usada quando o upstream provê (Inter VF / JetBrains Mono VF).
T7Contraste AAA preservado em toda a cadeia de fallback (fontes do sistema passam tools/a11y-test/).