Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
Durante as duas primeiras décadas da tipografia na web, um tipo era um conjunto de instâncias congeladas: regular, itálico, negrito, talvez um light e um black se o orçamento permitisse. Toda escolha entre elas era uma escolha entre pontos fixos. As fontes variáveis — introduzidas com as OpenType Font Variations em 2016 e hoje suportadas em todos os principais navegadores — substituem esses pontos por faixas contínuas. Um arquivo contém um espaço de desenho inteiro, e o tipógrafo, a folha de estilos ou o leitor pode selecionar qualquer posição dentro dele.
Isso importa para a acessibilidade porque muitos dos ajustes que esta publicação recomendou — um toque a mais de peso em corpos pequenos, uma composição ligeiramente mais larga para leitores com baixa visão, formas mais firmes em condições adversas — eram antes impossíveis, a menos que a fundição tivesse por acaso cortado exatamente aquela instância. Agora são números.
Os eixos
Uma fonte variável expõe eixos nomeados de variação. Cinco estão registrados na especificação OpenType:
- wght (peso) — contínuo do fio de cabelo ao black, em vez de degraus de cem.
- wdth (largura) — do condensado ao estendido, sem a distorção do escalonamento mecânico.
- opsz (corpo óptico) — formas adaptadas ao tamanho em que serão lidas.
- slnt (inclinação) e ital (itálico) — o ângulo oblíquo e a troca para formas de itálico verdadeiro.
font-weight, font-stretch, font-style e font-optical-sizing —, que devem ser preferidas ao font-variation-settings de baixo nível para que os estilos cascateiem e se combinem de forma previsível.
Corpo óptico: uma ferramenta antiga retorna
O corpo óptico não é novo; é muito antigo, e sua ausência do tipo digital é que era a anomalia. No tipo de metal, cada corpo era cortado separadamente, e o abridor de punções compensava: os corpos pequenos ganhavam traços mais firmes, espaçamento mais largo, alturas de x maiores, contrapunções mais abertos; os corpos de exibição ganhavam contraste mais fino e ajuste mais apertado. A fotocomposição e depois as fontes digitais abandonaram isso, escalando um único matriz para todos os corpos — e é por isso que tanto texto digital pequeno tem parecido fino e entupido.
O eixo opsz restaura a prática. Uma fonte variável bem-feita com eixo de corpo óptico renderiza o texto em corpo de legenda com formas robustas e abertas e o texto de manchete com refinamento, automaticamente, quando font-optical-sizing: auto está em vigor (o padrão). Para leitores com baixa visão, que vivem na ponta pequena e forçada da faixa, este é um ganho direto de legibilidade que não custa ao designer nada além de escolher uma fonte que o suporte.
Grades: peso sem refluxo
Um eixo de grade muda a escuridão dos traços sem mudar a largura dos glifos. Essa distinção é todo o ponto: ajustar font-weight altera as larguras das letras e portanto refaz o fluxo do texto, enquanto ajustar a grade não. O texto pode ficar visualmente mais pesado ou mais leve e cada quebra de linha permanece no lugar.
O capítulo anterior observou que texto claro sobre superfícies escuras parece mais encorpado do que o mesmo tipo sobre branco. A grade é o instrumento preciso para essa correção: reduza levemente a grade no modo escuro e os dois temas se igualam em peso aparente, sem deslocamento de layout quando o leitor alterna entre eles. As grades são igualmente úteis para estados de hover e seleção, e para compensar entre telas que renderizam o tipo mais pesado ou mais leve do que o pretendido.
Desempenho é acessibilidade
Uma família que antes exigia seis ou oito arquivos de fonte pode ser servida como um ou dois (romano e itálico). Mesmo que um arquivo variável seja maior que qualquer instância estática isolada, ele é quase sempre menor que a soma das instâncias que substitui, e custa menos requisições de rede. Para leitores em conexões lentas e dispositivos modestos — uma população que se sobrepõe fortemente aos leitores a quem o trabalho de acessibilidade serve —, isso significa menos tempo encarando texto invisível ou de reserva e menos trocas bruscas quando a fonte web finalmente chega. O subsetting e os formatos modernos de compressão reduzem o custo ainda mais.
Há também um benefício de projeto com dividendo de acessibilidade: quando todos os pesos estão disponíveis, os designers param de recorrer ao falso negrito e ao falso itálico, e param de escolher um peso fino demais só porque era o único arquivo carregado.
Personalização: a promessa maior
A oportunidade mais profunda continua majoritariamente por realizar: deixar o leitor afinar o tipo. Um aplicativo de leitura ou site de textos longos construído sobre uma fonte variável pode oferecer um controle deslizante de peso, um ajuste de largura, um controle de espaçamento — contínuos, imediatos e reversíveis. Um leitor com baixa visão que acha o peso padrão fino pode engrossá-lo a gosto, em vez de escolher entre "normal" e "negrito". Um leitor mais velho pode alargar as formas ligeiramente. Esses são exatamente os ajustes que a pesquisa em baixa visão há muito sugere que ajudam, e as fontes variáveis os tornam baratos de oferecer.
Poucos sites fazem isso ainda, e não existe interface padrão para tanto. Mas a barreira técnica caiu, e a posição desta publicação é que o tipo afinável pelo leitor é para onde a tipografia de tela deve rumar: o designer define um padrão bem julgado, e o leitor pode se afastar dele.
Por que este capítulo é novo
Quando a primeira edição apareceu, as páginas web nem sequer podiam incorporar fontes com confiabilidade — tipografia significava escolher entre o punhado de tipos instalados na máquina do leitor. A incorporação de fontes web chegou por volta de 2010; as fontes variáveis foram especificadas em 2016 e alcançaram amplo suporte nos navegadores nos anos seguintes. A ideia de que uma folha de estilos pudesse especificar o peso como 435, ou de que o corpo óptico pudesse voltar da era do metal por meio de um eixo em um arquivo, simplesmente não existia para ser escrita.
No CSS
body {
font-optical-sizing: auto; /* opsz: text forms at text sizes */
}
@media (prefers-color-scheme: dark) {
/* grade trims dark-mode weight bloom without reflow */
body { font-variation-settings: "GRAD" -20; }
}Recomendações
- Prefira fontes variáveis para projetos novos; sirva um arquivo romano e um itálico em vez de uma pilha de estáticos.
- Escolha tipos com eixo de corpo óptico para interfaces que compõem texto em muitos corpos, e deixe
font-optical-sizing: autoem vigor. - Use o eixo de grade (onde disponível) para corrigir o peso aparente no modo escuro sem causar refluxo.
- Use as propriedades CSS de alto nível (
font-weight,font-stretch) em vez dofont-variation-settingsbruto sempre que possível. - Nunca dependa de falso negrito ou falso itálico; o arquivo variável torna as formas reais disponíveis.
- Onde a leitura de textos longos for o produto, considere oferecer aos leitores controle direto de peso e largura — e lembre a escolha deles.