Combinações de fontes para SaaS: o que uma tipografia de produto precisa entregar

Antes de discutir gosto, vale a pena contar. Capturamos os resultados para esta consulta e analisamos cada página com conteúdo acessível, contabilizando quais famílias cada uma recomendava.

A convergência é real, e interpretá-la como preguiça é ignorar o ponto principal. Essas fontes continuam aparecendo porque satisfazem uma lista específica de restrições que a maioria das tipografias não cumpre — e, assim que você conhece essa lista, tanto a convergência quanto a maneira de evitá-la tornam-se óbvias.

Conselhos de combinação de fontes vêm predominantemente do design editorial e de branding, onde usar uma serifada de display sobre uma sans-serif de corpo é a jogada clássica. Interfaces de produto funcionam de forma diferente. A maior parte do texto em uma tela de produto tem entre 12 e 16 pixels: labels, células de tabela, dicas de formulário, itens de navegação, estados vazios. Há muito pouco "display" e uma quantidade enorme de texto funcional, pequeno e denso.

Portanto, a resposta comum é usar uma única família em dois papéis — uma configuração mais pesada e compacta para títulos, e uma regular para o corpo do texto — com a diferença definida pelo peso, tamanho e espaçamento entre letras, em vez de usar um segundo design. Isso não é um compromisso. É o que faz uma interface densa parecer equilibrada e elimina toda uma categoria de incompatibilidades sutis.

1. Numerais tabulares. No momento em que você tem uma tabela, uma fatura, uma lista de preços ou uma métrica que se atualiza, dígitos proporcionais fazem as colunas oscilarem e os números mudarem de largura conforme o valor altera. Uma fonte sem numerais tabulares — ou uma UI que nunca os ativa — produz aqueles dashboards instáveis que todos já viram, mas ninguém sabe explicar a causa.
2. Separação real entre pesos adjacentes. A hierarquia de produtos geralmente transita entre 400 e 600 em tamanhos pequenos. Se o 400 e o 500 forem quase idênticos a 14px, cada label parecerá ter o mesmo peso e a hierarquia deixará de existir silenciosamente. Verifique isso no tamanho real do seu corpo de texto, não a 48px, onde qualquer família parece boa.
3. Uma altura-x (x-height) elevada. Textos pequenos compõem a maior parte de um produto. Fontes com altura-x generosa e aberturas abertas permanecem legíveis a 12–13px; fontes elegantes com altura-x pequena tornam-se ilegíveis, e você acaba compensando aumentando o tamanho, o que quebra a densidade da interface.
4. Caracteres inequívocos. 1, l e I; 0 e O; rn e m. Produtos exibem IDs, chaves de API, códigos de erro e nomes de usuário. Uma fonte onde esses caracteres se confundem gera tickets de suporte, e isso é invisível em um espécime de lorem ipsum.
5. Uma licença que cubra web apps. Self-hosting, incorporação em apps e a faixa de tráfego esperada. Esta é a restrição que costuma ser descoberta por último e a que mais prejudica, razão pela qual as Google fonts de licença aberta dominam todas as listas.

Esses cinco pontos eliminam a maioria das tipografias, e é exatamente por isso que os mesmos nomes continuam recorrendo. Mas note o que *não* está na lista: nada sobre humor, era ou personalidade. As restrições estreitam o campo para algumas dúzias de famílias, não para quatro — e a escolha restante é genuinamente sua.

Se a fonte de corpo de todo mundo é um grotesk neutro, igualá-los nesse ponto não custa nada e diferenciar-se ali rende pouco — o usuário não fica admirando a tipografia nas células da sua tabela. Outros dois caminhos são muito mais eficazes:

• Um papel de display genuinamente diferente. Uma sans condensada, uma serifada real ou um grotesk de formato distinto usado apenas para títulos de página e superfícies de marketing. Ela aparece raramente e define a voz do produto e, como não carrega textos densos, não precisa passar por todas as cinco restrições acima.
• Uma monospace escolhida, não herdada. Qualquer produto que exiba código, IDs, timestamps ou métricas tem uma fonte mono na tela constantemente. Deixá-la como o padrão do navegador é uma decisão não tomada e visível; escolher uma é um movimento barato e distintivo que ninguém copia.

Combinações reais de kits de produção seguem exatamente esse modelo: uma sans condensada sobre um corpo neutro; um display serifado sobre uma sans geométrica; ou uma única família usada em ambos os papéis quando o produto é tão denso que uma segunda fonte seria ruído. O que nenhuma delas faz é combinar dois grotesks semelhantes e esperar que a diferença seja percebida.

Aqui estão três desses modelos renderizados ao vivo, para que você possa comparar o *papel de display* diretamente — o único lugar onde a tipografia de um produto difere significativamente. Leia-os na extremidade de legenda da escala, e não na de título: tudo parece distinto a 48px.

Esta é a parte que as listas nunca abordam, e é onde a maioria das tipografias de produto realmente falha. Uma família perfeitamente escolhida em uma escala ad-hoc parece pior do que uma família simples em uma escala consistente.

Defina quatro coisas e documente-as: um tamanho base, uma proporção entre os degraus, um conjunto pequeno de alturas de linha (line heights) e quais pesos são permitidos. Uma proporção entre 1.2 e 1.25 adequa-se a UIs de produtos densos — proporções maiores criam páginas de marketing lindas, mas não deixam nada utilizável entre um cabeçalho de seção e um label de tabela. A altura da linha deve diminuir conforme o tamanho cresce, embora as pessoas esperem o contrário. E restringir os pesos permitidos a dois ou três é o que impede que a base de código acumule cinco.

As interfaces são cada vez mais geradas a partir de briefings escritos, e a tipografia é onde esses briefings são mais rasos. Analisamos 299 arquivos DESIGN.md públicos — o documento que um agente de código lê antes de escrever a UI. 83% mencionam tipografia, o que parece bom até você ver o que dizem: 44% nunca declaram um único valor de tamanho concreto, e 54% contêm pelo menos um adjetivo imensurável, sendo os mais comuns "clean" ou "moderno".

"A tipografia deve parecer refinada" não é uma especificação — é um acordo. Um agente satisfaz isso com sua ideia média de refinado, que é Inter a 16px com altura de linha de 1.5, e o agente de todo mundo faz o mesmo. Uma família nomeada, um tamanho base, uma proporção e uma lista de pesos permitidos mudam o resultado em quatro linhas.

1. 1

   Filtre pelas cinco restrições

   Numerais tabulares, separação de peso no seu tamanho de corpo, altura-x, ambiguidade de caracteres, licença. Isso leva vinte minutos e elimina a maior parte das opções antes mesmo do gosto pessoal entrar em jogo.

2. 2

   Teste a 13px em uma tabela

   Não em um espécime. Monte uma tabela real com números, uma coluna de ID e uma mistura de pesos 400 e 500. Quase todas as falhas aparecem aqui e em nenhum outro lugar.

3. 3

   Decida se você precisa de uma segunda família

   Se o produto for denso, provavelmente não — invista o esforço na escala. Se adicionar uma, escolha uma fonte de display que seja inconfundivelmente diferente.

4. 4

   Escolha a monospace deliberadamente

   Se qualquer código, ID ou timestamp aparecer na sua UI, esta fonte estará na tela constantemente e, geralmente, será o padrão do navegador por acidente.

5. 5

   Documente a escala

   Tamanho base, proporção, alturas de linha, pesos permitidos e a regra dos numerais. No repo, onde tanto a próxima pessoa quanto o agente farão a leitura.