Escala tipográfica: tamanhos que parecem aparentados, com proporções

Uma escala tipográfica é um conjunto de tamanhos de fonte construído a partir de um tamanho base e de uma proporção. Você começa com o tamanho do texto, digamos 16 px, e multiplica pela proporção para obter o próximo tamanho acima, e multiplica de novo para o seguinte. Com proporção 1,25, você obtém 16, 20, 25, 31, 39 e 49 px. Como cada passo cresce na mesma proporção, os tamanhos parecem aparentados, e escolher o tamanho de um título deixa de ser palpite.

Por que uma escala tipográfica faz os tamanhos parecerem aparentados

O olho lê o tamanho como proporção, não como pixels. O salto de 16 para 20 parece o mesmo que o de 39 para 49, porque os dois são um quarto maiores. Tamanhos escolhidos no olho tendem a se amontoar em alguns pontos e deixar lacunas em outros, e dois títulos acabam quase do mesmo tamanho e parecem um erro. Uma escala dá a cada nível um passo claro e constante, que é a espinha dorsal da hierarquia visual.

Proporções comuns de escala tipográfica comparadas

Muitas proporções populares tomam o nome de intervalos musicais, e uma escala feita assim costuma ser chamada de escala modular. O nome importa menos do que o tamanho do passo: quanto maior a proporção, mais drama entre os níveis e menos níveis cabem em uma página.

Valores de escala tipográfica em pixels

Aqui está a mesma base de 16 px passada por quatro proporções. Repare como as proporções grandes sobem rápido: no passo 4, uma escala 1,5 já está em 81 px, enquanto uma escala 1,2 está em 33 px.

Arredondar é aceitável. Ninguém vê a diferença entre 31,25 e 31 px, e números inteiros são mais fáceis de lembrar e de alinhar em uma grade.

Como montar sua própria escala tipográfica

1. 1

   Escolha o tamanho base

   É o tamanho do seu texto. De 16 a 18 px serve para a maioria dos sites; em uma tela social de 1080 px, comece com 40 px.

2. 2

   Escolha uma proporção conforme o conteúdo

   Muito texto e muitos níveis de título pedem uma proporção pequena. Poucas palavras e um grande título pedem uma grande.

3. 3

   Gere cinco ou seis passos

   Multiplique para os títulos e divida uma vez para o texto pequeno. A maioria dos designs nunca usa mais de seis tamanhos.

4. 4

   Arredonde e dê nomes

   Arredonde para pixels inteiros e nomeie os passos pela função, como legenda, texto, título e exibição, não por número.

5. 5

   Defina a altura de linha por passo

   Tamanhos maiores pedem entrelinha mais justa. Texto em torno de 1,5, títulos em torno de 1,2, fontes de exibição perto de 1,0.

6. 6

   Teste com palavras reais

   Componha um título, um subtítulo e um parágrafo de verdade. Se dois passos parecerem parecidos demais, pule um ou aumente a proporção.

Uma escala tipográfica para posts sociais

Posts sociais pedem uma proporção maior que páginas da web, porque uma tela de 1080 px encolhe a um terço da largura no celular e só há dois ou três níveis de texto. Uma base de 40 px com proporção 1,5 dá 40, 60, 90 e 135 px, que se alinha bem com os tamanhos de tamanho de fonte para posts do Instagram.

Usar uma escala em todos os slides de um carrossel é o que faz um conjunto parecer projetado e não montado. Os mesmos tamanhos nas mesmas funções, slide após slide. Layout de texto para posts de redes sociais mostra como organizá-los.

Como escrever uma escala tipográfica em CSS

Guarde a escala como propriedades personalizadas para que todo componente beba dela. Você pode encadear multiplicações com calc() ou escrever os valores arredondados. Para uma escala que cresce com a tela, dê a cada passo um intervalo de clamp(): um mínimo para celulares, um máximo para telas largas e um valor fluido no meio.

/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }

Uma escala é uma parte de um conjunto maior de decisões sobre fontes, espaçamento e funções. Sistema tipográfico reúne tudo isso, e tracking ou kerning trata dos valores de espaçamento que acompanham cada passo. Se você cria conteúdo social, o kit de marca do Gradiently guarda suas fontes de título e de texto e o Designer as aplica a todo novo tamanho, o que facilita manter uma escala definida uma única vez.