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

Uma escala tipográfica é um conjunto de tamanhos de letra construído a partir de um tamanho base e de uma proporção. Começas pelo tamanho do texto corrido, digamos 16 px, e multiplicas pela proporção para obter o tamanho seguinte, e voltas a multiplicar para o seguinte. Com uma proporção de 1,25 obténs 16, 20, 25, 31, 39 e 49 px. Como cada passo cresce na mesma proporção, os tamanhos parecem relacionados, e escolher o tamanho de um título deixa de ser um palpite.

Porque é que uma escala tipográfica faz os tamanhos parecerem relacionados

O olho lê o tamanho como proporção, não como píxeis. O salto de 16 para 20 sente-se igual ao salto de 39 para 49, porque ambos são um quarto maiores. Os tamanhos escolhidos a olho tendem a agrupar-se em alguns sítios e a deixar buracos noutros, e dois títulos acabam quase do mesmo tamanho e parecem um erro. Uma escala dá a cada nível um passo claro e consistente, que é a espinha dorsal da hierarquia visual.

Proporções comuns de escalas tipográficas comparadas

Muitas proporções populares tiram o nome de intervalos musicais, e uma escala construída assim chama-se muitas vezes escala modular. O nome importa menos do que o tamanho do passo: quanto maior a proporção, maior o drama entre níveis e menos níveis cabem numa página.

Valores da escala tipográfica em píxeis

Aqui fica a mesma base de 16 px passada por quatro proporções. Repara na rapidez com que as proporções grandes sobem: ao passo 4, uma escala de 1,5 já está em 81 px, enquanto uma de 1,2 está em 33 px.

Arredondar não tem problema. Ninguém vê a diferença entre 31,25 e 31 px, e os números inteiros são mais fáceis de memorizar e de alinhar numa grelha.

Como construir a tua própria escala tipográfica

1. 1

   Escolhe o tamanho base

   É o teu texto corrido. 16 a 18 px serve para a maioria dos sites; numa tela social de 1080 px, começa em 40 px.

2. 2

   Escolhe a proporção a partir do 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

   Gera cinco ou seis passos

   Multiplica para cima para os títulos e divide uma vez para o texto pequeno. A maioria dos designs nunca usa mais do que seis tamanhos.

4. 4

   Arredonda e dá-lhes nome

   Arredonda a píxeis inteiros e nomeia os passos pela função, como legenda, texto, título e destaque, não por número.

5. 5

   Define a altura de linha por passo

   Tamanhos maiores pedem entrelinha mais apertada. Texto por volta de 1,5, títulos por volta de 1,2, letra de destaque perto de 1,0.

6. 6

   Testa com palavras reais

   Compõe um título, um subtítulo e um parágrafo a sério. Se dois passos parecerem demasiado semelhantes, salta um ou aumenta a proporção.

Uma escala tipográfica para posts

Os posts precisam de uma proporção maior do que as páginas web, porque uma tela de 1080 px encolhe para um terço da largura num telemóvel e há apenas dois ou três níveis de texto. Uma base de 40 px com uma proporção de 1,5 dá 40, 60, 90 e 135 px, o que se alinha bem com os tamanhos do tamanho de letra para posts do Instagram.

Usar uma só escala em todos os slides de um carrossel é o que faz um conjunto parecer desenhado e não montado. Os mesmos tamanhos nas mesmas funções, slide após slide. O layout de texto em posts de redes sociais mostra como os organizar.

Como escrever uma escala tipográfica em CSS

Guarda a escala como propriedades personalizadas para que cada componente vá buscar a ela. Podes encadear multiplicações com calc() ou escrever os valores arredondados. Para uma escala que cresce com o ecrã, dá a cada passo um intervalo clamp(): um mínimo para telemóveis, um máximo para ecrãs largos e um valor fluido pelo 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 tipos de letra, espaçamento e funções. O sistema tipográfico junta-as, e o tracking contra kerning trata dos valores de espaçamento que acompanham cada passo. Se crias conteúdo para redes sociais, o kit de marca do Gradiently guarda os teus tipos de título e de texto e o Designer aplica-os a cada novo tamanho, o que torna fácil manter uma escala que defines uma só vez.