Espaçamento entre as linhas
O que a norma pede
Os blocos de texto têm entrelinha de pelo menos 1,5 vez o tamanho da fonte, ou a pessoa pode ajustar o espaçamento 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: a entrelinha já é de pelo menos 1,5 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)
- 1.4.8 (AAA)
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:
Defina entrelinha de pelo menos 1,5 para textos corridos e evite caixas de altura fixa, que cortam o texto quando a pessoa aumenta o espaçamento. Linhas muito juntas atrapalham quem tem dislexia ou baixa visão.
Texto de uma notícia
Estilo de parágrafo do portal.
Errado: Linhas coladas
Na especificação
Parágrafo 16px com entrelinha de 18px (1,1).
Leitura cansativa.
Certo: Linhas arejadas
Na especificação
Parágrafo 16px com entrelinha de 24px (1,5).
Leitura confortável.
Use line-height sem unidade, como 1.5, nos textos corridos e evite altura fixa em cards e botões com texto, para que o conteúdo cresça junto com o espaçamento.
Card de notícia
Card com resumo de três linhas.
Errado: Altura fixa
.card { height: 120px; overflow: hidden; line-height: 1.1; }Com espaçamento maior, o texto é cortado.
Certo: Altura flexível
.card { min-height: 120px; line-height: 1.5; }O card cresce com o texto.
Inclua o espaçamento de texto nos padrões tipográficos e o teste de espaçamento nos critérios de aceite. Definidos uma vez nos estilos, os espaçamentos valem para o produto inteiro.
Padrão tipográfico
O guia de estilo define textos.
Errado: Sem entrelinha definida
Situação
Cada página com um espaçamento.
Textos apertados em várias páginas.
Certo: Entrelinha padrão
Situação
Todos os parágrafos com 1,5.
Leitura consistente.
Aplique o teste de espaçamento de texto, com entrelinha 1,5, parágrafos 2, letras 0,12 e palavras 0,16, usando uma extensão ou um bookmarklet. Procure texto cortado ou sobreposto, principalmente em botões e cards.
Cards com espaçamento aumentado
Teste de espaçamento de texto.
Errado: Texto cortado
Observação
A última linha do resumo some no card.
Perda de conteúdo.
Certo: Card se ajusta
Observação
O card cresce e mostra todo o texto.
Atende.
Mantenha curtos os textos de espaços pequenos, como cards e botões, que são os primeiros a serem cortados. Não use quebras de linha manuais para ajustar o visual.
Resumo do card
Texto do card de notícia.
Errado: Resumo longo
Resumo
Cinco linhas num card pensado para três.
Com espaçamento maior, parte some.
Certo: Resumo curto
Resumo
Uma frase de até 120 caracteres.
Cabe mesmo com ajustes.