Fonte de UI: métricas ópticas e 10 alternativas à Inter

Escolher uma fonte para interfaces não se resume a optar por uma sans-serif “limpa”. A proposta é avaliar dois critérios que reduzem ajustes de alinhamento: métricas verticais centradas pela altura das maiúsculas e uma altura-x alta.

Métricas verticais centradas

As métricas ideais igualam o espaço entre o topo das maiúsculas e o limite superior da caixa tipográfica ao espaço entre a linha de base e o limite inferior. Com isso, os rótulos tendem a ficar opticamente centralizados em botões e outros controles, além de se alinharem melhor aos ícones ao lado.

Essa característica também simplifica o sistema de design. Em vez de ajustar manualmente o CSS para cada tamanho de texto, é possível usar um único token de espaçamento vertical para os dois lados do botão. Sem esse equilíbrio, cada tamanho pode exigir valores diferentes de padding e novos ajustes de compensação.

A verificação pode ser feita no Figma. Basta escrever uma palavra como “Hanglovers”, ampliar o texto para 1.000 pixels e reduzir gradualmente a altura da linha. Se as bordas superior e inferior da caixa encostarem simultaneamente no topo do “H” e na linha de base, a fonte tem métricas verticais centradas. Caso contrário, ela pode funcionar bem para impressão, mas tende a exigir mais correções em interfaces.

O papel do CSS e da altura-x

As propriedades CSS text-box-trim e text-box-edge, antes propostas como leading-trim e text-edge, podem corrigir o desalinhamento da caixa tipográfica ao apará-la pela altura das maiúsculas e pela linha de base. Porém, em meados de 2026, o suporte ainda não é abrangente: o uso global indicado é de cerca de 79%, Chrome, Edge, Safari e iOS Safari oferecem suporte, mas o Firefox não, o que impede a inclusão no Baseline. Por isso, a recomendação é preferir fontes que já tenham métricas centradas. Além disso, essas propriedades não alteram a altura-x.

A altura-x é a altura principal das letras minúsculas. Para interfaces, o intervalo ideal é de aproximadamente 70% a 75% da altura das maiúsculas, com 75% como referência. Quanto mais altas as minúsculas, mais a palavra se aproxima visualmente de um bloco sólido e mais equilibrado parece o seu posicionamento. Abaixo de 70%, sobra espaço acima das minúsculas e o texto parece baixo. Em 100%, a fonte perde parte da diferença entre maiúsculas e minúsculas e assume um aspecto quase unicase, menos natural.

A orientação é combinar os dois critérios. A maiúscula inicial costuma servir de âncora visual para o posicionamento da palavra; a altura-x alta aproxima o restante das letras dessa âncora. Alinhar apenas pela altura-x pode fazer a maiúscula parecer projetada para fora da caixa, enquanto alinhar pela altura das maiúsculas funciona melhor quando as minúsculas têm massa suficiente.

Alternativas à Inter

Inter e San Francisco aparecem como referências de 75% de altura-x. As dez alternativas listadas também têm a altura das maiúsculas posicionada no centro óptico: Innovator Grotesk e Universal Sans (75%); Plain e SwissNow (73%); Muoto e Aktiv Grotesk (72%); Akkurat (71%); e Basier, CoFo Sans e Unifora (70%). A conclusão é que uma boa alternativa à Inter deve reproduzir a combinação de métricas verticais centradas e altura-x alta, não apenas sua aparência geral.