Typography
Famílias de fonte, escala de tamanho com line-height pareada, pesos, leading e tracking — todos primitivos do Tailwind v4.
Tipografia é onde a hierarquia visual começa. A KDS usa a escala nativa do Tailwind v4 — modular, perceptualmente espaçada, testada em produção — e adiciona pares de line-height para que você não precise pensar em altura de linha em 90% dos casos.
Como a escala funciona
Treze stops (xs → 9xl) cobrem desde microcópia (12px) até
display extremo (128px). A escala não é geométrica pura — os
saltos são maiores no topo (display) e menores na base (UI). Isso
reflete a realidade: você raramente precisa de "um pouquinho maior
que 96px", mas frequentemente precisa de "14px ou 16px, depende".
Cada --text-* vem com --text-*--line-height pareada, calculada
para resultar em uma altura confortável para aquele tamanho. Se
você usar text-base, ganha line-height de 1.5 automaticamente.
Se usar text-4xl, ganha 1.111 (mais apertado, como heading
quer).
Famílias
KDS herda o system stack do Tailwind v4 — sem fontes baixadas,
performance máxima. Se quiser trocar para Inter, Geist ou
qualquer outra, redefina --font-sans no arquivo de tema.
| Token | Classe | Descrição |
|---|---|---|
| --font-sans | font-sans | Sistema operacional do usuário — sem download, máxima performance. ui-sans-serif, system-ui, sans-serif e fallbacks de emoji. |
| --font-serif | font-serif | Pilha serif do sistema — Georgia, Cambria, Times. Para conteúdo editorial e displays com tom literário. |
| --font-mono | font-mono | Pilha monoespaçada — SFMono, Menlo, Monaco, Consolas. Para código, tokens, valores numéricos alinhados. |
Tamanhos
A coluna Amostra mostra o caractere "Aa" no tamanho real. A
Line-height ao lado é o que vem pareado por default — você
pode sobrepor com leading-* quando precisar.
| Amostra | Token | Classe | Tamanho | Line-height | Uso |
|---|---|---|---|---|---|
| Aa | --text-xs | text-xs | 0.75rem / 12px | 1.333 (16px) | Captions, labels secundários, microcópia |
| Aa | --text-sm | text-sm | 0.875rem / 14px | 1.429 (20px) | Texto compacto em UI densa, tabelas |
| Aa | --text-base | text-base | 1rem / 16px | 1.5 (24px) | Body padrão. Default do sistema. |
| Aa | --text-lg | text-lg | 1.125rem / 18px | 1.556 (28px) | Body em conteúdo editorial, leitura longa |
| Aa | --text-xl | text-xl | 1.25rem / 20px | 1.4 (28px) | Subtítulos, lead paragraphs |
| Aa | --text-2xl | text-2xl | 1.5rem / 24px | 1.333 (32px) | H3 / títulos de cards |
| Aa | --text-3xl | text-3xl | 1.875rem / 30px | 1.2 (36px) | H2 / títulos de seção |
| Aa | --text-4xl | text-4xl | 2.25rem / 36px | 1.111 (40px) | H1 em apps; H2 em landing pages |
| Aa | --text-5xl | text-5xl | 3rem / 48px | 1 | Hero pequeno, números grandes em KPIs |
| Aa | --text-6xl | text-6xl | 3.75rem / 60px | 1 | Hero médio em landing pages |
| Aa | --text-7xl | text-7xl | 4.5rem / 72px | 1 | Hero grande, displays editoriais |
| Aa | --text-8xl | text-8xl | 6rem / 96px | 1 | Display gigante, manchete de portfolio |
| Aa | --text-9xl | text-9xl | 8rem / 128px | 1 | Display extremo. Use com parcimônia. |
Pesos
Nove stops, do 100 (thin) ao 900 (black). System fonts
geralmente entregam só 400, 500, 600, 700 — os outros
stops dependem de uma fonte custom estar carregada.
| Amostra | Token | Classe | Valor | Uso |
|---|---|---|---|---|
| Texto | --font-weight-thin | font-thin | 100 | Display somente — ilegível em corpo |
| Texto | --font-weight-extralight | font-extralight | 200 | Display refinado em telas grandes |
| Texto | --font-weight-light | font-light | 300 | Editorial, textos longos com pegada elegante |
| Texto | --font-weight-normal | font-normal | 400 | Body padrão |
| Texto | --font-weight-medium | font-medium | 500 | Botões, navs — peso intermediário |
| Texto | --font-weight-semibold | font-semibold | 600 | Headings de UI, labels enfáticos |
| Texto | --font-weight-bold | font-bold | 700 | Headings principais, ênfase forte |
| Texto | --font-weight-extrabold | font-extrabold | 800 | Display, branding |
| Texto | --font-weight-black | font-black | 900 | Display extremo. Pode sobrecarregar a página. |
Leading
Quando o line-height pareado não serve (compose de heading multilinha, leitura editorial longa), use os tokens standalone:
| Token | Classe | Valor | Uso |
|---|---|---|---|
| --leading-tight | leading-tight | 1.25 | Headings grandes — fecha o espaço entre linhas |
| --leading-snug | leading-snug | 1.375 | Subtítulos e UI compacta |
| --leading-normal | leading-normal | 1.5 | Body padrão |
| --leading-relaxed | leading-relaxed | 1.625 | Editorial, leitura longa, posts de blog |
| --leading-loose | leading-loose | 2 | Citações, poesia, espaçamento dramático |
Tracking
Letter-spacing usado conscientemente é um sinal de cuidado tipográfico. Use negative tracking para apertar displays grandes; positive tracking para abrir caps e eyebrows.
| Token | Classe | Valor | Uso |
|---|---|---|---|
| --tracking-tighter | tracking-tighter | -0.05em | Display gigante — corrige spacing exagerado |
| --tracking-tight | tracking-tight | -0.025em | Headings grandes |
| --tracking-normal | tracking-normal | 0em | Body padrão |
| --tracking-wide | tracking-wide | 0.025em | Caps, eyebrows, microcópia |
| --tracking-wider | tracking-wider | 0.05em | All-caps em UI compacta |
| --tracking-widest | tracking-widest | 0.1em | Eyebrows dramáticos, branding |
Boas práticas
- Pareie tamanho com weight. Display usa peso menor (light ou normal) — o tamanho já chama atenção. Body usa peso intermediário (normal ou medium) — peso maior cansa em massa.
- Use o line-height pareado sempre que possível. Ele foi calculado para o tamanho específico.
- Tracking negativo acima de
--text-2xlcorrige o spacing exagerado que fontes geralmente têm em display. - Cuidado com
text-9xl. Bonito numa página de portfólio, brutal em qualquer interface de produto. Reserve para hero pages e displays de marca. - Não invente weights. Se a fonte não tem
font-extralight, o navegador mostrafont-light— silenciosamente. Audite o weight sintético que aparece comfont-synthesis.