03 · Marca
Boas práticas
Princípios
- Um display por tela. O
text-displayé o ponto de entrada visual da página. Se houver mais de um, é provavelmente umtext-heading. - Hierarquia pelo tamanho, não pelo peso. A régua Fibonacci já dá contraste suficiente entre níveis adjacentes — não precisa reforçar com bold em tudo.
- Texto secundário com opacidade. Prefira
text-base-content/60em vez de descer um degrau na régua, sempre que isso bastar para diferenciar. - Afacad Flux com moderação. Reserve a fonte display para momentos editoriais e de marca; tudo o que é UI vai em Inter.
- Em prose, não acrescente utilitários nos headings.
Os tamanhos de
h1–h4epdentro de.prosejá replicam a régua automaticamente. Aplique utilitários apenas em ilhasnot-prose.
O que fazer e o que evitar
A integridade do sistema depende de aplicar a tipografia dentro do que está previsto — qualquer atalho enfraquece a leitura entre peças.
Use os utilitários da régua para tudo.
text-display, text-heading, text-title, text-body, text-small, text-eyebrow.
Combine cor com text-base-content e modificadores de opacidade.
/60 para auxiliar, /40 para discreto, /30 para desabilitado.
Use Afacad Flux só em momentos de marca.
Headlines editoriais, capas, hero institucional.
Para variação de peso, combine com font-medium ou font-semibold.
Aplicar text-2xl, text-base, text-sm direto em elementos.
Quebra a régua e mistura escalas — sempre prefira os utilitários nomeados.
Criar tokens de cor custom (text-muted, text-tertiary).
Use text-base-content com opacidade — segue o tema automaticamente.
Acrescentar uppercase ao text-eyebrow.
Já é uppercase com letter-spacing calibrado; aplicar de novo desalinha.
Reproduzir o I calibrado da palavra-marca em outras peças.
Existe só nos arquivos oficiais do logotipo. Em headlines, Afacad Flux vai na forma original.
Reintroduzir <link> do Google Fonts.
As fontes são self-hosted via @font-face em global.css.
Empilhar mais de um text-display na mesma tela.
Quebra a hierarquia editorial. Use text-heading para o segundo nível.