Regras de Legibilidade: Por que ninguém lê além do seu hero no mobile

Você envia a página. O copy é afiado. Analytics diz que visitantes chegam, rolam algumas centenas de pixels e saem.

Abra no seu telefone. Segure na distância que realmente usa. Tente ler o texto do corpo sem dar zoom. Se estiver apertando, seus visitantes também estão, e não vão lutar com sua tipografia para encontrar sua proposta de valor.

Legibilidade é o assassino silencioso de páginas de destino construídas sozinhas. Texto minúsculo, contraste baixo, espaçamento de linha apertado. Cada um é invisível em sua ferramenta de design e óbvio em um telefone real. Conserte os quatro abaixo e você manterá mais visitantes após o fold que qualquer mudança de copy.

Legibilidade vs legibilidade, distinção rápida

• Legibilidade, o visitante consegue dizer uma letra de outra?
• Legibilidade, o visitante consegue ler um parágrafo sem parecer trabalho?

Ambos importam. A melhor tipografia é a que visitantes não notam que estão lendo.

"Legibilidade deveria ser invisível. Se o usuário notar o esforço para ler, algo está errado." , Oliver Reichenstein

Texto difícil de ler força o cérebro a gastar energia decodificando letras em vez de absorver sua mensagem. Os visitantes não dizem "seu line height está apertado". Eles apenas saem.

Por que isto importa em uma página de destino

Tempo na página

Texto confortável se lê. Texto desconfortável se pula. Sua proposta de valor apenas chega se visitantes realmente a leem.

Conversão

Se seu texto de botão CTA é difícil de ler, visitantes não clicam. Se sua letra pequena de preço é ilegível, visitantes desconfiam.

Confiança

Texto cinza minúsculo em branco lê como "letra pequena". Os visitantes associam letra pequena com termos escondidos. Texto grande, generoso, confortável lê como confiante.

Acessibilidade

A maioria das regras de legibilidade se sobrepõem com WCAG. Segui-las mantém sua página usável para visitantes com baixa visão e para qualquer um lendo em glare ou com brilho diminuído.

---

As quatro configurações de legibilidade que toda página de destino precisa

1. Texto do corpo em mínimo de 16px

12px e 14px eram o padrão em 2010. Não são o padrão agora. No móvel, qualquer coisa abaixo de 16px causa auto-zoom em campos de formulário e força visitantes a aproximar o telefone do rosto.

Faça: Mínimo 16px para corpo. 18px é melhor para páginas de marketing. Não faça: Use 12px para "elegância". Parece elegante em Figma e quebrado em um telefone.

2. Contraste alto, aim para 7:1 em corpo

Contraste é a diferença em luminância entre texto e fundo. Cinza claro em branco pode parecer "sutil" em seu editor. Do lado de fora ao sol, desaparece.

Faça: Rodar suas cores através de um verificador de contraste. Aim para no mínimo 7:1 em texto do corpo. Veja Acessibilidade de Cor. Não faça: Use cinza claro em branco ou cinza médio em escuro. Seu cérebro de designer pode amar. Visitantes reais não vão ler.

3. Line height ao redor de 1.5x

Line height (o espaço vertical entre linhas) decide se seu parágrafo parece um parágrafo ou uma parede.

Faça: Configure body line-height para 1.5x o tamanho da fonte (então 24px line height para 16px text). Aperte para 1.2x para cabeçalhos grandes. Não faça: Use o padrão 1.0-1.1. As linhas se empilham em cima uma da outra e visitantes desistem.

4. Use peso real de fonte, não hairline

Thin (100) e Hairline (200) pesos parecem bonitos em ferramentas de design e desaparecem em telas reais, especialmente quando brilho está baixo.

Faça: Use Regular (400) ou Medium (500) para corpo. Veja Word Weight para a imagem cheia. Não faça: Use pesos abaixo de 300 para qualquer coisa que você realmente quer visitantes lerem.

---

Maneiras comuns de quebrar isto

Linhas longas de texto

• O erro: Texto do corpo que roda a largura cheia de um monitor de 1440px, 120 caracteres por linha. O olho se perde entre o fim de uma linha e o início da próxima.
• O conserto: Cap line length em 45 a 75 caracteres. Use um max-width em seus containers de texto.

Headers que parecem texto do corpo

• O erro: Seções que todas parecem o mesmo tamanho e peso. Os visitantes não conseguem digitalizar.
• O conserto: Faça hierarquia óbvia. Jumps de tamanho distintos entre H1, H2 e corpo. Veja Tamanho Importa.

Centrando parágrafos

• O erro: Blocos longos centralizados porque "parecem balanceados". O olho tem que caçar o início de cada linha.
• O conserto: Alinhe à esquerda qualquer coisa com mais que três linhas. Veja Alinhamento de Texto.

---

Como produtos reais fazem isto

Medium

Medium é o padrão ouro para leitura digital. Generoso 1.5-1.6x line height, tamanho generoso de fonte, espaço generoso ao redor do texto. O espaço não é vazio, está mantendo o leitor dentro do parágrafo.

The New York Times

The Times empacota muito mais na página que Medium, e ainda assim lê limpamente. O truque é hierarquia rigorosa, serifs distintos para histórias, sans-serifs para navegação e metadata. Os visitantes sempre sabem onde estão.

---

Princípios relacionados

Legibilidade é uma peça. Estes emparelham com ela:

Acessibilidade de Cor

Escolha cores que funcionem para visitantes com baixa visão e em telas com glare.

---

Perguntas frequentes