Um guia prático para tipografia legível na web moderna

Por que a maioria dos sites é mais difícil de ler do que deveria ser

O site médio em 2026 vem com uma família de fontes personalizada, cores de marca cuidadosamente escolhidas e um design system que especifica espaçamentos até o pixel. Ainda assim, o texto corrido — aquilo que a maioria dos visitantes realmente veio ler — muitas vezes aparece em 14px, em um cinza de baixo contraste, definido em uma fonte otimizada para títulos, não para parágrafos.

Isto não é uma crítica aos designers. É um lembrete de que legibilidade é uma disciplina distinta do design visual, e as duas nem sempre se alinham. Uma fonte que parece nítida em uma seção hero pode ser cansativa no comprimento de um parágrafo. Uma paleta de cores que fica bem em fotografias pode falhar nas verificações de contraste. Um layout que funciona em um monitor de 27 polegadas pode se comprimir em uma coluna estreita no mobile.

A boa notícia: tipografia legível não exige diploma em tipografia. Exige atenção a um pequeno conjunto de variáveis que têm impacto desproporcional.

Tamanho da fonte: maior do que você imagina

O erro de legibilidade mais comum na web é texto corrido pequeno demais. Designers frequentemente definem o texto do corpo em 14px ou 15px porque ele "parece limpo" em escala desktop, e depois esquecem que uma parcela significativa dos leitores está em celulares, muitas vezes em condições de iluminação menos que ideais.

Uma base prática para texto corrido em 2026:

• Desktop: mínimo de 18px, preferencialmente 20px
• Mobile: mínimo de 16px, preferencialmente 18px

Esses números parecem grandes se você está acostumado a tipos menores, mas refletem como as pessoas realmente leem em telas. Texto maior reduz a fadiga visual, melhora a compreensão e torna seu conteúdo acessível a leitores com leve deficiência visual que não ajustaram as configurações do navegador.

Se o seu design system exige tipos menores, teste em um celular sob a luz do sol. Se você precisar apertar os olhos, está pequeno demais.

Altura de linha: dê espaço para o texto respirar

A altura de linha (leading) é o espaço vertical entre linhas de texto. Apertada demais, e as linhas se confundem. Solta demais, e o olho perde o fio entre uma linha e outra.

Para texto corrido, uma altura de linha de 1.5 a 1.7 funciona para a maioria das fontes. Títulos podem ser mais compactos (1.1 a 1.3), mas o texto do corpo precisa de espaço para respirar.

O CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Este é um dos ganhos de legibilidade mais fáceis. Se o seu texto corrido atualmente está em line-height: 1.2 ou usa um valor fixo em pixels, mude isso hoje.

Comprimento da linha: menor do que você imagina

O comprimento ideal de linha para texto corrido é de 45 a 75 caracteres por linha, aproximadamente 8 a 12 palavras. Linhas com mais de 90 caracteres dificultam que o olho volte ao início da linha seguinte. Linhas com menos de 40 caracteres criam uma experiência de leitura truncada e fragmentada.

A maioria dos sites erra aqui ao deixar o texto ocupar toda a largura da viewport, especialmente no desktop. Um monitor de 1920px de largura pode comportar mais de 150 caracteres por linha, o que é exaustivo de ler.

A correção é aplicar uma largura máxima ao contêiner de texto:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

A unidade ch é pouco usada, mas perfeita para isso: ela escala com o tamanho da fonte e corresponde aproximadamente à largura dos caracteres.

Contraste: não é tão simples quanto preto no branco

A WCAG 2.1 especifica uma taxa mínima de contraste de 4.5:1 para texto corrido (nível AA) e 7:1 para acessibilidade aprimorada (nível AAA). A maioria dos sites atende a isso no papel, mas falha na prática porque usa texto cinza-claro sobre fundos brancos.

Infratores comuns:

• #666666 em #FFFFFF (4.54:1, passa por pouco)
• #777777 em #FFFFFF (4.47:1, falha)
• Qualquer tom mais claro que #767676 sobre branco (falha)

Se o seu design system especifica "text-secondary" como um cinza-claro, teste. O WebAIM contrast checker é a forma mais rápida de verificar.

O modo escuro complica isso ainda mais. Texto branco puro sobre preto puro cria halation (um efeito de brilho) que é mais difícil de ler do que um branco levemente acinzentado sobre cinza-escuro. Uma abordagem melhor:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Escolha da fonte: fontes padrão são melhores do que você imagina

Fontes web personalizadas são onipresentes, mas vêm com contrapartidas. Elas adicionam latência, aumentam o peso da página e podem bloquear a renderização se não forem carregadas com cuidado. Para texto corrido, fontes do sistema muitas vezes são a melhor escolha.

Uma pilha robusta de fontes do sistema em 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Isso oferece San Francisco no macOS/iOS, Segoe UI no Windows e Roboto no Android — todas fontes altamente legíveis, desenhadas profissionalmente, que carregam instantaneamente.

Se você usar uma fonte personalizada para texto corrido, escolha uma projetada para leitura longa, não para display. Evite:

• Pesos ultraleves ou ultranegritos para texto do corpo
• Variantes condensadas ou expandidas
• Fontes com baixa altura-x (a altura das letras minúsculas)

Teste a fonte escolhida no comprimento de um parágrafo antes de se comprometer.

Tipografia responsiva: escalas fluidas de tipo

Tamanhos fixos de fonte não escalam bem entre dispositivos. Uma fonte de corpo de 20px que é confortável no desktop pode parecer grande demais no mobile.

A tipografia fluida usa clamp() para escalar o tamanho da fonte suavemente entre um mínimo e um máximo:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Isso escala de 16px em telas pequenas para 20px em telas grandes, com interpolação suave no meio. É mais sofisticado do que breakpoints com media queries e se adapta a qualquer largura de viewport.

Para uma escala tipográfica completa (títulos, corpo, texto pequeno), ferramentas como Utopia geram escalas fluidas com base nas suas restrições.

Espaçamento de parágrafos e alinhamento de texto

Dois pequenos detalhes que importam:

1. Espaçamento de parágrafos: Adicione espaço entre parágrafos (margin-block-end: 1em) ou use recuo na primeira linha (text-indent: 1.5em), mas não ambos. A maior parte do conteúdo web usa espaçamento.

1. Alinhamento de texto: Alinhado à esquerda (ou à direita para idiomas RTL) é quase sempre mais legível do que texto justificado, que cria espaçamentos irregulares entre palavras, a menos que a hifenização esteja ativada. Texto corrido centralizado é difícil de ler e deve ser reservado para trechos curtos.

Testando a legibilidade na prática

Legibilidade não é puramente objetiva, mas você pode testá-la:

• Leia seu próprio conteúdo no celular em diferentes condições de iluminação
• Execute uma auditoria de acessibilidade no Lighthouse para identificar problemas de contraste e tamanho de fonte (veja como ler um relatório Lighthouse sem entrar em pânico para orientação)
• Peça a alguém com mais de 50 anos para ler uma página sem ajustar as configurações
• Verifique suas análises para a taxa de rejeição em páginas com muito texto — se as pessoas saem rapidamente, a legibilidade pode ser um fator

Se o seu conteúdo é difícil de ler, as pessoas não vão lê-lo. É simples assim.

Como isso fica na prática

Um estilo de texto corrido legível em 2026 poderia ser assim:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Isso cobre tamanho da fonte, altura de linha, comprimento de linha, contraste e escala responsiva em cerca de uma dúzia de linhas de CSS. Não é empolgante, mas funciona.

Quando quebrar as regras

Estas diretrizes se aplicam ao texto corrido — os parágrafos que as pessoas leem para obter informação. Títulos, legendas, rótulos de UI e textos de marketing têm restrições diferentes e podem flexibilizar essas regras.

Mas, se alguém chegou ao seu site para ler um artigo, uma página de documentação ou uma descrição de produto, tipografia legível não é opcional. É a expectativa básica.