tipografia-web

Tipografia Web

Você está configurando tipo para telas, não para impressão. O objetivo é um texto que seja legível (consegue distinguir as letras), leiturable (é confortável de ler por longos períodos) e claro na hierarquia (o olho sabe para onde ir) — em cada viewport, nível de zoom e preferência de fonte que um usuário real possa ter.

Esta skill codifica um pequeno número de decisões que mais importam, na ordem em que você deve tomá-las. Trabalhe de cima para baixo: acerte o sistema (escala, medida, ritmo) antes de buscar recursos criativos. A maioria dos "maus designs tipográficos" na web não é uma bandeira OpenType faltando — é um tamanho de corpo muito pequeno, uma medida muito larga, uma altura de linha muito apertada e uma fonte que desloca o layout quando carrega.

Proveniência — princípio, não propriedade

Esta skill é uma síntese independente de princípios tipográficos amplamente ensinados, não uma reprodução de escritos, exemplos ou designs de ninguém. As ideias são atribuídas às suas linhagens (por exemplo, medida de Bringhurst, Letra→Texto→Grade de Lupton, a escala modular de Tim Brown) porque creditar uma ideia é erudição — mas a expressão e a tradução para a web aqui são próprias desta skill. Ao aplicar ou estender, faça o mesmo: expresse princípios com suas próprias palavras, credite a fonte de uma ideia quando natural, e nunca copie a prosa, layouts de amostra ou conteúdo proprietário de uma fonte. O conhecimento compartilhado é seu para usar; a expressão de qualquer indivíduo não é.

A ordem das decisões

Tome estas decisões em sequência. Cada uma restringe a seguinte.

1. Escolha da fonte — Por padrão, use uma pilha de sistema rápida e boa, a menos que a marca exija uma fonte web. Se carregar uma fonte web, planeje seu carregamento (etapa 6) ao mesmo tempo.
2. Tamanho base e medida — Texto do corpo ≥ 1rem (16px), comprimento de linha 45–75 caracteres (max-width: ~66ch). Esses dois fazem mais pela legibilidade do que qualquer outra coisa.
3. Escala tipográfica — Escolha uma proporção modular e derive cada tamanho dela. Torne-a fluida com clamp(). Não escolha valores px aleatórios manualmente.
4. Ritmo vertical — Altura de linha ~1.5 para corpo, mais apertada (1.1–1.3) para títulos grandes. Espaçe parágrafos ou recue-os, nunca ambos.
5. Hierarquia e polimento — Contraste de peso/tamanho/espaço, text-wrap: balance em títulos e pretty no corpo, tracking em maiúsculas e display, recursos OpenType.
6. Carregamento e desempenho — font-display, pré-carregue a única fonte crítica, auto-hospede WOFF2, e corresponda metricamente a fallback para que a página não desloque (CLS).
7. Verificação de acessibilidade — Contraste, zoom para 200%, as substituições de espaçamento de texto WCAG 1.4.12, nunca desative o zoom, nunca justifique texto do corpo.

Inegociáveis (as regras que evitam as falhas comuns)

Estes são os erros que aparecem repetidamente. Internalize o porquê para que possa aplicá-los em situações novas, não apenas copiá-los.

• Tamanho do texto do corpo em rem, nunca px. rem respeita a configuração de tamanho de fonte do navegador do usuário; px substitui silenciosamente uma preferência de acessibilidade. Reserve px para bordas finas e detalhes físicos genuinamente fixos.
• Altura de linha é sem unidade. line-height: 1.5 é herdado como uma proporção, então cada elemento a recalcula a partir de seu próprio tamanho. Uma line-height: 24px fixa herda o valor de pixel calculado e quebra em filhos de tamanhos diferentes.
• Nunca dimensione fontes em vw puro. Unidades de viewport não respondem a zoom ou tamanho de fonte do usuário — isso falha no WCAG 1.4.4. Sempre envolva o dimensionamento fluido em clamp() com um termo rem: clamp(2rem, 1rem + 3vw, 4rem). O rem mantém o zoom funcionando.
• Limite a medida. Linhas com mais de ~75 caracteres fazem o olho perder o lugar no retorno; mais curtas que ~45 ficam picadas. max-width: 66ch em contêineres de texto é a correção de legibilidade de maior alavancagem isolada.
• Nunca justifique texto do corpo na web. A justificação CSS sem hifenização sofisticada abre "rios" de espaço em branco. Alinhe à esquerda, margem direita irregular.
• Uma fonte web não deve deslocar o layout quando carrega. Combine font-display com uma fallback metricamente correspondida (size-adjust + ascent/descent/line-gap-override) para que a troca pela fonte real cause zero refluxo. Esta é a correção para CLS impulsionado por fonte.

CSS de partida

Uma linha de base sã e acessível que você pode inserir em quase qualquer projeto. Ela usa uma pilha de fontes do sistema (zero download) e uma escala fluida. Adapte a proporção e as fontes ao briefing.

:root {
  /* Fontes — pilha do sistema por padrão (instantânea, sem CLS, sensação nativa) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Escala tipográfica fluida (≈ Terça Maior 1.25 no desktop). Gere projetos reais com Utopia.fyi */
  --step--1: clamp(0.833rem, 0.80rem + 0.17vw, 0.9rem);
  --step-0:  clamp(1rem,    0.95rem + 0.25vw, 1.125rem);   /* corpo */
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);
  --step-2:  clamp(1.563rem,1.40rem + 0.80vw, 1.953rem);
  --step-3:  clamp(1.953rem,1.70rem + 1.25vw, 2.441rem);
  --step-4:  clamp(2.441rem,2.00rem + 2.00vw, 3.052rem);

  --measure: 66ch;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  font-synthesis: none;            /* não falsifique negrito/itálico */
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; }   /* apertado + comprimentos de linha uniformes */
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li, blockquote { max-width: var(--measure); text-wrap: pretty; }  /* medida + sem órfãos */
p + p { margin-block-start: 1em; }                                   /* espaçe, não recue */

:is(h1, h2, h3, h4) + * { margin-block-start: 0.5em; }

/* Dados/figuras alinhados em colunas */
table, .tabular-nums { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

Um ponto de partida mais completo e comentado — incluindo um exemplo de fonte web com fallback métrico — está em assets/starter.css. Leia-o ao estruturar o tipo de um projeto do zero.

Arquivos de referência — leia o que precisar

Mantenha este arquivo no contexto; puxe uma referência quando a tarefa exigir.

• references/decision-records.md — O raciocínio destilado do campo: cinco meta-padrões (como tipógrafos pensam) mais registros de decisão no estilo ADR ligando cada regra à sua justificativa e às alternativas que rejeita. Leia isto quando enfrentar um julgamento novo que os outros arquivos não cobrem diretamente — os meta-padrões permitem derivar a resposta correta como um especialista faria. Também o lar do limite "princípio, não propriedade".
• references/foundations.md — Os princípios clássicos (Letra / Texto / Grade de Lupton, Bringhurst, Butterick) traduzidos para a web: anatomia, medida, hierarquia, combinação, alinhamento. Leia isto ao escolher/emparelhar fontes ou quando um layout "parecer estranho" mas nenhuma regra única estiver obviamente quebrada.
• references/fluid-scale.md — Tipo fluido com clamp(), a matemática de clamp(), proporções de escala modular, Utopia, unidades de consulta de contêiner (cqi) para tipo no nível de componente. Leia isto ao construir ou ajustar uma escala tipográfica, ou ao fazer o tipo responder a um contêiner em vez do viewport.
• references/font-loading.md — Desempenho de fontes web: font-display, pré-carregamento, auto-hospedagem vs Google Fonts (GDPR), WOFF2, subconjunto, unicode-range, fontes variáveis, e eliminação de CLS com fallbacks metricamente correspondidos (size-adjust, *-override, Fontaine, next/font). Leia isto sempre que um projeto carregar uma fonte web personalizada ou tiver problemas de deslocamento de layout/texto lento.
• references/accessibility.md — WCAG 2.2 para texto: proporções de contraste, redimensionar para 200% (1.4.4), substituições de espaçamento de texto (1.4.12), zoom, dislexia/legibilidade, movimento reduzido. Leia isto antes de declarar o trabalho de tipo concluído, e sempre que a tarefa mencionar acessibilidade, a11y, contraste ou conformidade.
• references/modern-css.md — Recursos atuais de tipo CSS com status de suporte do navegador: text-wrap: balance/pretty, OpenType (font-variant-*, font-feature-settings), text-box-trim/text-box-edge, hanging-punctuation, initial-letter, unidades relativas à fonte (lh, cap, ch, ic), line-clamp, color-mix para matizes. Leia isto ao buscar um recurso de polimento, e para verificar se algo precisa de aprimoramento progressivo.

Como entregar

• Ao alterar o tipo, explique a decisão, não apenas o código — "corpo aumentado para 1.125rem e medida limitada a 66ch para que as linhas não tenham 120 caracteres de largura." A tipografia é julgada pela sensação; diga ao usuário o que observar.
• Prefira editar os tokens/escala existentes do projeto em vez de inventar um paralelo. Se o projeto usar Tailwind, defina a escala em theme.fontSize / variáveis CSS em vez de espalhar valores arbitrários.
• Recursos sensíveis ao suporte do navegador (sinalizados em modern-css.md) entram como aprimoramento progressivo — a página ainda deve ser lida corretamente sem eles.
• Após alterações não triviais, faça a verificação de acessibilidade (references/accessibility.md) antes de declarar concluído. Verifique o contraste e se o layout sobrevive a zoom de 200% e às substituições de espaçamento de texto.