Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
A edição de 2005 respondia à pergunta do tamanho com um número: um mínimo de 14 pontos, cerca de 19 pixels em Verdana, para texto corrido acessível. Era um número defensável para seu momento — os tradicionais corpos de impressão de 9 e 10 pontos eram claramente inadequados para telas grosseiras, e a enorme altura de x da Verdana tornava 19 pixels uma leitura confortável. Mas a lição mais profunda das últimas duas décadas é que nenhum número isolado pode ser a resposta, porque o leitor, e não o designer, é agora a autoridade final sobre o tamanho. O trabalho do designer mudou de escolher o tamanho certo para construir um sistema que sobreviva às escolhas do leitor.
O que mudou desde 2005
Três desenvolvimentos reestruturaram a questão.
Primeiro, o padrão do navegador assentou o piso. Todo grande navegador vem com um corpo de texto padrão de 16 pixels CSS, e os usuários podem aumentá-lo nas configurações. Dezesseis pixels tornaram-se o contrato efetivo entre plataforma e leitor: texto corrido no padrão, ou maior, respeita esse contrato; texto corrido abaixo dele sobrescreve uma preferência que o usuário pode ter definido deliberadamente. A velha cifra de 19 pixels em Verdana compensava a altura de x fora da curva da Verdana e a renderização da época; em um tipo de texto moderno típico, 16px lê-se de forma comparável. Para tipos com altura de x pequena, 17 ou 18px é o equivalente honesto — a percepção de 2005 de que a altura de x importa mais do que o tamanho nominal sobrevive plenamente intacta, e o CSS agora até a codifica na propriedade font-size-adjust, que escala as fontes de fallback para uma razão de altura de x consistente, de modo que uma troca de fonte não possa encolher o texto silenciosamente.
Segundo, os padrões de acessibilidade fizeram da redimensionabilidade, e não do tamanho, o requisito testável. O critério de sucesso WCAG 1.4.4 (Redimensionar texto) exige que o texto possa ser ampliado a 200 por cento sem perda de conteúdo ou função; o 1.4.10 (Refluxo) exige que o conteúdo reflua em zoom alto sem rolagem bidimensional. Uma página composta em corpo fixo generoso ainda pode reprovar em ambos; uma página a 16px com layout resiliente passa. O centro de gravidade do padrão é o caminho do zoom, não o ponto de partida.
Terceiro, as telas de alta densidade removeram as velhas pressões de teto. O texto já não se degrada ao ser ampliado, então as ansiedades de 2005 sobre a estabilidade do layout sob escala agora têm respostas de engenharia, e não tipográficas.
Respeitando o usuário: rem, não px
A prática mais consequente a adotar é dimensionar o tipo em unidades rem. Um rem é relativo ao corpo de fonte raiz, que herda do padrão do navegador — de modo que um usuário que eleva seu padrão de 16 para 20px vê cada elemento dimensionado em rem escalar proporcionalmente. O tipo fixado em px ignora essa preferência por completo.
A defesa comum — "usuários de px ainda podem usar zoom" — é apenas parcialmente verdadeira, e a distinção importa. O zoom de página inteira escala texto em px, sim. Mas as configurações de tamanho de texto do navegador, das quais muitos usuários com baixa visão dependem exatamente porque persistem em todos os sites sem ajustes página a página, não afetam de forma alguma o texto dimensionado em px. Fixar o tipo em pixels desativa silenciosamente o mecanismo de acessibilidade mais durável da plataforma. A mesma lógica desaconselha definir o font-size do elemento raiz em um valor px (o velho truque "html { font-size: 62.5% }" é aceitável porque é proporcional; "html { font-size: 10px }" não é).
A entrelinha pertence à mesma disciplina: especifique-a sem unidade (1,5 para o texto corrido é um padrão sólido) para que escale com qualquer tamanho em que o texto acabe, em vez de congelar em um valor px calculado para o viewport do designer.
Dimensionamento fluido sem perder o piso
O design responsivo acrescentou uma ferramenta nova e um novo modo de falha. A função clamp() permite que um tamanho respire com o viewport — clamp(1rem, 0.9rem + 0.5vw, 1.25rem) define um piso, um meio fluido e um teto —, o que é genuinamente útil para títulos e para texto corrido que deva crescer em telas grandes.
O modo de falha é o dimensionamento só por viewport. Texto dimensionado puramente em unidades vw não responde ao zoom: à medida que o usuário amplia, a largura CSS do viewport encolhe proporcionalmente e o texto é recalculado para aproximadamente o mesmo tamanho aparente, derrotando o WCAG 1.4.4. A defesa está embutida no padrão recomendado: inclua sempre um termo rem na expressão fluida e um mínimo baseado em rem no clamp(), para que tanto a preferência do usuário quanto o zoom mantenham seu domínio. Depois verifique de fato, ampliando a 200 por cento e confirmando que o texto ficou duas vezes maior.
Uma arquitetura moderna de tamanhos
Juntando as peças, uma escala tipográfica defensável para leitura acessível é assim: texto corrido a 1rem no mínimo (16px nas configurações padrão, mais para tipos de altura de x pequena), texto secundário não abaixo de cerca de 0,875rem e nunca para leitura prolongada, títulos em uma escala de razão modesta expressa em rem com fluidez opcional via clamp(), e todo font-size fixo em px tratado como defeito. A orientação de 2005 sobre texto pequeno se mantém em forma atualizada — tipo genuinamente pequeno é tolerável apenas para cadeias auxiliares curtas, nunca passagens contínuas, e as regras de contraste das WCAG se estreitam para ele: texto abaixo de 18pt regular (ou 14pt em negrito) exige razão de contraste de 4,5:1 em vez do 3:1 permitido para texto grande, um reconhecimento explícito de que tamanho e contraste se compensam mutuamente.
Para leitores com baixa visão, nada disso substitui a ampliação; isso faz a ampliação funcionar. A medida de sucesso não é a aparência da página a 100 por cento, mas se ela permanece uma única coluna legível a 200 e 400 por cento de zoom.
Em CSS
html { font-size: 100%; } /* the reader's choice is the unit */
body { font-size: 1rem; } /* 16px floor for continuous text */
h1 {
/* the rem term keeps user settings and zoom in charge */
font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
}
small { font-size: 0.875rem; } /* captions only, never body text */Recomendações
- Trate 16px (1rem) como o piso do texto corrido; eleve-o para tipos com altura de x pequena.
- Dimensione todo o tipo em rem; especifique a entrelinha sem unidade (em torno de 1,5 para o texto corrido).
- Nunca fixe o texto corrido em px, e nunca defina o font-size raiz em um valor px.
- Use clamp() para tipo fluido, sempre com um componente rem para que o zoom e as preferências do usuário continuem valendo.
- Use font-size-adjust para que as fontes de fallback mantenham a altura de x pretendida.
- Teste a 200 por cento de zoom (WCAG 1.4.4) e refluxo a 400 por cento (WCAG 1.4.10) como controle de qualidade de rotina.
- Reserve corpos abaixo do texto corrido para textos auxiliares curtos, e dê ao texto pequeno o contraste mais rigoroso de 4,5:1 que ele exige.