Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
A legibilidade começa na letra. Antes que um leitor possa reconhecer uma palavra, o sistema visual precisa resolver formas de letra individuais — e cada fator que torna uma letra mais fácil ou mais difícil de resolver se acumula ao longo de milhares de fixações em uma sessão de leitura. As diretrizes originais identificavam como fatores decisivos o estilo do tipo, o peso, a inclinação, a largura e o espaçamento. Essa lista sobrevive intacta. O que mudou foi o ambiente em que essas letras são desenhadas e o controle que os designers agora têm sobre cada fator.
O que mudou desde 2005
A edição de 2005 foi escrita para telas em que uma letra minúscula em corpo de texto ocupava talvez nove ou dez pixels de altura. Naquela resolução, a grade de pixels era a restrição dominante: os traços se encaixavam em pixels inteiros, os detalhes finos desapareciam ou viravam ruído, e a tecnologia de renderização — antialiasing de subpixel como o ClearType no Windows, antialiasing em tons de cinza nos demais — determinava tanto da aparência de uma letra quanto seu designer. O hinting, a prática de embutir nas fontes instruções de ajuste à grade, era a diferença entre um tipo de texto utilizável e um inutilizável.
As telas de alta densidade mudaram a aritmética. Com dois ou três pixels de dispositivo por pixel CSS, a mesma letra é desenhada com quatro a nove vezes o orçamento de pixels. O antialiasing em tons de cinza em alto DPI renderiza curvas, traços finos e diagonais verdadeiras com fidelidade; a indústria em grande parte abandonou a renderização de subpixel porque a densidade a tornou desnecessária. O hinting agressivo importa bem menos do que importava — embora ainda importe nos monitores de laptop e desktop de densidade padrão que continuam comuns, razão pela qual as recomendações no nível da letra ainda não podem presumir alto DPI em toda parte.
A segunda mudança estrutural são as fontes variáveis. Peso (wght), largura (wdth), corpo óptico (opsz) e, em algumas famílias, grade (GRAD) são agora eixos contínuos endereçáveis a partir do CSS. As diretrizes originais tratavam o peso e a largura de um tipo como propriedades fixas a selecionar; agora são parâmetros a ajustar — inclusive em resposta ao corpo, à cor do fundo e à preferência do usuário.
A anatomia que importa
A pesquisa sobre reconhecimento de letras se refinou desde 2005 e aponta consistentemente para um pequeno conjunto de características estruturais.
A altura de x continua sendo o preditor mais confiável do tamanho aparente e da legibilidade em corpos pequenos. Dois tipos no mesmo corpo nominal podem diferir dramaticamente em quão grandes se leem; o de maior altura de x lê maior. É por isso que o font-size-adjust do CSS existe — ele normaliza as fontes de reserva para uma razão-alvo de altura de x, de modo que uma troca entre tipos não encolha o texto silenciosamente.
As aberturas — os vãos em letras como c, e, a e s — governam a facilidade com que as letras se distinguem de suas vizinhas fechadas. Tipos com aberturas amplas mantêm o c distinto do o e o e distinto do a sob o desfoque da baixa visão ou em corpos de renderização pequenos; tipos com aberturas fechadas, dobradas para dentro, perdem essas distinções primeiro. O desenho de tipos orientado à legibilidade nas últimas duas décadas moveu-se decisivamente rumo às aberturas amplas, e a pesquisa em baixa visão respalda o movimento.
A distinção entre letras é o terceiro pilar. Pares confundíveis — b/d, p/q e, acima de tudo, o I maiúsculo, o l minúsculo e o algarismo 1 — são onde o reconhecimento falha mais cedo. A edição original apontava a Read Regular, de Natascha Frensch, como um tipo desenhado para diferenciar letras espelhadas para leitores disléxicos; essa direção de projeto desde então se tornou corrente, e o teste rápido "Il1" (compor os três caracteres lado a lado e verificar que diferem) é hoje uma etapa padrão de triagem para qualquer tipo de interface ou de texto corrido.
O comportamento do traço completa a lista. Largura de traço relativamente uniforme, contraste moderado entre grossos e finos e largura geral moderada — tudo isso sobrevive de 2005: a modulação extrema e a compressão extrema destroem igualmente as formas de letra sob desfoque, que é um modelo justo tanto da baixa visão quanto de condições precárias de visualização.
Peso, inclinação e largura como escolhas contínuas
A orientação original — peso regular a levemente negrito, ereto em vez de inclinado, largura moderada — permanece. A revisão está em como essas escolhas são feitas.
Com um eixo de peso variável, "levemente negrito" já não é um salto de 400 para 700; pode ser 450 ou 480, o suficiente para engrossar os traços para um fundo escuro ou um corpo pequeno sem fechar os contrapunções. Os eixos de corpo óptico, onde disponíveis, fazem automaticamente aquilo para que os desenhadores de tipos antes cortavam corpos separados: em corpos pequenos o desenho abre as aberturas, afrouxa o espaçamento e reduz o contraste; em corpos grandes, aperta. Onde um tipo oferece opsz, deixe-o agir — os navegadores o fazem por padrão —, pois ele codifica precisamente os ajustes de corpo pequeno que este capítulo recomenda.
A inclinação continua sendo um custo de legibilidade para o texto contínuo. Itálicos são para ênfase, não para trechos longos; formas oblíquas (romano inclinado) são piores que itálicos verdadeiros porque distorcem as formas de letra sem redesenhá-las.
Espaçamento no nível da letra
O achado de 2005 de que o tipo de tela precisa de entreletra e espaço entre linhas mais generosos que o impresso era, em parte, um artefato de resolução — o espaçamento frouxo impedia que letras toscas de pixels se fundissem. Mas não era só isso. A pesquisa sobre apinhamento mostra que letras compactadas demais prejudicam o reconhecimento na visão periférica e de baixa acuidade, de modo que leitores com baixa visão se beneficiam genuinamente de composições levemente frouxas em corpos pequenos. A WCAG 2.2 reconhece isso do lado do usuário: o critério de sucesso 1.4.12 (Espaçamento de Texto) exige que o conteúdo sobreviva a aumentos aplicados pelo usuário na entreletra, no espaço entre palavras e na entrelinha sem perdas. O tracking apertado como assinatura estilística é aceitável em corpos de exibição; em corpos de texto, é um imposto sobre os leitores com menos acuidade a perder.
No CSS
/* Preserve letterform quality across fallbacks */
body {
font-family: "Source Sans 3", system-ui, sans-serif;
font-size-adjust: 0.5; /* match fallback x-height to the web font */
font-kerning: normal;
}Recomendações
- Selecione os tipos pela estrutura, não pela classificação: altura de x grande, aberturas amplas, largura de traço uniforme, largura moderada.
- Aplique o teste Il1 e verifique a distinção b/d/p/q antes de se comprometer com um tipo de texto.
- Use os eixos de fontes variáveis deliberadamente — incrementos pequenos de peso conforme o contexto, e deixe o corpo óptico (opsz) fazer seu trabalho nos corpos pequenos.
- Mantenha o texto contínuo ereto; reserve a inclinação para a ênfase.
- Defina a entreletra de neutra a levemente frouxa nos corpos de texto e verifique se os layouts sobrevivem às sobrescritas de espaçamento do usuário da WCAG 1.4.12.
- Teste em uma tela de densidade padrão, não apenas em uma de alto DPI; a grade de pixels ainda existe para muitos leitores.