Escalas tipográficas: como escolhi 13 passos e por que a proporção importa

O livro The Elements of Typographic Style, de Robert Bringhurst, estabeleceu que relações tipográficas harmoniosas seguem as mesmas proporções matemáticas encontradas na música: a quarta justa (1,333), a quinta justa (1,5) e a proporção áurea (1,618). Comecei com uma quarta justa e terminei com uma progressão personalizada que nenhuma proporção padrão produz — porque a estrutura do meu conteúdo exigia passos específicos entre o texto do corpo e os títulos de destaque.¹

Resumo

Uma escala tipográfica gera uma hierarquia de tamanhos de fonte a partir de um tamanho base e uma proporção matemática. Depois de construir o sistema tipográfico do blakecrosley.com — 13 passos de 0,75rem (12px) a 5rem (80px), usando exclusivamente fontes do sistema — aprendi que a proporção importa menos do que os passos entre o texto do corpo e o H1. Minha escala usa uma progressão de aproximadamente 1,18 entre passos adjacentes, mas faz saltos deliberados (de 3,875rem para 5rem) onde a estrutura do conteúdo exige separação visual. A comparação interativa abaixo mostra a diferença entre proporções rígidas e ajustes orientados pelo conteúdo.

Minha escala tipográfica: 13 passos

Aqui está a escala real do critical.css do meu site:

:root {
  --font-size-xs:      0.75rem;   /* 12px — metadata, timestamps */
  --font-size-sm:      0.875rem;  /* 14px — captions, fine print */
  --font-size-base:    1rem;      /* 16px — body text, default */
  --font-size-lg:      1.125rem;  /* 18px — lead paragraphs */
  --font-size-xl:      1.3125rem; /* 21px — large body, section intro */
  --font-size-2xl:     1.5625rem; /* 25px — H4, card titles */
  --font-size-3xl:     1.875rem;  /* 30px — H3 */
  --font-size-4xl:     2.25rem;   /* 36px — H2 */
  --font-size-5xl:     2.7rem;    /* 43.2px — H1 */
  --font-size-6xl:     3.25rem;   /* 52px — large H1 */
  --font-size-7xl:     3.875rem;  /* 62px — page title */
  --font-size-display: 5rem;      /* 80px — hero headline */
}

A progressão entre passos adjacentes não segue uma proporção matemática rígida. Os passos de xs a xl seguem aproximadamente 1,17-1,18x. Os passos de 5xl a display crescem de forma mais agressiva (1,20-1,29x) porque o título hero precisa de separação visual em relação aos títulos de nível de página.²

Por que não uma proporção rígida?

Uma terça maior rígida (1,25) a partir de uma base de 16px produz estes passos: 16, 20, 25, 31,25, 39,06, 48,83, 61,04. O salto do corpo (16px) para o H3 (31,25px) é de quase 2x — dramático demais para páginas com muito conteúdo, onde o H3 aparece com frequência. Minha escala comprime a faixa intermediária (18, 21, 25, 30, 36) para manter os títulos proporcionais ao texto do corpo, enquanto expande a faixa superior (43, 52, 62, 80) para tipografia de destaque.

A estrutura do conteúdo guiou a escala, não a matemática. Testei cada passo com conteúdo real de blog posts e ajustei os tamanhos onde o teste do olhar desfocado falhou.³

Por que fontes do sistema

Minha pilha de fontes:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

O argumento de performance

Fontes do sistema carregam em zero milissegundos. Sem requisições de rede, sem FOIT (Flash of Invisible Text), sem FOUT (Flash of Unstyled Text). Essa escolha contribui para minha pontuação de 100/100 no Lighthouse.

Fontes web personalizadas normalmente adicionam 100-300ms ao First Contentful Paint devido ao download dos arquivos de fonte e às decisões de renderização do navegador. O Google Fonts carrega de um CDN (no mínimo uma consulta DNS + uma requisição HTTP). Fontes auto-hospedadas eliminam a consulta DNS, mas ainda exigem o download. Fontes do sistema eliminam todos os componentes de latência no carregamento de fontes.⁴

O argumento de design

Fontes do sistema combinam com a plataforma. No macOS, meu site é renderizado em SF Pro — a mesma fonte usada pela interface do macOS, Apple Mail e a barra do Safari. A continuidade visual entre o sistema operacional e o site transmite uma sensação nativa em vez de uma identidade de marca.

Linear, Vercel e Raycast usam a mesma abordagem. O padrão emergiu dos meus 16 estudos de design de produto: produtos que priorizam a legibilidade do conteúdo em vez da expressão da marca tendem a usar fontes do sistema.

Quando fontes personalizadas valem a pena

Fontes personalizadas servem para páginas de marketing, identidade de marca e tipografia de destaque, onde a fonte É o design. Meu site prioriza conteúdo (blog posts, descrições de projetos), onde a tipografia deve ser transparente — os leitores devem processar o conteúdo, não notar a fonte.

O sistema de pesos

Quatro pesos atendem a todas as necessidades de hierarquia:

:root {
  --font-weight-normal:   400;  /* Body text */
  --font-weight-medium:   500;  /* Navigation, labels */
  --font-weight-semibold: 600;  /* Subheadings, emphasis */
  --font-weight-bold:     700;  /* Headlines, primary actions */
}

Combinados com os 13 passos de tamanho e quatro níveis de opacidade, tenho 208 combinações possíveis (13 tamanhos × 4 pesos × 4 opacidades). Na prática, uso aproximadamente 15 combinações de forma consistente. O sistema oferece flexibilidade sem exigir uma decisão a cada instância de texto — a maioria dos textos usa tamanho base, peso normal, opacidade primary.⁵

Tipografia responsiva

O problema com proporções únicas

Uma escala tipográfica projetada para desktop produz títulos enormes no mobile. Meu tamanho display de 80px preenche uma viewport de 1440px perfeitamente, mas sobrecarrega uma tela de celular de 375px. Em vez de escalar o sistema inteiro com unidades de viewport, eu sobrescrevo breakpoints específicos:

@media (max-width: 1024px) {
  .hero__title { font-size: var(--font-size-6xl); }  /* 52px */
}

@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-3xl); }  /* 30px */
}

O texto do corpo permanece em 16px em todas as viewports — o texto do corpo não precisa escalar porque 16px continua legível em qualquer tela moderna. Apenas os tamanhos de destaque e títulos diminuem em viewports menores. A abordagem é mais simples que tipografia fluida (clamp()) e produz resultados previsíveis em breakpoints conhecidos.⁶

Espaçamento entre letras em tamanhos de destaque

Tipografia grande precisa de tracking mais apertado. Em 80px, o espaçamento padrão entre letras produz lacunas visíveis entre os caracteres:

.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

O letter-spacing de -0.03em e o line-height de 1.05 produzem títulos compactos e impactantes. O texto do corpo em 16px usa o espaçamento padrão com um line-height generoso de 1.7 para legibilidade. O contraste entre títulos apertados e texto do corpo espaçado cria ritmo visual sem decoração.⁷

Testando a tipografia

O teste do olhar desfocado

Desfoque os olhos ou afaste-se da tela. A hierarquia de títulos deve permanecer visualmente distinta em cada nível. Se o H3 e o H4 se confundem, a proporção é pequena demais para a fonte escolhida.

Apliquei o teste do olhar desfocado à minha escala e identifiquei que --font-size-xl (21px) e --font-size-2xl (25px) se confundiam inicialmente. Adicionar uma diferença de peso (xl usa normal 400, 2xl usa semibold 600) resolveu a distinção sem alterar os tamanhos. O peso proporciona hierarquia independentemente do tamanho.⁸

O teste de conteúdo

Preencha cada nível de título com conteúdo real. Texto placeholder mascara problemas de hierarquia porque “Lorem Ipsum” não tem a variação de peso visual da linguagem real. Eu testo cada ajuste de escala com meu blog post mais longo (correção de erros de Hamming, mais de 2.000 palavras com H2, H3, H4, blocos de código, tabelas e notas de rodapé). Se a escala funciona para o conteúdo mais complexo, funciona para tudo.

Principais conclusões

Para designers: - Comece com um tamanho base de 16px e teste proporções entre 1,15 e 1,25 com conteúdo real; proporções matemáticas rígidas frequentemente exigem ajustes orientados pelo conteúdo nos extremos - Use o teste do olhar desfocado e o teste de conteúdo antes de finalizar; a distinção visual em cada nível de título importa mais do que a pureza matemática

Para desenvolvedores: - Defina escalas tipográficas como CSS custom properties no nível :root; referencie var(--font-size-*) em toda a base de código para evitar que tamanhos arbitrários se acumulem - Considere fontes do sistema antes de fontes web personalizadas; a economia de 100-300ms no carregamento de fontes se acumula a cada carregamento de página, e fontes do sistema proporcionam legibilidade nativa da plataforma - Use sobrescritas por breakpoint para tamanhos de destaque em vez de tipografia fluida, se resultados previsíveis em larguras conhecidas importam mais do que interpolação suave

Referências