Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
A primeira edição destas diretrizes pressupunha uma tela: única, presa à mesa, de tamanho previsível. Essa premissa desapareceu. O mesmo parágrafo agora precisa ler bem em um telefone segurado à distância do braço, em um tablet, em um laptop e em uma tela do tamanho de uma parede — e, mais importante, precisa ler bem para uma pessoa que aumentou a fonte do sistema, ampliou a página a 400 por cento, ou ambos. A tipografia fluida é o ofício de escalar o tipo ao longo dessa faixa; a tipografia fluida acessível é fazê-lo sem atropelar silenciosamente o leitor.
Escalas fluidas e a função clamp()
O idioma moderno define o corpo da fonte com a função CSS clamp(): um mínimo, um valor preferido que cresce com o viewport e um máximo. Em vez de saltar entre tamanhos fixos nos breakpoints, o tipo desliza — títulos que são grandiosos no desktop descem com graça no telefone, e as larguras intermediárias desajeitadas que os breakpoints nunca serviram direito são tratadas automaticamente.
Bem usada, essa é uma conquista genuína para a leiturabilidade. Usada com descuido, cria uma nova classe de falha de acessibilidade, e a falha é sutil o bastante para sobreviver a testes superficiais.
A ressalva de acessibilidade
Tudo nesta publicação repousa sobre um contrato: as configurações de tamanho do leitor vencem. Os navegadores permitem que os usuários definam um corpo de fonte padrão; os sistemas operacionais oferecem escala de texto; o critério WCAG 1.4.4 (Redimensionar texto) exige que o texto possa ser redimensionado até 200 por cento sem perda de conteúdo ou função. Fórmulas fluidas podem quebrar silenciosamente esse contrato de duas maneiras.
Primeiro, uma fórmula construída puramente sobre unidades de viewport — digamos, um tamanho derivado apenas de vw — não responde de forma alguma à preferência de corpo de fonte do usuário. A página parece fluida e moderna, e um leitor que configurou o navegador para um padrão maior não vê efeito algum. O remédio é construir as fórmulas sobre rem: mantenha o mínimo e o máximo em rem, e dê ao valor preferido um componente baseado em rem ao lado do termo de viewport. Assim, toda a escala cavalga sobre a configuração do usuário, como deve ser.
Segundo, o próprio clamp pode brigar com o zoom. Quando um leitor amplia a página, as unidades de viewport encolhem em termos de CSS, de modo que uma fórmula pesada em vw cancela parcialmente o zoom: o leitor amplia a página e o texto cresce menos do que o fator de zoom e, em casos extremos, não consegue alcançar os 200 por cento que o WCAG 1.4.4 exige. Qualquer escala fluida deve ser testada em zoom alto — não presumida.
Refluxo e zoom de 400 por cento
O critério WCAG 1.4.10 (Refluxo) exige que o conteúdo funcione em uma largura de 320 pixels CSS — equivalente a uma janela de 1280 pixels ampliada a 400 por cento — sem rolagem horizontal para a leitura. Muitos leitores com baixa visão vivem nessas magnificações. O tipo fluido ajuda aqui quando é honesto: nessa largura efetiva, a escala deve estar em seu mínimo, as larguras de linha devem encurtar e nada deve escapar do viewport. Contêineres de largura fixa, posicionamento absoluto de texto e layouts multicoluna que se recusam a colapsar são os infratores habituais. Teste cada página de leitura a 400 por cento; leva um minuto, e é onde essas falhas se escondem.
Container queries
As media queries perguntam qual o tamanho da janela; as container queries perguntam qual o tamanho da caixa do próprio componente, que costuma ser a pergunta que a tipografia de fato precisa responder. Um card é um card quer esteja numa barra lateral, quer atravesse a página, e seu tipo agora pode responder à própria largura, usando unidades de container query para dimensionamento fluido dentro do componente. A mesma ressalva se transfere sem alteração: unidades relativas ao contêiner nada sabem sobre a preferência de corpo de fonte do leitor, então também devem ser combinadas com termos baseados em rem e testadas sob zoom.
Ferramentas menores, ganhos reais
Várias propriedades recentes do CSS atacam diretamente velhos problemas tipográficos:
- text-wrap: balance equilibra as larguras de linha de blocos curtos — títulos, acima de tudo — eliminando a linha órfã de duas palavras sob uma primeira linha longa. Destina-se a poucas linhas, não a texto corrido.
- text-wrap: pretty permite que o navegador invista mais esforço na quebra de linhas do parágrafo, evitando últimas palavras solitárias e melhorando o alinhamento irregular. O suporte ainda é desigual entre os motores; trate-o como aprimoramento progressivo.
- font-size-adjust iguala a altura de x de uma fonte de fallback à da web font que ela substitui. Enquanto a web font carrega — ou se ela nunca chegar — o fallback é renderizado em um tamanho aparente equivalente, o que reduz o deslocamento de layout e mantém o texto do fallback tão legível quanto o tipo pretendido. Considerando quanta leitura acontece nos segundos antes de as fontes carregarem, essa propriedade modesta merece seu lugar.
Por que este capítulo é novo
Em 2005 não havia tipografia fluida porque não havia através do que ser fluido: a web móvel mal existia, o design responsivo só seria articulado em 2010, e clamp(), container queries, o controle de text-wrap e o font-size-adjust com suporte amplo são todos desenvolvimentos dos últimos anos. O próprio requisito de refluxo só entrou nas WCAG com a versão 2.1, em 2018. A multiplicidade de telas criou o problema; o CSS só recentemente forneceu os instrumentos; e a disciplina de acessibilidade em torno desses instrumentos é mais jovem ainda.
Em CSS
h1 {
/* fluid between bounds; the rem term preserves zoom and settings */
font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem);
text-wrap: balance;
}
p { font-size: 1rem; text-wrap: pretty; }
/* Test at 200% and 400% zoom — WCAG 1.4.4 and 1.4.10 */Recomendações
- Construa escalas fluidas sobre rem: mínimos, máximos e um componente rem no valor preferido, para que as preferências de corpo de fonte do usuário se propaguem.
- Nunca dimensione texto apenas em unidades de viewport.
- Teste cada template a 200 por cento de zoom, a 400 por cento de zoom e com o corpo de fonte padrão do navegador aumentado — três testes diferentes, todos obrigatórios.
- Verifique o WCAG 1.4.10: a 320 pixels CSS de largura, a leitura não deve exigir rolagem horizontal.
- Use container queries para decisões tipográficas no nível do componente, com a mesma disciplina de rem.
- Aplique text-wrap: balance aos títulos; habilite text-wrap: pretty para o texto corrido como aprimoramento progressivo.
- Defina font-size-adjust (e fallbacks de tamanho compatível) para que o texto seja legível antes da web font e sem ela.