F3.2 · Fundações

Type Scale

Hierarquia tipográfica completa em rem (base 10px). Display para impacto, headings para estrutura, body para leitura, caption para metadados. Cada patamar tem tamanho, peso e altura de linha definidos.

A escala

Onze patamares de Display a Caption. Use clamp() sempre que o tamanho precisar respirar entre breakpoints — preserva legibilidade em mobile sem perder presença em desktop.

Token	Tamanho	Line-height	Peso	Uso
--t-9xl	12.8rem	0.9	600	Capa, hero monumental.
--t-8xl	9.6rem	0.95	600	Slide de pitch, KPI gigante.
--t-6xl	6.0rem	1.05	600	Page title em desktop.
--t-5xl	4.8rem	1.1	600	Section title editorial.
--t-4xl	3.6rem	1.15	600	Hero secundário.
--t-3xl	3.0rem	1.2	600	H2.
--t-2xl	2.4rem	1.3	600	H3, card title.
--t-xl	2.0rem	1.4	500	Lede, meta-row.
--t-lg	1.8rem	1.5	500	H4, label denso.
--t-base	1.6rem	1.55	400	Body padrão.
--t-sm	1.4rem	1.55	400	Body denso, footnote.
--t-xs	1.2rem	1.5	500	Caption, micro-labels.

Composição responsiva

Títulos largos usam clamp(min, vw, max). Body é fixo — legibilidade não escala.

/* Hero — escala fluida entre 7.2rem e 16.8rem */
.hero-title { font-size: clamp(7.2rem, 13vw, 16.8rem); }

/* Body — fixo */
body { font-size: var(--t-base); }

Faça

Use clamp() em qualquer título acima de --t-3xl.
Mantenha line-height inversamente proporcional ao tamanho (maior = menor line-height).
Padrões comuns: H1 + lede a --t-xl, H2 + body, H3 + body-sm.

Não faça

Não combine três pesos diferentes na mesma página (limite: 400, 500/600, 700).
Não use Display em parágrafo — Display é para olhar, não para ler.
Não troque a fonte por um efeito visual; mude o peso ou o tamanho.

Measure (largura de linha)

Body máximo de 70 caracteres. Lede até 65. Captions sem limite.

Use max-width: 70ch em parágrafos longos.
Title amarra com max-width: 18ch para forçar quebras intencionais.
Em colunas estreitas (sidebar, card), reduza para 50–55ch.