Quatro famílias, cada uma com um papel exato. Nunca usar uma fonte fora da função dela.
Distância vertical entre linhas de texto. Cada token é aplicado com a fonte correta do papel — Display no Anton, H3 no Outfit, corpo no Outfit também.
MÍDIA QUE GIRA EM VOLTA DE RESULTADO
Painel de campanhas ativas neste trimestre
Aprovar peça · Solicitar revisão · Ver histórico completo do cliente
A Global AD é uma agência B2B focada em performance. Cada campanha é medida, cada decisão tem número por trás. O texto respira quando o line-height respeita a hierarquia.
Documentação interna, contratos e briefings longos usam line-height mais aberto para reduzir fadiga de leitura. É o padrão para tudo acima de três parágrafos.
Hierarquia completa — do display ao overline. Cada linha mostra o tamanho renderizado no papel.
As famílias funcionando juntas no contexto real do produto — resumo de campanha em dashboard.
da meta prevista no Q4, puxado por Meta Ads e Google Ads.
A resposta curta: não construa. Reutilize o que já sabe que funciona, escreva menos código, e envie antes de estar perfeito.
Este texto usa Outfit em 16px com line-height 1.6, a combinação que garante legibilidade em qualquer viewport. Podemos destacar palavras importantes, incluir hyperlinks óbvios, e ainda mostrar código inline.
| Token | Fonte | Tamanho | Peso |
|---|---|---|---|
| fs-display | Anton | 72–96px | 400 |
| fs-h1 | Antonio | 48px | 700 |
| fs-h2 | Antonio | 36px | 600 |
| fs-h3 | Outfit | 24px | 600 |
| fs-body | Outfit | 16px | 400 |
| fs-mono | JetBrains Mono | 11px | 500 |