Tipografia para web: como escolher fontes que funcionam

Tipografia responde por cerca de 95% da informação em qualquer interface digital. Dito isso, a maioria dos sites desperdiça esse potencial com escolhas que parecem inofensivas mas comprometem legibilidade, hierarquia e até performance.

Escolher fonte para web não é o mesmo que escolher fonte para impressão. As regras são diferentes, as restrições são diferentes e os erros típicos também.

Por que tipografia na web é diferente

No impresso, você controla o ambiente: papel, tinta, tamanho de impressão. Na web, você controla muito menos — tela pode ser qualquer coisa de um Apple Watch a um monitor 4K, o sistema operacional renderiza fontes de forma diferente, e o usuário pode aumentar o tamanho base do texto por acessibilidade.

Isso muda as prioridades:

1. Legibilidade em telas é mais importante que elegância em PDF
2. Performance importa — cada fonte web que você carrega adiciona peso à página
3. Hierarquia precisa ser clara independentemente do dispositivo

Um erro comum é escolher uma fonte que fica linda no Figma a 16px num Mac Retina e só perceber depois que ela fica ilegível em telas Android de densidade menor — que ainda representam uma parcela significativa dos usuários no Brasil.

Fontes decorativas com traços finos também tendem a desaparecer em renderizações menores. O que funciona impresso em papel couché pode ser ilegível numa tela de 72ppi.

Os três papéis tipográficos que todo site precisa definir

Antes de escolher fontes, defina quais papéis tipográficos o site vai ter:

Papel	Uso	Características ideais
Display	Títulos grandes (H1, H2 de destaque)	Pode ser expressiva, alto impacto
Texto	Corpo, parágrafos, conteúdo longo	Alta legibilidade em tamanhos menores
Interface	Labels, botões, tags, navegação	Funcional, clara em tamanhos pequenos

A maioria dos sites de negócio funciona bem com duas fontes: uma display (para títulos) e uma de texto (para o restante). Três é o máximo razoável — acima disso, a carga de download aumenta e a coerência visual cai.

Algumas marcas funcionam com uma única fonte em pesos diferentes. Isso é elegante, mas exige uma fonte muito versátil — que funcione tanto em 64px para display quanto em 15px para texto corrido.

O que torna uma fonte legível em telas

Altura-x (x-height)

A altura-x é a proporção entre a letra minúscula 'x' e a letra maiúscula. Fontes com x-height alto (como Inter, Lato, Source Sans) são mais legíveis em tamanhos pequenos porque as letras minúsculas ficam mais abertas e com mais espaço interno.

Espaçamento entre letras

Texto longo em caixa alta fica ilegível sem rastreamento extra. Botões e labels em caixa alta precisam de pelo menos letter-spacing: 0.05em para não colapsar as letras visualmente.

Em corpo de texto longo, evite letter-spacing negativo — ele comprime as letras e aumenta o esforço de leitura, especialmente em tamanhos menores.

Contraste de stroke

Fontes com alto contraste entre traços finos e grossos (como didones — Bodoni, Didot) ficam bonitas em grandes tamanhos mas perdem legibilidade em 14-16px. Reserve essas fontes para uso display com tamanhos acima de 32px. Em corpo de texto, fontes de contraste moderado são mais seguras.

Espaçamento entre linhas (line-height)

Para texto corrido, line-height entre 1.5 e 1.7 é o ideal para a maioria das fontes. Menos que 1.4 cria linhas que parecem grudadas. Mais que 1.8 separa demais e prejudica a leitura contínua.

Fontes que funcionam bem em projetos reais

Para texto/corpo:

• Inter — excelente x-height, criada especificamente para interfaces digitais, gratuita
• DM Sans — mais suave que Inter, boa para projetos com tom mais editorial
• Plus Jakarta Sans — caráter próprio sem ser excêntrica, funciona bem em branding

Para display:

• Fraunces — personalidade forte, fonte variável com boa expressividade em títulos grandes
• Playfair Display — clássica, funciona bem em branding premium e editorial
• Syne — geométrica, boa para tech, design e marcas com posicionamento contemporâneo

Para interface e labels:

• DM Mono — compacta, boa para tags e labels de interface
• JetBrains Mono — legibilidade excepcional para código e dados técnicos

Todas estão disponíveis gratuitamente no Google Fonts.

Como combinar fontes sem erro

A combinação mais segura: serifa + sans-serif. O contraste de categorias cria hierarquia natural sem muito esforço.

Combinações que funcionam consistentemente:

1. Fraunces (display) + Inter (texto) — editorial com praticidade
2. Playfair Display (display) + Source Sans 3 (texto) — clássico e muito legível
3. Syne (display) + DM Sans (texto) — contemporâneo, funciona bem para tech e design

O erro a evitar: duas fontes sem contraste perceptível. Usar duas sans-serifs geométricas juntas cria confusão — o leitor não percebe por que existem duas fontes diferentes e a hierarquia se perde.

Outro erro comum: misturar três ou mais famílias sem sistema. Mais de duas fontes exige uma lógica clara de quando usar cada uma — e mesmo assim, raramente melhora o resultado.

Performance: o custo oculto das fontes web

Cada weight de uma fonte é um arquivo separado. Uma combinação de duas fontes com 4 weights cada (regular, semibold, bold, italic) pode adicionar 400-600KB à sua página — o que impacta diretamente o LCP e o tempo de carregamento geral.

Estratégias para reduzir impacto:

1. Use font-display: swap — mostra a fonte do sistema enquanto a web font carrega, evitando texto invisível
2. Especifique apenas os weights que você vai usar — se usa 400 e 600, não baixe os 9 weights disponíveis
3. Prefetch as fontes críticas — <link rel="preload" as="font" crossorigin> no <head>
4. Considere fontes variáveis — um único arquivo substitui múltiplos weights com menor tamanho total
5. Hospede localmente — fontes hospedadas no próprio servidor evitam latência de conexão com o Google CDN

Escala tipográfica para web

Elemento	Desktop	Mobile	Weight
H1	48-64px	32-40px	500-700
H2	32-40px	24-32px	500-600
H3	22-28px	18-22px	500-600
Corpo	17-18px	16px	400
Caption	13-14px	12-13px	400
Label/UI	11-12px	11px	500-600

Em mobile, 16px é o mínimo absoluto para texto de leitura longa. O iOS considera 16px o mínimo para não disparar zoom automático em campos de formulário — um detalhe de UX que afeta diretamente a experiência.

Tipografia como parte da identidade visual

Fontes fazem parte da identidade visual — não são uma decisão independente do design do site. A fonte que o site usa precisa ser compatível com a que aparece nas apresentações, nas redes sociais e nos materiais impressos.

Quando a tipografia é inconsistente entre canais — um Instagram com Montserrat e um site com Roboto, por exemplo — a percepção da marca sofre mesmo que cada peça individualmente pareça ok.

Definir tipografia como parte de um sistema de identidade visual coeso poupa tempo em todos os projetos futuros e cria consistência sem esforço adicional.

Conclusão

Tipografia não é detalhe estético — é a estrutura que organiza informação e guia o leitor através do conteúdo. Sites com tipografia ruim exigem mais esforço cognitivo para ler, e visitantes que não conseguem articular por que algo "parece difícil de ler" simplesmente fecham a aba.

Se você está planejando um novo site ou revisando o atual, tipografia merece o mesmo nível de atenção que paleta de cores e layout. A diferença entre uma fonte errada e uma certa pode ser a diferença entre um site que cansa e um site que convida a continuar lendo.