Tamanhos de Letra: Normas e Boas Práticas
Recomendações WCAG AA para tamanhos base, hierarquia tipográfica e quando aumentar texto para melhor legibilidade.
Por Que o Tamanho da Letra Importa
A escolha do tamanho de letra é mais do que uma questão estética. Afeta diretamente a legibilidade, a acessibilidade e a experiência do utilizador. Quando o texto é muito pequeno, as pessoas com baixa visão têm dificuldade em ler. Quando é muito grande, destrói o equilíbrio visual da página.
As normas WCAG (Web Content Accessibility Guidelines) estabelecem requisitos claros para tamanhos mínimos. Mas não se trata apenas de cumprir regras — trata-se de criar interfaces que funcionem para toda a gente. Desde utilizadores com visão perfeita até pessoas com deficiência visual significativa.
Normas WCAG AA: Os Números Que Contam
A WCAG 2.1 AA — o padrão que a maioria das organizações segue — estabelece requisitos específicos. O tamanho base recomendado é 16px para corpo de texto. Isso pode parecer pequeno, mas quando combinado com altura de linha adequada e espaçamento, funciona bem.
Para títulos, você vai querer escalar proporcionalmente. Uma hierarquia típica fica assim: corpo a 16px, subtítulos a 18-20px, títulos secundários a 24-28px, e títulos principais a 32px ou mais. Mas aqui está a coisa — estes são pontos de partida, não regras absolutas.
Requisito de Contraste: Texto pequeno (até 18px) precisa de um rácio de contraste mínimo de 4.5:1. Texto maior (18px+) pode usar 3:1. Isso significa que quanto menor o texto, mais escuro tem de ser.
Criando uma Hierarquia Tipográfica Eficaz
Uma hierarquia forte não é apenas sobre fazer algumas coisas maiores que outras. É sobre criar um sistema que guia os olhos do utilizador naturalmente. Quando alguém chega à sua página, consegue entender imediatamente qual é o conteúdo mais importante?
Comece com o seu tamanho base — vamos dizer 16px para corpo. Depois estabeleça uma escala. Uma escala comum é multiplicar por 1.25 ou 1.5 para cada nível acima. Então: 16px 20px 25px 31px 39px. Não precisa ser exato, mas consistente ajuda.
- H1 (título principal): 32-48px — raramente maior que isso
- H2 (secção principal): 24-32px — visualmente distinto do corpo
- H3 (subsecção): 20-24px — ainda claramente um título
- Corpo: 16px — o padrão ouro para leitura confortável
- Pequeno (legendas): 14px — mas não mais pequeno sem razão
Quando (e Como) Aumentar Tamanhos
Nem toda a gente tem boa visão. Algumas pessoas com baixa visão não usam leitores de ecrã — elas simplesmente aumentam o tamanho do texto. O seu site precisa de suportar isto sem quebrar. Quando um utilizador faz zoom até 200%, o layout não deve colapsar.
Há três situações onde vai querer aumentar tamanhos de letra: para ênfase visual, para legibilidade em ecrãs pequenos, e para acomodar utilizadores com deficiência visual. Utilize `rem` em vez de `px` nos seus CSS — isto permite que o tamanho base escale quando o utilizador altera as preferências do navegador.
Testando Legibilidade: Ferramentas e Técnicas
Não é suficiente confiar na teoria. Precisa de testar com pessoas reais. Mas existem ferramentas que ajudam antes disso.
Zoom do Navegador
Aumentar para 200% (Ctrl + ou Cmd +) e verificar se o layout mantém a integridade. O texto não deve sair do ecrã, colunas não devem colapsar de forma estranha.
Contraste Checker
Ferramentas como WebAIM Contrast Checker verificam se o seu rácio de contraste passa WCAG AA. Não adivinhe — use uma ferramenta. É rápido e gratuito.
Ecrãs Reais
Veja a sua página em telefones, tablets e computadores. O que parece bem no seu monitor de 27 polegadas pode parecer completamente diferente num telemóvel de 5 polegadas.
Simuladores de Deficiência Visual
Extensões de navegador como “Nocoffee Vision Simulator” mostram como a sua página aparece para pessoas com várias condições visuais. Muda a perspectiva rapidamente.
Erros Comuns (e Como Evitá-los)
Vê-se o mesmo padrão repetido em muitos sites. Texto muito pequeno em áreas de rodapé. Títulos gigantes que não deixam espaço para o conteúdo. Tamanhos inconsistentes entre páginas. Há alguns erros que são fáceis de cometer, mas mais fáceis ainda de corrigir.
Resumo: Tamanhos de Letra que Funcionam
O tamanho da letra não é um detalhe menor. É uma decisão fundamental que afeta a acessibilidade, a legibilidade e a experiência geral do utilizador. Quando segue as normas WCAG AA — começando com 16px base, escalando proporcionalmente, testando com zoom — você cria interfaces que funcionam para toda a gente.
Lembre-se: as normas são o piso, não o tecto. Pode fazer melhor. Teste com utilizadores reais. Veja como as pessoas interagem com o seu texto. Escute o feedback. E quando em dúvida, aumente um pouco — texto maior é quase sempre melhor do que texto pequeno.
Comece com 16px para corpo, escale proporcionalmente, use `rem` para flexibilidade, teste em vários dispositivos, e não tenha medo de deixar o texto um pouco maior. A acessibilidade e a legibilidade agradecem.
Aviso Legal
Este artigo fornece informações educacionais sobre acessibilidade web e normas WCAG. As recomendações apresentadas baseiam-se em diretrizes internacionais de acessibilidade. Circunstâncias específicas podem variar dependendo do seu público-alvo, dispositivos utilizados e requisitos legais locais. Consulte sempre as versões mais recentes das normas WCAG e considere testar com utilizadores reais para garantir que o seu site atende às necessidades específicas da sua audiência.
