anticaos
Visão geralFundamentosComponentesPara agentes

Tipo- grafia

Fontes, escala de tamanhos e papéis tipográficos (type-*). Use os papéis antes de combinar tamanho e peso à mão.

Fontes

Aa
font-sansvar(--font-geist-sans, 'Geist'), system-ui, sans-serif

Tudo por padrão

Aa
font-monovar(--font-geist-mono, 'Geist Mono'), ui-monospace, monospace

Dados, IDs, contadores, rótulos técnicos (91 usos no Resense)

Aa
font-pixelvar(--font-geist-pixel-square, 'Geist Pixel Square'), var(--font-geist-mono, 'Geist Mono'), monospace

Display de marca: títulos de docs, changelog, legal, landing. Nunca em corpo de texto.

Papéis (type-*)

Prefira o papel a combinar tamanho e peso: ele já traz fonte, tamanho, peso, entrelinha e espaçamento.

Ela evoluiu. Só a persona não foi junto.

type-display — Hero, número grande

Ela evoluiu. Só a persona não foi junto.

type-heading — Título de página/seção

Ela evoluiu. Só a persona não foi junto.

type-title — Título de card, node, modal

Ela evoluiu. Só a persona não foi junto.

type-body — Texto corrido, respostas de IA

Ela evoluiu. Só a persona não foi junto.

type-label — Rótulos, botões pequenos, UI densa

Ela evoluiu. Só a persona não foi junto.

type-caption — Badges, contadores, metadados

Ela evoluiu. Só a persona não foi junto.

type-eyebrow — Rótulo de grupo em caixa-alta

Ela evoluiu. Só a persona não foi junto.

type-code — IDs, dados, código

Ela evoluiu. Só a persona não foi junto.

type-brand — Display de marca em Geist Pixel

Escala de tamanhos

Aa
text-3xs0.625rem

10px — badges, contadores, metadados

Aa
text-2xs0.6875rem

11px — legendas

Aa
text-xs0.75rem

12px — UI densa (padrão do canvas)

Aa
text-sm0.875rem

14px — corpo e botões

Aa
text-base1rem
Aa
text-lg1.125rem
Aa
text-xl1.25rem
Aa
text-2xl1.5rem
Aa
text-3xl1.875rem
Aa
text-4xl2.25rem

Peso, entrelinha e espaçamento

Aa
font-normal400
Aa
font-medium500

Rótulos, botões

Aa
font-semibold600

Títulos de seção e cards

Aa
font-bold700

Só display (text-2xl+)

leading-none1
leading-tight1.25
leading-snug1.375

Títulos de 2 linhas

leading-normal1.5
leading-relaxed1.625

Texto corrido e respostas de IA (111 usos)

tracking-tight-0.025em

Títulos display

tracking-normal0em
tracking-wide0.025em
tracking-wider0.05em

Rótulos em caixa-alta

tracking-widest0.1em

Eyebrows pequenos (10px)

tracking-eyebrow0.2em

Eyebrow de seção (text-sm uppercase)