Tipografia para quem não é designer: 5 decisões que resolvem

Se você programa e faz a própria interface, tipografia é provavelmente o que mais separa suas telas das que parecem feitas por alguém que sabe o que está fazendo. E é a área onde melhorar exige menos talento — quase tudo aqui é decisão objetiva, não gosto.

Cinco decisões cobrem a maior parte do caminho.

1. Uma fonte. No máximo duas.

A tentação de misturar três ou quatro famílias é forte e o resultado é sempre bagunçado. Uma fonte bem usada, com variação de peso e tamanho, produz hierarquia suficiente para qualquer interface.

Se quiser duas, use o contraste com propósito: uma para títulos e outra para o corpo do texto. Combinações que funcionam sem esforço:

• Serifada nos títulos, sem serifa no corpo — sensação editorial, boa para conteúdo de leitura.
• Sem serifa em tudo, com pesos diferentes — sensação de produto, boa para painel e aplicativo.
• Monoespaçada só em código e rótulos técnicos — não conta como segunda fonte, conta como sinalização.

O que não funciona é duas fontes parecidas. Duas sem serifa levemente diferentes não parecem escolha — parecem descuido.

2. Escala em vez de números avulsos

O sinal mais comum de interface amadora é ter oito tamanhos de fonte que ninguém decidiu: 15px aqui, 17px ali, 22px acolá, cada um escolhido no momento.

Defina de cinco a sete tamanhos e use só eles. Uma escala que funciona para quase tudo:

• 12px — rótulo, legenda, texto auxiliar
• 14px — texto de apoio, interface densa
• 16px — corpo padrão
• 20px — subtítulo
• 28px — título de seção
• 40px+ — título de página

Repare que os saltos aumentam. Escala linear não funciona: a diferença entre 16 e 18 é imperceptível e vira ruído, enquanto entre 28 e 40 é hierarquia clara.

Se dois textos têm papéis diferentes, a diferença de tamanho precisa ser óbvia. Se é sutil demais para notar, ou iguale ou afaste — meio-termo só parece erro.

3. Corpo de texto a partir de 16px, e não menos

Texto pequeno parece sofisticado na tela grande de quem projeta e é sofrido para quem lê. Vale lembrar que boa parte do público não tem a mesma visão que você — e que a maioria vai ler no celular, em movimento, com iluminação ruim.

16px é o piso do corpo de texto. Abaixo disso, só para informação genuinamente secundária.

E cuidado com o cinza claro. Texto em cinza sobre branco parece elegante e frequentemente reprova em contraste. A recomendação de acessibilidade pede pelo menos 4,5:1 entre texto e fundo — e isso não é detalhe burocrático: é a diferença entre alguém conseguir ler ou não.

4. Entrelinha e largura de linha

Duas medidas que quase ninguém ajusta e que mudam muito a sensação de leitura.

Entrelinha — o espaço entre as linhas:

• Corpo de texto: 1,5 a 1,7. O padrão do navegador é apertado demais para leitura corrida.
• Títulos: 1,1 a 1,25. Texto grande precisa de menos respiro; com entrelinha de corpo, o título parece desmontado.

Ou seja: quanto maior a fonte, menor a entrelinha proporcional. É contraintuitivo e é o ajuste que mais melhora um título de uma vez.

Largura da linha — entre 60 e 80 caracteres. Linha muito longa faz o olho perder o começo da linha seguinte; muito curta quebra o ritmo. Numa tela larga, isso significa limitar a largura do bloco de texto, não deixar ocupar tudo.

Na prática, uma largura máxima em torno de 65 caracteres resolve — e é por isso que sites de conteúdo têm coluna estreita mesmo em monitor grande. Não é desperdício de espaço: é legibilidade.

5. Peso e espaçamento comunicam hierarquia melhor que tamanho

Quando tudo é grande, nada é importante. Antes de aumentar a fonte para destacar algo, tente:

• Peso — negrito no mesmo tamanho já cria hierarquia clara.
• Cor — texto secundário em cinza médio afasta sem precisar diminuir.
• Espaço em volta — o recurso mais subestimado. Um título com bastante espaço acima parece mais importante que um título maior espremido.

Sobre espaço, existe uma regra que resolve muita confusão: o espaço acima de um título deve ser maior que o espaço abaixo dele. Assim o título fica visualmente colado ao conteúdo que ele nomeia, em vez de flutuar no meio. Quando isso está invertido, a página parece desorganizada e é difícil apontar por quê.

Três erros que aparecem sempre

Texto todo em maiúsculas em frase longa. Maiúscula funciona em rótulo de duas palavras. Em frase, elimina a variação de altura das letras que o olho usa para reconhecer palavras — a leitura fica bem mais lenta.

Justificado na web. Sem hifenização decente, o navegador abre buracos irregulares entre palavras. Alinhado à esquerda é melhor em quase todo caso.

Itálico em bloco longo. Serve para ênfase de uma palavra ou uma citação curta. Um parágrafo inteiro em itálico cansa.

Um detalhe técnico que vale a pena

Fonte externa que demora a carregar produz um efeito ruim: o texto aparece numa fonte, depois pula para outra, e o layout se mexe no meio da leitura.

Duas coisas resolvem: usar font-display: swap para o texto aparecer imediatamente na fonte do sistema, e escolher uma fonte de reserva com métricas parecidas, para o salto ser pequeno. Se o seu público está em conexão ruim, considere usar a fonte do sistema — ela carrega instantaneamente e é bem melhor do que muita gente imagina.

O resumo

Uma família de fonte. Cinco a sete tamanhos definidos, com saltos crescentes. Corpo a partir de 16px com contraste que passa. Entrelinha 1,5 no texto e 1,2 no título. Largura de linha entre 60 e 80 caracteres. Hierarquia por peso e espaço antes de tamanho.

São seis regras. Nenhuma depende de sensibilidade estética — todas dão para verificar. E elas cobrem a distância entre uma tela que parece improvisada e uma que parece feita com cuidado.