Indo direto à conclusão: um artigo fácil de ler não é aquele com uma fonte da moda. É aquele em que você entende do que se trata assim que abre, consegue voltar de onde parou se se distrair, não vê o layout quebrar quando aumenta o texto e lê com naturalidade em qualquer idioma. O leitor não vem para "vencer" o seu artigo. Quem tem que dar o caminho é o artigo.
Primeiro, o resumo em 3 linhas:
- Um bom ponto de partida prático é texto de uns 17-18 px, espaçamento entre linhas de 1,7 a 1,9 e linhas que não sejam longas demais. Não é uma lei universal.
- Com a WCAG 2.2 (o padrão internacional de acessibilidade na web), o importante é não quebrar contraste, zoom de texto de 200%, reflow em 320 px CSS (o conteúdo se reorganiza conforme a largura da tela), sobrescrita do espaçamento do texto e uso pelo teclado. [R1-R8]
- Para 12 idiomas, não é copiar e colar o mesmo CSS 12 vezes: é uma base comum de acessibilidade mais ajustes por sistema de escrita. [R10-R13]
1. Legibilidade não é questão de bom gosto: é um projeto em 3 camadas
A legibilidade tem pelo menos três camadas: dá para enxergar o texto, dá para acompanhar a escrita e dá para usar a página. Mesmo com 18 px, é cansativo se o texto for uma parede. Mesmo com texto simples, é cansativo se os botões forem minúsculos. Ou seja, "arrumar só o tamanho da fonte e pronto" é como lustrar a plaquinha da casa e arrancar a escada.
2. O leitor não lê tudo desde o início, então o artigo precisa ser legível em 4 níveis
Na web, ler por cima é o normal. Por isso, o artigo deve poder ser lido em quatro níveis: 5 segundos = título e abertura; 30 segundos = os títulos H2 e as negritas; 3 minutos = os pontos principais; leitura a fundo = o texto inteiro. Isso não quer dizer que só se pode escrever texto curto. Quer dizer que um texto longo precisa de muitas paradas no meio do caminho.
Se só os H2 já contam uma história coerente, se cada seção começa com uma pequena conclusão e se tabelas e listas permitem comparar rapidamente, quem lê tudo e quem só quer a resposta convivem na mesma página.
3. Comece com o texto em torno de 17-18 px
Não existe tamanho ideal absoluto para o texto na web. Mas fonte pequena demais prejudica a visibilidade e, em pesquisa de rastreamento ocular com páginas reais, fontes maiores foram associadas a fixações mais curtas. [R14] Na prática, comece com 17-18 px no corpo do texto e use unidades fáceis de ampliar, como rem.
O ponto importante é que "usei 18 px" não significa "é acessível". O critério Redimensionar Texto da WCAG 2.2 AA exige que o conteúdo e as funções não se percam ao ampliar até 200%. [R3] Se o menu some no instante em que o leitor dá zoom, aquela bela primeira tela de 18 px é só uma foto de recordação.
4. Espaçamento entre linhas, entre parágrafos e largura da linha reduzem o "trânsito das letras"
Um espaçamento de linhas de cerca de 1,7 a 1,9 como valor inicial dá folga a artigos longos na web. Deixe também um espaço claro entre parágrafos. O básico é um tema por parágrafo; evite blocões sem nenhuma quebra. [R9]
Para o alfabeto latino, há pesquisa em que uma largura média de cerca de 55 caracteres por linha funcionou bem, e na prática 55-70 caracteres é um ponto de partida fácil. [R15] O critério AAA de Apresentação Visual da WCAG indica 80 caracteres ou menos, e 40 ou menos para CJK (chinês, japonês e coreano). [R8] De novo, 55 não é verdade universal. Ajuste conforme a tela, o idioma e o tamanho do texto.
Texto justificado (alinhado nos dois lados) tende a deixar espaços irregulares entre as palavras. Na web, alinhar só à esquerda geralmente basta. [R8]
5. Fonte não é varinha mágica: use algo que se leia normalmente e carregue rápido
Entre serifa e sem serifa não há vencedor universal. Em um experimento controlado, não se viu grande efeito da serifa na velocidade de leitura. [R16] Além disso, uma metanálise de 2026 não encontrou evidência consistente de que "fontes especiais para dislexia", como a OpenDyslexic, melhorem o desempenho de leitura em relação às fontes padrão. [R17]
Ou seja, atender pessoas com deficiência não significa impor uma fonte especial. A base é tamanho suficiente, espaço em branco, formas de letra naturais, cobertura correta de caracteres e a possibilidade de o usuário ampliar. Se você der preferência à fonte do sistema ou a uma fonte comum de cada idioma, evita carregar webfonts gigantes.
6. Cor de fundo e contraste: texto cinza clarinho tem um "imposto do estilo" altíssimo
A WCAG 2.2 AA estabelece contraste de 4,5:1 para texto normal e de 3:1 ou mais para texto grande. [R2] Não há motivo para pôr cinza claro sobre branco só porque "parece chique" e dar um debuff nos olhos do leitor.
Vários estudos indicam que texto escuro sobre fundo claro (polaridade positiva) ajuda na revisão e na leitura de letras pequenas. [R18] Por isso, para o público geral, o tema claro é a escolha segura como padrão. Mas há quem prefira o modo escuro, então mantenha essa opção. Não há evidência forte o bastante para afirmar que o off-white é sempre mais saudável que o branco puro.
7. H1, H2 e H3 não são enfeite: são as placas de trânsito do artigo
O H1 é o assunto da página, o H2 é um argumento principal e o H3 é o detalhamento. Não finja um título só deixando o texto em negrito; dê significado a ele com a estrutura de títulos do HTML. Quem usa leitor de tela se move pela página pelos títulos, então eles são ao mesmo tempo design visual e navegação. [R7][R9]
O teste é simples: se você tirar só os H2, ainda dá para entender a linha do artigo? Se não, é provável que seus títulos sejam daqueles fabricantes de gente perdida, como "Capítulo 2", "Continuação" ou "Mais detalhes".
8. Negrito, listas, tabelas e caixas de conclusão são "placas de informação"
Negrito é para termos importantes, lista é para informações em paralelo, tabela é para comparação e caixa de conclusão é onde a decisão pousa. Dê um papel a cada um. Se você põe o texto todo em negrito, é como acender 100 luzes de alerta ao mesmo tempo: no fim, nenhuma se destaca.
Não diferencie links só pela cor; dê outra pista, como o sublinhado. E, com informação importante, não pare em "é vermelho, logo é perigoso": mostre o significado também com texto ou ícone.
9. Parta do modo "cérebro de dopamina", mas não compre o mito dos 8 segundos de atenção
O "cérebro de dopamina" aqui não é termo médico. É um apelido de brincadeira para o estado disperso da web atual: notificação → vídeo curto → outra aba → voltar → "onde eu estava lendo mesmo?". Não é uma expressão para xingar uma geração inteira ou pessoas com deficiência.
A solução não é transformar o artigo todo em vídeo curto. É escrever parágrafos curtos, títulos específicos, uma pequena conclusão por seção, um sumário quando for preciso e nomes próprios que permitam reconstruir o contexto ao voltar. Reprodução automática, carrosséis irrelevantes e pop-ups que tomam a tela no meio da leitura são como jogar uma cadeira na concentração do leitor, então reduza-os. [R9]
10. Acessibilidade para pessoas com deficiência é equipamento padrão, não "modo especial"
A base é mirar na WCAG 2.2 AA. Os itens típicos são zoom de texto de 200%, reflow equivalente a 320 px CSS sem rolagem lateral, contraste de 4,5:1, alvos de ponteiro de pelo menos 24×24 px CSS ou com espaçamento suficiente, uso pelo teclado, foco visível e um jeito de pular as partes repetidas. [R1-R7]
Os valores de Espaçamento de Texto ("entrelinha 1,5, espaço após parágrafo 2, espaçamento entre letras 0,12 em, entre palavras 0,16 em") não são uma ordem para usar esses valores no CSS inicial. O requisito AA é que, se o usuário sobrescrever o espaçamento com esses valores, o texto não se sobreponha nem desapareça e as funções não quebrem. [R5]
Na prática, deixar os botões principais com uns 44 px facilita o toque, mas o mínimo da WCAG 2.2 AA é 24×24 px CSS, com exceções. [R6]
11. Os 12 idiomas compartilham o mesmo sistema de design, sem impor a mesma diagramação
O que se compartilha é a base: contraste, hierarquia de títulos, zoom, reflow, espaçamento, facilidade de uso, nomes acessíveis. O que muda por idioma é a parte que depende do sistema de escrita: fontes, quebras de linha, hifenização, pontuação e altura da linha. [R10-R13]
O atributo lang também importa. Não arredonde zh-Hans, zh-Hant ou pt-BR para zh ou pt. Ele serve de pista para o navegador, a leitura em voz alta, a hifenização e a escolha da fonte.
12. Valores iniciais práticos por idioma
| Grupo | Como pensar os valores iniciais |
|---|---|
| Japonês | Comece com 17-18 px, entrelinha de cerca de 1,8 e uns 30-40 caracteres por linha. Não force espaçamento extra entre letras. Respeite a diagramação japonesa. [R10] |
| Chinês simplificado e tradicional | Separe fontes CJK e não quebre as regras de quebra de linha nem a pontuação. Mantenha zh-Hans e zh-Hant separados. [R11] |
| Coreano | Use fonte própria para hangul e não coloque espaçamento estranho entre letras. Confira se a quebra de linha em coreano funciona. [R12] |
| Tailandês | Não quebre a formação correta dos caracteres nem as quebras nos limites de palavra. Uma altura de linha um pouco maior é mais segura. Não use word-break: break-all sem cuidado. [R13] |
| Vietnamita | Use uma fonte que cubra completamente os sinais diacríticos e não corte o topo e a base das letras com altura fixa. |
| en/es/pt-BR/id/fr/de | Comece com cerca de 55-70 caracteres por linha e considere o lang correto e hyphens:auto. Confira o estouro de layout, principalmente com as palavras compostas longas do alemão. |
13. No celular, não basta "dar para ler": é preciso "aparecer rápido"
Se você empilha webfonts enormes para os 12 idiomas, o leitor vai embora antes de o texto aparecer. O web.dev explica que webfonts atrasam o FCP/LCP (a rapidez com que o primeiro conteúdo e o principal aparecem) e que a troca de fontes pode causar CLS (deslocamento de layout). [R19] O mais sólido é priorizar fontes do sistema no corpo do texto e usar fontes da marca só onde for preciso.
As metas "boas" atuais do Core Web Vitals, no percentil 75, são LCP de 2,5 segundos ou menos, INP de 200 ms ou menos e CLS de 0,1 ou menos. [R20] Um site em que, enquanto você lê, um anúncio ou uma fonte faz o parágrafo despencar é como segurar o livro com o dedo enquanto o atendente muda a mesa de lugar.
14. Artigos que continuam sendo lidos têm sempre as mesmas coisas no mesmo lugar
O que faz as pessoas voltarem não são efeitos chamativos, e sim a previsibilidade. Se o visual dos títulos e dos links, o sumário, a largura do artigo, a troca de idioma, os resultados de busca e a posição dos artigos relacionados são quase sempre os mesmos, o leitor aprende a usar.
Se você oferecer um ajuste "Aa" para mudar tamanho do texto, espaçamento e tema, também vale salvar essa escolha. Acessibilidade não é pedir toda vez "ative o modo deficiência", e sim algo que resiste bem desde o estado inicial e que só quem precisa ajusta.
15. O "teste de resistência do leitor" que você não deve aplicar
Exemplos típicos a evitar: texto de uns 12 px, cinza claro, linhas com mais de 100 caracteres, texto justificado, parágrafos que ocupam a tela inteira, pulos na hierarquia de títulos, tudo em negrito, interface que transmite significado só pela cor, reprodução automática, pop-ups difíceis de fechar, texto do corpo em imagem, o inferno da rolagem horizontal ao ampliar, webfonts enormes e animações sem sentido.
O leitor não veio fazer prova para ver se tem inteligência e vista boa o bastante para terminar o seu site.
16. Na dúvida, comece com estes valores de referência
| Item | Valor inicial prático | Observações |
|---|---|---|
| Corpo do texto | 17-18 px | Não é valor absoluto. Deixe ampliável |
| Entrelinha do corpo | 1,7-1,9 | Ajuste por idioma e fonte |
| Linha em alfabeto latino | Cerca de 55-70 caracteres | Ponto de partida de pesquisa e prática. Evite linhas longas demais [R15] |
| Linha em CJK | Cerca de 30-40 caracteres | 40 também corresponde à diretriz de Apresentação Visual AAA da WCAG [R8] |
| H1 | Cerca de 32-40 px | Diferença clara em relação ao corpo |
| H2 | Cerca de 25-30 px | Só com os H2 já dá para entender o fluxo |
| H3 | Cerca de 21-24 px | Mantenha a diferença em relação ao H2 |
| Contraste do texto normal | 4,5:1 ou mais | WCAG 2.2 AA [R2] |
| Texto grande | 3:1 ou mais | WCAG 2.2 AA [R2] |
| Alvo de ponteiro | Base de 24×24 px CSS ou mais | Há exceções. Na prática, considere também uns 44 px [R6] |
| Zoom de texto | 200% | Sem perder conteúdo nem funções [R3] |
| Reflow | 320 px CSS | Em princípio, sem rolagem nos dois sentidos [R4] |
17. Crie um portão de qualidade. "Vamos tomar cuidado" não é garantia de qualidade
Se você tem uma fábrica de artigos ou um CMS (sistema de gerenciamento de conteúdo), não deixe a legibilidade só na memória das pessoas. Use verificações estáticas para lang, H1, ordem dos títulos, alt das imagens, nomes acessíveis e CSS proibido, e verificações em navegador real para 320 px, zoom de 200%, sobrescrita do espaçamento do texto, teclado, foco e rolagem horizontal.
O que puder ser corrigido com segurança pode ser corrigido automaticamente, como um lang ausente ou a aplicação do CSS comum. Mas correções que mudam o sentido, como o significado do texto, traduções ou o conteúdo do alt, nunca devem ser inventadas. Se não dá para consertar, marque como FAIL e passe para uma pessoa. O portão de qualidade não é um "professor bravo": é uma catraca que não deixa sair produto quebrado.
18. Resumo: um bom artigo não faz prova com o leitor
A essência de um artigo fácil de ler não é aumentar o texto nem decorar com espaços em branco. É saber onde ler, poder voltar, ampliar, tocar e ouvir em voz alta, ser natural em cada idioma e ser rápido. É colocar tudo isso num mesmo sistema de design.
Fica natural para um adulto comum e não quebra para quem se distrai fácil, tem pouca visão, tem dificuldade de leitura ou usa teclado e tecnologias assistivas. Isso é o mais forte. Em vez de montar uma "versão acessível" em outra sala, basta deixar a porta de entrada larga desde o início.
