Combinações de fontes por setor e por que a categoria é uma armadilha

Leia quatro guias de "fontes para X" em quatro setores não relacionados e a sobreposição é impressionante. Uma sans geométrica para qualquer coisa ligada à tecnologia. Uma serifada transicional para qualquer coisa que queira parecer estabelecida. Uma serifada de display de alto contraste para qualquer coisa de luxo. Uma sans arredondada para qualquer coisa amigável.

Essa convergência acontece porque o setor é uma variável proxy. O que o autor quer dizer com "fintech" é *precisa sinalizar confiança institucional*, e o que quer dizer com "agência criativa" é *precisa sinalizar distinção acima da legibilidade*. Esses são os inputs reais. Quando você os nomeia diretamente, o rótulo do setor deixa de adicionar informação — e para de levar você às mesmas três fontes de todos os concorrentes da sua categoria.

O terceiro eixo é aquele que os designers ignoram e os engenheiros descobrem. Uma fonte que é linda em um título de 48px pode ser inutilizável em um rótulo de tabela de 12px, e a maior parte do trabalho de interface acontece no limite inferior. Teste em 12px antes de se apaixonar em 48px.

Estes são padrões justificáveis, com o raciocínio exposto para que você possa discordar, e uma alternativa diferenciadora para cada um, pois o padrão é o que seus concorrentes já usaram.

Cada setor abaixo apresenta um espécime vivo em vez de um screenshot: a fonte de título, a de corpo e a mono renderizadas em cada etapa de uma escala real, no navegador em que você está lendo isto. Uma combinação mostrada como imagem não diz nada sobre como ela se comporta em tamanho de legenda, e é no tamanho de legenda que as combinações falham.

Para um tratamento mais aprofundado especificamente sobre o caso de SaaS, incluindo uma fonte mono para dados e de quantos pesos você realmente precisa, veja combinação de fontes para SaaS.

Uma combinação que está correta no papel, mas errada no navegador, continua errada. Quatro decisões de entrega que alteram o que o seu leitor realmente vê.

A linha de fallback-metrics é a de maior valor e a menos conhecida. Um layout shift em cada primeira visita é um sinal real de qualidade para os usuários e para as métricas de experiência de página, e isso é corrigível com alguns descritores CSS em vez de uma troca de fonte.

/* A metric-matched fallback: same footprint, no reflow on load. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: "Inter", "Inter Fallback", sans-serif; }

As porcentagens exatas variam por tipografia e vale a pena medi-las em vez de copiá-las. Vários frameworks agora as geram automaticamente quando as fontes são declaradas via API de fontes, que é a maneira mais fácil de acertar isso.

Antes de se comprometer com uma combinação, cinco testes. Cada um detecta uma falha diferente e todos são mais rápidos do que descobrir o problema no build.

1. 1

   Defina seu título real, não um placeholder

   O Lorem ipsum não tem maiúsculas em lugares estranhos, nem números, nem palavras compostas longas. O nome real do seu produto e a sua proposta de valor terão os três.

2. 2

   Digite Il1 O0 e um número longo

   I maiúsculo, l minúsculo, dígito 1; O maiúsculo, dígito 0. Depois, um número de pedido ou valor monetário realista. Se qualquer par for ambíguo, a fonte está errada para qualquer coisa transacional.

3. 3

   Renderize o corpo do texto em 14px e leia um parágrafo inteiro

   Não apenas uma linha. Um parágrafo. Problemas de fadiga e ritmo só aparecem com a distância, e o corpo do texto é onde os leitores passam a maior parte do tempo.

4. 4

   Verifique os pesos que você realmente possui

   Uma combinação que dependa de um peso que a webfont não envia irá sintetizá-lo silenciosamente, e o negrito sintetizado é visivelmente pior. Confirme se cada peso na sua escala existe como um corte real.

5. 5

   Compare com dois concorrentes

   Este é o check de convenção da indústria, usado corretamente: não para encontrar sua fonte, mas para confirmar que você não acabou usando a deles.

Escolher a combinação é metade do trabalho. A outra metade é registrá-la com precisão suficiente para que seja reproduzida — por um novo engenheiro ou por um agente de código escrevendo telas que você nunca revisará linha por linha.

Analisamos 299 arquivos DESIGN.md publicados para leitura de agentes de IA. 83% mencionam tipografia, e 44% não contêm nenhum valor concreto de tamanho. Eles citam uma fonte e param por aí, deixando cada decisão de tamanho, peso e tracking para o modelo — e o modelo resolve da mesma forma que seus dados de treinamento, que é a mesma forma que todo mundo resolve.

## Typography

Display: Playfair Display — headings 32px and above only.
UI and body: Inter (variable) — everything else.

Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48.
Weights: 400 and 600 only. Never above 600.
Tracking: -0.02em at 32px+, 0 from 14-24px, +0.02em on 12px caps.

Never set Playfair below 32px.
Never use Playfair for UI labels, buttons or table content.
Numerals are always Inter, always tabular in tables.

Note que metade disso são proibições. Uma combinação registrada apenas como dois nomes de fontes permite qualquer uso indevido de ambas; as restrições são o que fazem a combinação funcionar. Saiba mais sobre como escrever orientações que um agente seguirá.