Espaçamento entre as letras
O que a norma pede
O espaço entre letras é de pelo menos 0,12 vez o tamanho da fonte, ou a pessoa pode ajustar até esse valor sem perder conteúdo nem função.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: o espaçamento entre letras já é de pelo menos 0,12 vez o tamanho da fonte.
- Outra forma: existe um mecanismo para configurar o espaçamento, e nada se perde quando ele chega a esse valor.
- 1.4.12 (AA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Deixe folga em botões e menus para textos que ficam mais largos quando a pessoa aumenta o espaço entre letras, e não use espaçamento negativo em textos longos. Evite cortar rótulos com reticências.
Menu horizontal
Itens do menu ocupam toda a largura.
Errado: Sem folga
No protótipo
Menu com largura exata para os itens.
Com espaçamento maior, itens somem.
Certo: Com folga
No protótipo
Menu que quebra linha ou vira botão “Menu”.
Nada se perde.
Evite larguras fixas em botões e itens de menu e a combinação de white-space: nowrap com overflow: hidden. Teste com letter-spacing: 0.12em aplicado.
Botão com largura fixa
Botão “Enviar inscrição”.
Errado: Largura fixa
.botao { width: 140px; white-space: nowrap; overflow: hidden; }Com espaçamento maior, o texto é cortado.
Certo: Largura flexível
.botao { min-width: 140px; padding: 0 1rem; }O botão cresce com o texto.
Inclua o teste de espaçamento de texto nos critérios de aceite e revise os componentes com texto truncado, a começar pela navegação. O requisito se cumpre com leiautes flexíveis, e não com uma configuração específica.
Teste de espaçamento
O teste revela botões cortados.
Errado: Tratado como raro
Decisão
“Pouca gente muda o espaçamento.”
Quem precisa fica sem ler os botões.
Certo: Corrigido no componente
Decisão
Botão com largura flexível em todo o sistema.
Resolvido de uma vez.
Aplique letter-spacing de 0,12em e confira se algum texto de menu ou de botão fica cortado ou escondido. Registre os textos truncados com reticências.
Abas com espaçamento maior
Teste de espaçamento.
Errado: Rótulo cortado
Observação
“Documentos neces…”
Perda de conteúdo.
Certo: Rótulo inteiro
Observação
Aba cresce e mostra “Documentos necessários”.
Atende.
Mantenha os rótulos de menus e abas com uma ou duas palavras, que resistem melhor ao aumento de espaçamento. Evite siglas em caixa alta com espaçamento especial.
Nome da aba
Aba da página do serviço.
Errado: Nome longo
Aba
“Documentação necessária para apresentação”
Cortado facilmente.
Certo: Nome curto
Aba
“Documentos”
Cabe com qualquer ajuste.