Hierarquia tipográfica: como construir uma que realmente se lê

A maioria dos artigos sobre hierarquia tipográfica a descreve em vez de construí-la. Dizem que os títulos devem parecer importantes e o texto corrido deve parecer calmo. Inútil quando o pedido é "escolha cinco tamanhos, três pesos e a entrelinha que se sustenta numa homepage, num artigo e num painel de configurações". Descrição não é sistema. O sistema é o que vai para produção.

Este texto é a construção. Proporções reais, números reais, a ordem das decisões e os padrões de falha que matam a maioria das hierarquias antes do lançamento.

O que a hierarquia tipográfica realmente é

Hierarquia tipográfica é a classificação estrutural de cada elemento de texto para que o olho saiba o que ler primeiro, segundo e terceiro antes mesmo de ler qualquer coisa. Ela é a camada específica de tipografia da hierarquia visual e a espinha dorsal de qualquer sistema tipográfico que funcione.

Uma hierarquia de verdade responde por escrito a quatro perguntas. Quantos níveis. Qual o tamanho de cada nível. Qual o peso de cada nível. Qual o espaçamento entre os níveis e dentro deles. Se essas respostas não existem numa única página de documentação, o sistema é improvisado, não projetado.

Os cinco níveis que quase todo sistema precisa

A maioria dos sistemas que funcionam chega a cinco níveis: H1, H2, H3, corpo e pequeno. Mais que isso cria ruído. Menos achata a página.

A armadilha é tratar botões, legendas e rótulos de formulário como níveis separados. Eles são corpo ou pequeno com outro papel. Botão é corpo em peso médio. Legenda é pequeno em peso regular. Rótulo é pequeno em peso médio. Mesmos tamanhos, funções diferentes.

Escolha uma proporção de escala e se comprometa

O tamanho de cada nível vem de uma única proporção aplicada a uma base. Escolha a proporção primeiro, depois derive cada tamanho dela. A base quase sempre é 16px, o padrão do navegador e o tamanho em que o corpo de texto fica mais limpo na tela. Três proporções cobrem quase todos os projetos.

Terça maior (1,25). Compacta e densa. Melhor para UI cheia de dados e ferramentas administrativas. A partir de uma base de 16px: 16, 20, 25, 31, 39, 49, 61. Visível, mas nunca dramática.

Quarta justa (1,333). A cavalo de batalha. Forte o bastante para editorial, contida o bastante para produto. A partir de uma base de 16px: 16, 21, 28, 37, 50, 67. O padrão da maioria dos sites de marketing.

Proporção áurea (1,618). Editorial, expressiva, quase teatral. Melhor para landing pages e layouts de revista. A partir de uma base de 16px: 16, 26, 42, 68, 110. O H1 domina o corpo de texto, e esse é o ponto.

Ferramentas como type-scale.com geram a tabela para qualquer base e proporção em um segundo. Escolha uma, anote os números, publique. Trocar no meio do projeto é um refactor que toca todas as páginas.

Peso é o segundo eixo, não o primeiro

Designers recorrem ao tamanho como única alavanca e depois se perguntam por que a página parece chapada. O peso carrega metade do trabalho, especialmente no mobile, onde a variação de tamanho é limitada.

Um sistema que funciona precisa de três pesos. Regular para o corpo, médio para ênfase e rótulos, bold ou semibold para títulos. Um quarto peso é decisão de marca, não requisito do sistema.

A regra que conserta a maioria das páginas chapadas: nunca use o mesmo peso em dois níveis adjacentes. Se o H2 é bold, o H3 deve ser semibold ou médio. Adjacência de pesos iguais colapsa a hierarquia, não importa o tamanho. A armadilha inversa é o tudo-em-bold, que elimina o peso como alavanca.

A entrelinha é a alavanca silenciosa da hierarquia

Entrelinha é o espaço vertical entre as linhas, de linha de base a linha de base. O CSS chama de line-height. A alavanca mais subestimada da hierarquia tipográfica.

Entrelinha apertada num título soa confiante e denso. Entrelinha solta no corpo soa calma e legível. Ao contrário, a hierarquia se inverte. Corpo a 1,2 vira um paredão. Um título de 64px a 1,6 vira decoração.

Padrões que funcionam. Títulos (H1, H2): 1,1 a 1,2. Subtítulos (H3): 1,2 a 1,3. Corpo: 1,5 a 1,7. Legendas: 1,4 a 1,5. Texto maior precisa de menos entrelinha, texto menor precisa de mais. Texto longo pede mais entrelinha no corpo que UI. Um dashboard a 1,4 parece denso, o que está correto.

Tracking é para texto de display, não para o corpo

Kerning é o espaço entre pares específicos de letras, ajustado na escala de logo ou título. Tracking é o espaço entre todas as letras de um trecho, definido de forma uniforme. Não são a mesma alavanca.

Tracking só é ferramenta de hierarquia nos extremos. Tracking apertado num título grande (-0,02em a -0,04em) o faz parecer firme e decidido. Tracking aberto em rótulos pequenos em caixa alta (+0,05em a +0,1em) faz o rótulo parecer intencional. Ambos sinalizam o papel do texto.

A zona de perigo é o corpo. Aplicar tracking no texto corrido prejudica a legibilidade sem render nenhum benefício de hierarquia. Deixe o corpo em zero. O sinal mais rápido de um designer que não entende tracking é um título hero a +0,1em porque "parece editorial". Não parece. Parece decoração.

O espaçamento entre níveis faz parte da hierarquia

O espaço vertical ao redor de cada nível o classifica tanto quanto tamanho e peso. Um H2 com 80px acima e 24px abaixo parece o início de uma nova seção. O mesmo H2 com 24px acima e abaixo parece uma quebra de parágrafo.

A regra: o espaço acima deve ser cerca do dobro do espaço abaixo. O elemento pertence ao conteúdo que vem depois. Especificação inicial: acima do H2: 64 a 96px, abaixo do H2: 16 a 24px. Acima do H3: 32 a 48px, abaixo do H3: 8 a 16px. A disciplina de espaço em branco importa tanto quanto o texto em si. Uma escala perfeita com espaçamento desleixado parece chapada.

A ordem de decisão para construir uma hierarquia do zero

Pule etapas e a hierarquia parece boa isolada, mas desmorona dentro de um produto real.

1. Escolha o tamanho base. 16px para tela. 18px para sites focados em editorial. Nunca abaixo de 16px no corpo.
2. Escolha a proporção da escala. Terça maior para UI densa, quarta justa para uso geral, proporção áurea para editorial.
3. Gere a tabela de tamanhos. Derive cada nível da proporção. Arredonde para pixels inteiros. Anote.
4. Escolha três pesos. Regular, médio, bold ou semibold. Nada mais.
5. Defina a entrelinha por nível. Apertada para títulos, solta para o corpo.
6. Defina o espaçamento por nível. Proporção 2 para 1 entre acima e abaixo em todo título.
7. Defina tracking só para os extremos. Apertado no display, aberto em caixa alta pequena. Zero no corpo.
8. Valide em três telas reais. Um hero de homepage, um artigo longo, um painel denso de UI. Se funciona nas três, publique.

O jeito mais rápido de lançar uma hierarquia quebrada é derivar tamanhos por intuição em vez de uma proporção e depois remendar entrelinha e espaçamento página por página.

Onde a maioria das hierarquias falha

Seis padrões de falha matam mais hierarquias que qualquer outra coisa.

Tudo é bold. O peso deixa de ser alavanca e a página se apoia só no tamanho. Baixe o H3 e qualquer título terciário para médio ou semibold.

Só existem dois níveis. H1 e corpo sem nada no meio parece um documento chapado com um título no topo. Adicione um H2 a cada 150 a 300 palavras.

O subtítulo flutuante. Espaço igual acima e abaixo deixa o subtítulo sem pertencer a nenhuma seção. Reduza o espaço abaixo para que ele se cole ao corpo que vem a seguir.

O H1 descontrolado. Um H1 de hero desktop usado em todas as páginas de conteúdo quebra o ritmo. Defina um token de H1 desktop e um token de H1 de página de conteúdo. Mesmo nome, dois valores.

Corpo de texto a 14px. Abaixo de 16px a legibilidade quebra e os níveis menores são espremidos numa faixa de 2px. 16px no mínimo. Use 13 a 14px só para legendas e rótulos.

Hierarquia projetada só no desktop. O mobile comprime cada nível e transforma a hierarquia num borrão. Projete mobile first e escale para cima.

Hierarquia nas condições de 2026

Fontes variáveis agora são o padrão certo. Um único arquivo de 80KB entrega regular, médio, semibold e bold a partir de um eixo. Duas fontes variáveis cobrem o sistema inteiro. O guia de combinação de fontes explica como escolhê-las.

As visões gerais de IA leem a marcação semântica, não a visual. Uma página com um H1, depois uma div estilizada para parecer um H2, depois um H3, é interpretada errado. Hierarquia visual e HTML semântico precisam coincidir. Um H1 por página, sem pular níveis. O artigo sobre princípios de web design cobre o lado semântico.

O checklist de auditoria da hierarquia

Salve isto. Rode antes do lançamento. Qualquer não deve ser corrigido antes de publicar.

Dez de dez se lê sozinha em qualquer dispositivo. Sete de dez parece projetada. Abaixo de sete parece chapada, não importa a fonte.

FAQ

Qual a diferença entre hierarquia visual e hierarquia tipográfica?

Hierarquia visual é o sistema mais amplo que classifica cada elemento usando tamanho, peso, cor, posição, espaço, alinhamento e imagens. Hierarquia tipográfica é a camada específica de texto que usa tamanho, peso, entrelinha, tracking e espaçamento para classificar o texto. A hierarquia tipográfica é uma das entradas da hierarquia visual.

Qual a melhor proporção para uma escala tipográfica?

Quarta justa (1,333) é o padrão mais seguro. Produz contraste claro sem virar teatral. Use terça maior (1,25) para UI densa e ferramentas administrativas. Use proporção áurea (1,618) para editorial e landing pages em que o hero precisa dominar.

Como conserto uma hierarquia que parece chapada?

Três movimentos, em ordem. Aumente primeiro o contraste de tamanho. H1 pelo menos 2x o H2, H2 pelo menos 1,5x o corpo. Adicione contraste de peso em segundo. Dois níveis adjacentes nunca compartilham o mesmo peso. Aperte o ritmo de espaçamento em terceiro, com proporção 2 para 1 entre acima e abaixo em todo título. Se a página ainda parecer chapada, o layout está fazendo coisa demais e precisa de cortes de escopo antes de mais trabalho tipográfico.

Construa a hierarquia, depois confie nela

Uma hierarquia que funciona é o caminho mais barato para uma página que se lê sozinha. O leitor não vê os níveis, as proporções nem os valores de entrelinha. Ele vê uma página que faz sentido. A matemática desaparece na clareza.

A armadilha é tratar a hierarquia como polimento da última milha. Ela é a espinha dorsal. Construa primeiro, valide em telas reais, documente como tokens e deixe toda outra decisão se compor a partir dela. Se você quer um time que constrói o sistema tipográfico, a hierarquia e a UI do produto como um só projeto em vez de três, contrate a Brainy. Nós escolhemos a proporção, escrevemos os tokens e entregamos o sistema num produto real.