Escala tipográfica é a decisão de hierarquia que define o que o olho lê primeiro. Ela não é o ajuste de deixar o título maior até parecer bonito.

Aumentar o título não cria hierarquia

Hierarquia depende de contraste entre níveis, e o olho segue esse contraste em padrões previsíveis. O NN/g descreve que "First lines of text on a page receive more gazes than subsequent lines of text on the same page" e que "First few words on the left of each line of text receive more fixations than subsequent words on the same line" (https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).

Isso significa que o topo da página carrega a decisão de leitura. Um título grande sem os níveis abaixo proporcionais deixa o olho sem degrau para descer. A escala organiza esses degraus.

O mesmo estudo aponta quando o padrão em F aparece: "A page or a section of a page includes text that has little or no formatting for the web. For example, it has a wall of text but no bolding, bullets, or subheadings" (https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/). Título grande sozinho, sem subtítulo e sem peso intermediário, recria essa parede.

O que a escala precisa definir antes do tamanho

Antes de escolher qualquer tamanho, defina quantos níveis a página tem e qual o papel de cada um. O glossário do NN/g lista as propriedades que formam esses níveis: cap height é "the height of capital letters in a typeface", medida da linha de base até o topo do caractere; x-height é a referência das letras minúsculas; e leading é "the negative vertical space between consecutive text lines, measured baseline to baseline" (https://www.nngroup.com/articles/typography-terms-ux/).

Essas três medidas, não só o corpo do título, determinam se dois níveis parecem diferentes.

O glossário também separa peso de estilo: font weight é "the thickness of the lines in each letter", com exemplos que vão de thin a ultrablack, e font style é "the specific variant of a typeface's appearance within a type family" (https://www.nngroup.com/articles/typography-terms-ux/). Escala feita só com peso, sem variação de tamanho, achata a hierarquia em blocos parecidos.

Tamanho de texto é também requisito de acessibilidade

A escala não é escolha estética livre. Alvos pequenos e próximos aumentam o risco de ativação errada para quem tem limitação de destreza, e o texto que funciona como alvo entra nessa conta.

A mesma fonte explica que o requisito não muda com o zoom: "The requirement is independent of the zoom factor of the page; when users zoom in, the CSS pixel size of elements does not change" (https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). Ou seja, não dá para compensar uma escala apertada dizendo que o usuário aumenta o zoom.

A escala precisa sobreviver ao carregamento

Hierarquia construída com fontes grandes e pesadas tem custo de renderização.

Um título grande costuma ser justamente o elemento que o navegador reporta como LCP, já que a métrica considera "Block-level elements containing text nodes or other inline-level text element children" (https://web.dev/articles/lcp). Se a escala depende de uma fonte pesada que demora a carregar, o maior elemento da página é também o mais lento para pintar.

Não é um detalhe de vaidade visual.

Como aplicar isso no projeto

Trate a escala como uma lista de decisões, não como um controle deslizante. Primeiro, conte os níveis que a página realmente usa: título principal, subtítulo de seção, texto de apoio, corpo e legenda. Segundo, defina o contraste entre eles por tamanho, peso e espaço, não só por tamanho. Terceiro, verifique se o maior elemento da página não é o mais lento para carregar.

O padrão em F mostra que o leitor decide rápido. O NN/g registra que o padrão aparece quando "The user is trying to be most efficient on that page" e quando "The user is not so committed or interested that he is willing to read every word" (https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/). A escala existe para dar a esse leitor apressado um caminho claro do topo até o que importa.

Título grande sem escala é decoração. Escala com níveis definidos é a decisão que faz a página ser lida na ordem certa.

Dados conferidos

Fontes

• Kara Pernice (2026). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) (https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)
• Sarah Gibbons e Therese Fessenden (2024). Typography Terms: Glossary (https://www.nngroup.com/articles/typography-terms-ux/)
• W3C (2026). Understanding Success Criterion 2.5.8: Target Size (Minimum) (https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
• Philip Walton e Barry Pollard (2025). Largest Contentful Paint (LCP) (https://web.dev/articles/lcp)
• Philip Walton (2024). Web Vitals (https://web.dev/articles/vitals)