Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
O kerning é o ajuste do espaço entre dois caracteres específicos; o espaço entre palavras é o ritmo dos vãos entre as palavras ao longo de uma linha. Ambos servem ao mesmo objetivo: uma textura uniforme o bastante para que o olho percorra o texto em varreduras suaves em vez de tropeçar em aglomerados escuros e buracos brancos. Em 2005, este capítulo argumentava que a qualidade do espaçamento estava em grande parte à mercê do tipo e do motor de renderização, e que o alinhamento justificado na tela degradava a leiturabilidade. Vinte anos depois, a primeira afirmação precisa de revisão substancial. A segunda, com uma ressalva importante, ainda se sustenta.
O que mudou desde 2005
A edição original tratava o kerning como algo que a web em geral não sabia fazer. As fontes eram rasterizadas em grades de pixels grosseiras, os pares de kerning eram frequentemente ignorados pelos navegadores, e dizia-se aos designers que escolhessem tipos que sobrevivessem ao descaso. Esse mundo acabou. Todo navegador moderno aplica o kerning OpenType ao texto corrido por padrão — a propriedade CSS font-kerning tem padrão auto, que habilita os dados de kern nos corpos de texto —, e o posicionamento de subpixel garante que esses ajustes sejam de fato renderizados. O conselho prático se inverteu: você já não luta pelo kerning; você o herda, e seu trabalho é não quebrá-lo.
A segunda grande mudança é regulatória. As WCAG 2.1 introduziram o Critério de Sucesso 1.4.12 Espaçamento de texto (nível AA, mantido nas WCAG 2.2), que exige que o conteúdo não perca funcionalidade nem conteúdo quando um usuário sobrescreve o espaçamento — especificamente a entreletra a 0,12 vez o corpo da fonte e o espaço entre palavras a 0,16 vez o corpo da fonte, junto com aumentos de entrelinha e de espaçamento entre parágrafos. Isso reenquadra o espaçamento por inteiro. Ele não é apenas uma decisão estética que o designer toma uma vez; é uma variável que o leitor tem o direito de mudar. Contêineres de altura fixa, botões apertados e rótulos propensos a truncamento que cortam ou se sobrepõem quando um usuário aplica essas sobrescritas são falhas de acessibilidade. Teste seus layouts com um bookmarklet ou extensão de navegador de espaçamento de texto antes de publicar.
Terceiro, o CSS agora expõe controles reais. A propriedade word-spacing ajusta diretamente os vãos entre palavras, letter-spacing cuida do tracking (veja o próximo capítulo), e font-kerning e font-feature-settings dão acesso explícito ao comportamento OpenType. Mais recente ainda, text-wrap: pretty pede ao navegador que invista esforço extra na quebra de linhas — evitando órfãs e pontos de quebra ruins —, o que melhora silenciosamente a textura do espaçamento no texto alinhado à esquerda sem qualquer intervenção manual.
O kerning na prática
Como o kerning está ligado por padrão, as falhas restantes são, em sua maioria, autoinfligidas. Entreletra positiva agressiva efetivamente sobrepõe os pares de kern ao afogá-los em espaço adicional, e essa é uma das razões pelas quais aplicar tracking ao texto corrido é arriscado. Fontes de exibição malfeitas ainda são distribuídas com tabelas de kern esparsas, e nos corpos de manchete esses vãos são conspícuos — os clássicos pares problemáticos, como um T ou V maiúsculo seguido de uma vogal minúscula. Nos corpos de exibição, é razoável corrigir um par isolado à mão, mas, se um tipo precisa de correção constante, é o tipo errado.
Uma preocupação genuína de 2005 sobrevive: a qualidade da fonte ainda importa. Fontes variáveis e webfonts produzidas profissionalmente costumam trazer dados completos de espaçamento e kerning; fontes gratuitas de procedência incerta muitas vezes não. Avalie um tipo candidato compondo parágrafos reais, não uma linha de espécime.
Espaço entre palavras e justificação
A constatação original — de que o alinhamento justificado diminui a leiturabilidade na tela — permanece correta em sua forma usual, mas o mecanismo merece precisão. A justificação total força cada linha a uma medida fixa esticando ou comprimindo os espaços entre as palavras. Sem hifenização, o algoritmo tem poucos pontos de quebra com que trabalhar, então algumas linhas acabam com vãos cavernosos entre palavras. Quando esses vãos se empilham verticalmente através de linhas sucessivas, formam "rios" de espaço branco descendo o parágrafo. Os rios são mais do que feios: competem com o caminho horizontal de leitura, e leitores que dependem de pistas estáveis de espaçamento — incluindo muitos leitores disléxicos — são desproporcionalmente afetados. O espaço irregular entre palavras perturba a pré-visualização parafoveal que permite ao olho planejar sua próxima sacada.
O impresso resolveu isso séculos atrás com hifenização e justificação trabalhando juntas, e a web agora pode, em princípio, fazer o mesmo: o CSS hyphens: auto habilita a hifenização baseada em dicionário na maioria dos navegadores, e reduz drasticamente a variância de espaçamento do texto justificado. Mas a justificação dos navegadores continua sendo um algoritmo simples, linha a linha, e não a otimização no nível do parágrafo encontrada nos softwares profissionais de diagramação, de modo que mesmo o texto justificado e hifenizado na web raramente iguala a uniformidade de um livro bem composto. A conclusão pragmática: use texto alinhado à esquerda (ragged-right) como padrão para a leitura em tela. Se um design genuinamente exige justificação, habilite a hifenização, mantenha a medida generosa e inspecione o resultado em larguras estreitas — texto justificado em coluna estreita é onde os rios se criam.
Observe também que o Critério de Sucesso 1.4.8 Apresentação visual das WCAG 2.2 (nível AAA) lista explicitamente "o texto não é justificado" entre seus requisitos para blocos de texto. Mesmo no nível AA que a maioria das equipes almeja, isso é um sinal forte de onde os autores do padrão chegaram.
O espaço entre palavras como variável de design
A manipulação direta de word-spacing raramente é necessária para o texto corrido — o glifo de espaço embutido no tipo costuma estar certo —, mas ela se paga nos casos-limite: abrir levemente os vãos entre palavras em rótulos de navegação em caixa-alta, ou apertá-los em composições grandes de exibição onde os espaços padrão parecem superdimensionados. Qualquer ajuste deve ser especificado em unidades relativas ao em, para que escale com o texto, e deve tolerar as sobrescritas do usuário exigidas pelo 1.4.12. Se o seu layout só funciona exatamente no espaçamento que você escolheu, ele não funciona.
Em CSS
body {
font-kerning: normal; /* on by default — never disable it */
text-align: left; /* justification without hyphenation makes rivers */
}
p { text-wrap: pretty; }
/* If justification is required, hyphenate: */
.justified { text-align: justify; hyphens: auto; }Recomendações
- Componha o texto corrido alinhado à esquerda por padrão; trate a justificação total como exceção que exige hyphens: auto e testes em larguras estreitas.
- Deixe font-kerning em seu padrão; não desative o kerning e evite entreletra pesada que sobrecarregue os pares de kern.
- Use text-wrap: pretty no texto corrido onde houver suporte, para melhorar os pontos de quebra e a textura do espaçamento a custo quase zero.
- Especifique qualquer ajuste de word-spacing ou letter-spacing em unidades em, nunca em pixels.
- Verifique se os layouts sobrevivem às sobrescritas do WCAG 1.4.12 — entreletra 0,12em, espaço entre palavras 0,16em, entrelinha 1,5 — sem cortes, sobreposição ou perda de conteúdo.
- Escolha tipos com tabelas completas de kerning e espaçamento; julgue-os por parágrafos compostos, não por espécimes.