Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
Uma hierarquia tipográfica diz ao leitor sobre o que é a página, como ela está organizada e por onde entrar nela — antes de uma única frase ser lida. A edição de 2005 recomendava dimensionar os níveis da hierarquia por uma razão consistente entre 1,2 e 1,5, e advertia que um corpo-base mal escolhido desmoronaria sob escala. Ambos os pontos sobrevivem, mas cada um ganhou uma segunda dimensão que o original não podia abordar: as escalas agora são fluidas em vez de fixas, e a hierarquia na web já não é apenas visual. Ela também precisa ser estrutural, porque uma parcela substancial dos leitores nunca a vê.
O que mudou desde 2005
A recomendação da razão 1,2–1,5 amadureceu na prática hoje padrão das escalas tipográficas modulares: cada tamanho da página derivado da multiplicação repetida de um corpo-base por uma única razão. As razões comuns ganharam nomes de intervalos musicais — 1,2 (terça menor), 1,25 (terça maior), 1,333 (quarta justa), 1,5 (quinta justa) — e a faixa original permanece exatamente certa, com um refinamento: a razão deve servir ao meio. Interfaces de produto densas e leitura longa se dão bem com razões suaves (1,125–1,25), que produzem tamanhos distintos em número suficiente sem manchetes enormes; páginas editoriais e de marketing suportam 1,333 ou 1,5. Uma razão que gera um h2 de 60 pixels em uma aplicação densa em dados é a razão errada para aquele contexto.
A mudança técnica maior é que uma escala já não precisa ser um único conjunto fixo de números. O clamp() do CSS permite que cada degrau da escala seja fluido: um tamanho definido com um mínimo, um valor preferido relativo ao viewport e um máximo, de modo que os títulos escalam suavemente entre o telefone e o desktop em vez de saltar nos breakpoints. Uma escala fluida bem construída usa, na prática, uma razão menor em telas pequenas e uma maior em telas grandes — o que corresponde a como os designers de impresso sempre ajustaram o tipo de exibição à página. Uma cautela de acessibilidade é essencial: o termo intermediário relativo ao viewport deve ser misturado com um componente baseado em rem (por exemplo, um cálculo combinando rem e vw), nunca unidades de viewport puras. Texto dimensionado apenas em vw ignora a preferência de corpo de fonte do usuário e não responde ao redimensionamento de texto do navegador, minando os requisitos de redimensionamento e refluxo das WCAG. Toda expressão clamp() deve continuar honrando um usuário que definiu seu corpo-base em 200%.
As advertências do original sobre o comportamento sob escala — quadros truncados, rótulos de botões que desaparecem, ordem de leitura quebrada a 150% — foram codificadas. As WCAG exigem que o texto seja redimensionável a 200% sem perdas (1.4.4 Redimensionar texto) e que o conteúdo reflua a 320 pixels CSS (1.4.10). O velho conselho de "projetar para a escala" agora é simplesmente conformidade.
A hierarquia deve ser estrutural, não apenas visual
O acréscimo mais importante a este capítulo é invisível. Um usuário de leitor de tela não percebe que uma linha tem 32 pixels e está em negrito; percebe que ela é — ou não é — um elemento de título em determinado nível. Usuários de leitores de tela navegam rotineiramente abrindo uma lista de títulos e saltando entre eles; uma página cujos "títulos" são meros parágrafos ampliados em negrito não lhes oferece estrutura alguma. É isso que o Critério de Sucesso 1.3.1 das WCAG, Informações e relações (nível A), exige: informação transmitida pela apresentação visual — inclusive a hierarquia — deve também ser determinável programaticamente.
A disciplina prática tem duas metades. Primeiro, todo título visual deve ser um elemento de título real (h1 a h6), e os níveis de título devem refletir o sumário do documento: um h1 para o assunto da página, h2 para as seções principais, h3 para suas subseções, sem pular níveis na descida. Segundo — e é aqui que os designers mais erram —, o nível semântico e o tamanho visual devem ser desacoplados. O nível de título correto é ditado pela estrutura do documento; o tamanho correto é ditado pelo design. Quando eles conflitam (um h2 que deve parecer modesto, um h4 que merece destaque), mantenha o nível estrutural e reestilize-o com uma classe. Escolher a tag pelo seu tamanho padrão é a causa raiz da maioria dos sumários quebrados da web.
Hierarquia além do corpo
O capítulo de 2005 tratava a hierarquia como um problema de dimensionamento. A prática madura distribui o trabalho por quatro variáveis — corpo, peso, espaço e cor —, e o corpo costuma ser a menos eficiente delas. Um degrau acima no peso da fonte (digamos, de 400 para 600) ou uma faixa de espaço em branco acima de um título pode sinalizar uma nova seção com a mesma clareza de um salto de corpo, sem consumir espaço vertical nem apinhar telas pequenas. Isso importa tanto para a acessibilidade quanto para a economia: hierarquias que se apoiam inteiramente no corpo tendem a desmoronar em viewports estreitos, onde os tamanhos de exibição precisam encolher, enquanto a diferenciação por peso e espaço sobrevive a qualquer viewport. As fontes variáveis tornam o peso um eixo contínuo, de modo que pesos intermediários podem ser afinados com precisão para o contraste de que um nível precisa. Cor e pistas secundárias jamais devem carregar a hierarquia sozinhas — devem se apoiar na marcação estrutural e em pelo menos um outro sinal visual, e o texto dos títulos ainda precisa cumprir os requisitos de contraste.
Dois refinamentos modernos menores. Títulos de várias linhas se beneficiam de text-wrap: balance, que iguala as larguras de linha para que uma manchete não abandone uma única palavra na última linha — uma pequena declaração CSS que substitui anos de ajustes manuais de quebra. E a entrelinha dos títulos deve ser definida apertada (cerca de 1,1–1,25, conforme o capítulo anterior) em cada nível da escala, e não herdada do texto corrido.
O corpo-base, como o original insistia, permanece primordial: toda a escala se multiplica a partir dele. O piso moderno é o padrão do navegador de 1rem (16px por padrão) para o texto corrido — definido em rem, nunca em pixels, para que as preferências do usuário se propaguem —, com a leitura longa muitas vezes mais bem servida a 1,125–1,25rem.
Em CSS
:root {
/* a fluid modular scale, ratio ≈ 1.25, anchored in rem */
--step-0: 1rem;
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3.2rem);
}
h1 { font-size: var(--step-3); text-wrap: balance; }
h2 { font-size: var(--step-2); text-wrap: balance; }
h3 { font-size: var(--step-1); }Recomendações
- Construa os tamanhos a partir de uma escala modular com razão de aproximadamente 1,2–1,5, escolhida pela densidade do conteúdo.
- Torne a escala fluida com clamp(), sempre misturando um componente rem no valor preferido para que as configurações de corpo de fonte do usuário sejam honradas.
- Use elementos de título reais em um sumário lógico — um h1, sem níveis pulados — conforme o WCAG 1.3.1; nunca escolha uma tag pelo tamanho.
- Desacople a semântica da aparência: estilize os níveis de título com classes quando estrutura e design divergirem.
- Expresse a hierarquia por peso e espaço, além do corpo; evite hierarquias que dependam apenas do corpo ou da cor.
- Defina o texto corrido em um mínimo de 1rem em unidades relativas e verifique se a hierarquia sobrevive ao redimensionamento de texto de 200% e ao refluxo a 320px.
- Aplique text-wrap: balance e entrelinha apertada aos títulos.