Tipografia para web: como escolher fontes que funcionam

Um usuário forma a primeira impressão de um site em cerca de 50 milissegundos, segundo pesquisa do Aesthetics and Usability Lab do MIT documentada pela Nielsen Norman Group. Boa parte dessa impressão vem da tipografia, antes de qualquer palavra ser lida.

Mesmo assim, a fonte costuma ser a última decisão do projeto. O cliente escolhe uma família "bonita" no Google Fonts, aplica em título e corpo sem critério e segue para o próximo item do briefing. O problema aparece depois: texto difícil de ler no celular, hierarquia confusa, ou uma página mais lenta só por causa do arquivo de fonte.

Este post cobre os critérios que decidem se uma tipografia funciona ou atrapalha: legibilidade, hierarquia, pareamento de fontes, performance de carregamento e a diferença entre fonte de sistema, Google Fonts e fonte paga.

Critérios de legibilidade que decidem se o texto vai ser lido

Legibilidade não é opinião estética. É um conjunto de variáveis mensuráveis que determina se o usuário lê o texto sem esforço ou desiste no meio do parágrafo.

O tamanho mínimo de corpo de texto é 16px, em desktop e mobile. Muitos sites reduzem para 13px ou 14px em telas pequenas para "caber mais conteúdo". O efeito é o oposto do esperado: o usuário rola mais rápido sem ler.

A altura de linha (line-height) ideal fica entre 1.4 e 1.6 vezes o tamanho da fonte. Menos que isso, as linhas colam e o olho perde a referência. Mais que isso, o texto perde coesão visual.

A largura de linha também importa: entre 60 e 75 caracteres por linha é a faixa que a maioria dos estudos de leitura aponta como ideal. Acima de 90 caracteres em telas largas, o olho cansa porque a distância entre o fim de uma linha e o início da próxima fica grande demais.

Contraste de cor é outro ponto que a estética costuma sacrificar. O WCAG recomenda contraste mínimo de 4.5:1 entre texto e fundo. Cinza claro sobre branco pode parecer sofisticado no Figma, mas falha esse critério na prática e exclui usuários com baixa visão.

Por fim, a fonte precisa distinguir bem caracteres parecidos: "I" maiúsculo, "l" minúsculo e "1" precisam ser visualmente diferentes. Isso pesa mais em formulários, preços e telefones do que em títulos.

Hierarquia tipográfica: dar ordem visual ao conteúdo

Hierarquia é o que guia o olho do usuário pela página na ordem certa: título, subtítulo, corpo, detalhe. Sem ela, tudo compete pela mesma atenção.

Uma escala funcional para sites institucionais segue algo como: H1 entre 32px e 40px, H2 entre 24px e 28px, H3 entre 18px e 20px, corpo em 16px a 18px, e texto de apoio em 13px a 14px. Cada salto precisa ser perceptível, não sutil, ou a hierarquia desaparece.

Peso da fonte (font-weight) é tão importante quanto o tamanho. Um H2 em 24px regular pode parecer mais fraco que um subtítulo em 18px semibold — combinar tamanho e peso dá mais controle do que só aumentar a fonte quando algo precisa de destaque.

Cor e espaçamento também reforçam ou quebram a hierarquia. Um título cinza claro ao lado de um corpo preto inverte a ordem de leitura natural. Espaço em branco antes de cada H2 já sinaliza início de nova seção, sem precisar de linha divisória.

Esse assunto conecta direto com como o layout inteiro guia a atenção do visitante, não só a tipografia isolada. Vale aprofundar em hierarquia visual no web design para entender como tipografia, cor e espaçamento trabalham juntos na mesma página.

Pares de fonte que funcionam (e os que não funcionam)

A regra prática mais confiável é: no máximo duas famílias de fonte por site, uma para títulos e outra para corpo, ou uma única família com pesos variados fazendo os dois papéis.

Pareamentos que funcionam exploram contraste de categoria sem virar conflito. Uma serifada de personalidade no título com uma sans-serif neutra no corpo é a combinação clássica que resiste ao tempo: Lyon ou Tiempos no título com Inter ou Söhne no corpo, por exemplo. Duas sans-serif também funcionam quando têm proporção e altura de x diferentes o bastante para não parecerem a mesma fonte com bugs.

O erro mais comum é combinar duas fontes decorativas ou com muita personalidade: o resultado é visual barulhento, porque nenhuma cede espaço para a outra.

Sinais de que o pareamento de fontes do seu site está errado:

• As duas fontes têm o mesmo peso visual e competem pela mesma atenção
• Uma das fontes é ilegível em tamanho pequeno (comum em fontes script ou display)
• O título parece de um site e o corpo parece de outro, sem conexão de estilo
• Mais de duas famílias de fonte aparecem na mesma página, incluindo ícones e badges

Uma variable font resolve boa parte desse problema de forma nativa: uma única família com múltiplos pesos e larguras dentro do mesmo arquivo, garantindo consistência visual entre título e corpo automaticamente.

Performance de carregamento de fonte web

Fonte é o único elemento de design que pode travar a renderização do texto inteiro da página. Enquanto ela não carrega, o navegador decide entre esconder o texto (FOIT) ou mostrar com uma fonte substituta e trocar depois (FOUT).

A propriedade font-display no CSS controla esse comportamento. swap mostra uma fonte de sistema imediatamente e troca assim que a real carrega, evitando tela em branco, mas pode causar um pequeno salto de layout. optional dá à fonte uma janela curta para carregar; se não conseguir, mantém a fonte de sistema na sessão inteira. Para a maioria dos sites institucionais, swap é o equilíbrio certo.

Subsetting é outro ganho que a maioria dos sites ignora: carregar só os caracteres usados (o conjunto latino com acentuação em português, por exemplo) em vez do arquivo completo com grego, cirílico e símbolos que o site nunca usa. Isso pode cortar o peso da fonte em mais de 50%.

Variable fonts resolvem outro problema de performance. Em vez de um arquivo separado para regular, bold, semibold e italic, um único arquivo variável cobre todos os pesos: menos requisições, menos peso total, menos chance de flash entre pesos diferentes da mesma família.

Checklist de otimização de fonte web, em ordem de prioridade:

1. Definir font-display: swap (ou optional para priorizar estabilidade) em todas as declarações de @font-face
2. Aplicar subsetting para carregar só os caracteres do idioma do site
3. Usar <link rel="preload"> na fonte crítica do texto acima da dobra
4. Preferir variable fonts quando o design usa três ou mais pesos da mesma família
5. Hospedar a fonte no próprio domínio (self-host) em vez de depender de um CDN externo

Esse trabalho de performance não é só estética: fonte mal configurada afeta diretamente o Cumulative Layout Shift (CLS) quando o texto muda de tamanho na troca de fonte. Essa é uma das métricas que o Google usa para ranquear páginas. Para entender o conjunto completo, veja o que são Core Web Vitals.

Fonte de sistema, Google Fonts ou fonte paga: qual escolher

Essa é a decisão que a maioria dos donos de negócio nem sabe que está tomando, porque geralmente é o designer ou o desenvolvedor que escolhe sozinho. Ela tem impacto direto em custo, prazo e diferenciação de marca.

Critério	Fontes de sistema	Google Fonts	Fontes pagas
Custo	Gratuito	Gratuito	Licença paga (única ou recorrente)
Performance	Zero tempo de carregamento (já instalada no dispositivo)	Boa, se otimizada (subsetting, self-host)	Boa, se otimizada
Variedade	Limitada (system-ui, Arial, Segoe UI)	Ampla (1.500+ famílias)	Curada, geralmente exclusiva
Diferenciação de marca	Baixa	Média (muito usada por concorrentes)	Alta
Melhor uso	Apps e produtos onde velocidade pesa mais que identidade	Maioria dos sites institucionais e e-commerces	Marcas com posicionamento premium ou alta necessidade de diferenciação

Fontes de sistema têm uma vantagem que nenhuma fonte web iguala: carregamento instantâneo, porque já estão no dispositivo do usuário. O custo é a falta de personalidade.

Google Fonts é o meio-termo mais usado no mercado: gratuito, com curadoria decente e fácil de implementar com performance aceitável quando configurado direito. O risco é a familiaridade — Poppins, Montserrat e Roboto aparecem em uma fração enorme dos sites de pequenas empresas, o que dilui a diferenciação da marca.

Fontes pagas (Adobe Fonts, fundições como Klim, Commercial Type, Grilli Type) custam licença, mas entregam o que o gratuito raramente entrega: exclusividade de fato. Fazem sentido para marcas com posicionamento premium, onde a tipografia é parte central da diferenciação.

Tipografia responsiva: legibilidade em qualquer tela

Um tamanho de fonte fixo em pixels que funciona bem em um monitor de 27 polegadas pode ficar minúsculo ou desproporcional em um celular. Tipografia responsiva resolve isso com escalas fluidas em vez de valores fixos por breakpoint.

A função CSS clamp() permite definir um tamanho mínimo, um valor fluido baseado na largura da tela, e um tamanho máximo, tudo em uma linha. Isso evita dezenas de media queries só para ajustar tamanho de fonte e garante uma transição suave entre tamanhos de tela, em vez de saltos abruptos nos breakpoints tradicionais.

A largura de linha também precisa se adaptar. Um parágrafo com 75 caracteres por linha em desktop pode ter só 35 a 40 em mobile, o que exige revisar o line-height: linhas mais curtas toleram um espaçamento levemente mais apertado.

Esse cuidado com tipografia é parte de uma estratégia maior de adaptação de layout entre dispositivos. Para ver como isso se conecta com grid, imagens e navegação, veja design responsivo e mobile-first.

Tipografia como parte da identidade de marca

A fonte comunica posicionamento antes do usuário ler qualquer palavra. Uma serifada clássica comunica tradição. Uma geométrica sans-serif comunica modernidade e eficiência. Curvas mais orgânicas comunicam acessibilidade e proximidade.

Esse alinhamento precisa acontecer junto com o resto da identidade visual, não depois. Uma marca que investiu em uma paleta de cores sofisticada e aplica uma fonte genérica de sistema por cima deixa metade do trabalho de posicionamento na mesa. Vale revisar como isso se conecta em como escolher a paleta de cores da identidade visual.

Sinais de que a tipografia do seu site está desalinhada com o posicionamento da marca:

• A fonte do site é diferente da fonte usada no logo e nas peças de marketing
• O tom da fonte contradiz o discurso da marca (uma fonte séria para um posicionamento descontraído, ou o oposto)
• A fonte foi escolhida pelo desenvolvedor por conveniência técnica, sem consulta ao time de marca
• Concorrentes diretos usam exatamente a mesma fonte, sem nenhuma variação de peso ou tratamento que diferencie

Para não travar entre opções infinitas de fonte, siga uma ordem de decisão em vez de navegar catálogos por horas:

1. Defina o posicionamento de marca antes de abrir qualquer catálogo de fonte (formal, acessível, premium, técnico)
2. Escolha uma família principal que reflita esse posicionamento e tenha pelo menos 4 pesos disponíveis (regular, medium, semibold, bold)
3. Teste a legibilidade do corpo de texto em tamanho real, na tela real, não ampliada no Figma
4. Valide performance: peça para o desenvolvedor medir o peso total dos arquivos de fonte antes de aprovar
5. Confirme contraste de cor e hierarquia em pelo menos três tamanhos de tela antes de considerar a decisão final

Se o site já está no ar e a tipografia nunca passou por essa revisão, comece hoje: abra o site no celular e leia um parágrafo em voz alta, sentindo se exige esforço. Depois rode uma auditoria de performance para medir o peso real dos arquivos carregados.

Corrigir tipografia depois do lançamento custa menos do que parece, principalmente comparado ao custo de visitantes que saem antes de ler a proposta de valor. Se o diagnóstico apontar mais do que só a fonte, envolvendo hierarquia ou identidade visual como um todo, trate como parte de uma revisão maior de design, não como ajuste isolado de CSS.