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

[Canonical HTML page](https://gradiently.design/pt-br/guide/typographic-scale)

Escolha tamanhos de fonte no olho e eles se desencontram: 18, 22, 23, 30, 31. Uma escala tipográfica troca esses palpites por um tamanho base e uma proporção, e todo tamanho parece da mesma família.

## The short version

- Uma escala tipográfica é um conjunto curto de tamanhos de fonte feito multiplicando um tamanho base pela mesma proporção, de novo e de novo.
- Proporções pequenas, como 1,2, servem a interfaces densas, enquanto proporções grandes, como 1,5, servem a pôsteres, posts sociais e páginas de destino.
- Com base de 16 px e proporção 1,25, a escala vai de 16, 20, 25, 31, 39 a 49 px.
- A maioria dos designs precisa de apenas cinco ou seis tamanhos, e arredondar os resultados para pixels inteiros não tem problema.
- Em CSS, uma escala tipográfica é mais fácil de manter como propriedades personalizadas, tornadas fluidas com clamp().

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](https://gradiently.design/pt-br/guide/visual-hierarchy).

## 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.

| Nome | Proporção | Sensação | Bom para |
| --- | --- | --- | --- |
| Segunda menor | 1,067 | Quase igual | Tabelas de dados densas, telas pequenas |
| Segunda maior | 1,125 | Suave | Apps e painéis |
| Terça menor | 1,2 | Calma e clara | Interfaces, documentação, leitura longa |
| Terça maior | 1,25 | Equilibrada | Sites e blogs, um padrão seguro |
| Quarta justa | 1,333 | Confiante | Páginas de marketing, editorial |
| Quarta aumentada | 1,414 | Forte | Páginas de destino, apresentações |
| Quinta justa | 1,5 | Ousada | Pôsteres, posts sociais, títulos grandes |
| Proporção áurea | 1,618 | Dramática | Fontes de exibição com poucos níveis |

Proporções comuns, das pequenas às grandes. Na dúvida, comece com 1,25 para a web e 1,5 para posts sociais.

## 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.

| Passo | 1,2 | 1,25 | 1,333 | 1,5 |
| --- | --- | --- | --- | --- |
| Pequeno (passo −1) | 13 | 13 | 12 | 11 |
| Texto (base) | 16 | 16 | 16 | 16 |
| Passo 1 | 19 | 20 | 21 | 24 |
| Passo 2 | 23 | 25 | 28 | 36 |
| Passo 3 | 28 | 31 | 38 | 54 |
| Passo 4 | 33 | 39 | 51 | 81 |
| Passo 5 | 40 | 49 | 67 | 122 |

Valores arredondados para pixels inteiros. O passo abaixo da base é a base dividida pela proporção, usado em legendas e rótulos.

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. **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. **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. **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. **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. **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. **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](https://gradiently.design/pt-br/guide/font-size-for-social-media).

Um post social vertical com uma estatística grande, checkout 3 vezes mais rápido, acima de um texto de apoio menor

Um post de estatística precisa de três níveis claros: o número, o detalhe e o rótulo. Em uma escala 1,5, eles são 135, 60 e 40 px.

Um slide vertical de carrossel com o título Antes de postar e uma lista curta embaixo

Um slide de lista usa os passos mais baixos da mesma escala, então fica bem ao lado do slide de estatística em um carrossel.

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](https://gradiently.design/pt-br/guide/text-hierarchy-social) 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp): um mínimo para celulares, um máximo para telas largas e um valor fluido no meio.

```css
/* 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); }
```

Mude `--ratio` uma vez e todos os passos se atualizam. Mantenha `rem` no mínimo de cada clamp para que o texto ainda respeite a configuração de fonte do próprio leitor.

### Evite

- Dez tamanhos quando cinco bastariam
- Dois títulos com 2 px de diferença
- A mesma proporção para um painel e um pôster
- Tamanhos fixos em pixels que ignoram as configurações de fonte do leitor

### Faça

- Cinco ou seis passos, cada um com uma função nomeada
- Pule um passo se dois níveis parecerem iguais
- Proporção pequena para telas densas, grande para poucas palavras
- Tamanhos em rem, fluidos com clamp()

Uma escala é uma parte de um conjunto maior de decisões sobre fontes, espaçamento e funções. [Sistema tipográfico](https://gradiently.design/pt-br/guide/brand-typography-system) reúne tudo isso, e [tracking ou kerning](https://gradiently.design/pt-br/guide/tracking-vs-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.

## FAQ

### O que é uma escala tipográfica?

Um conjunto de tamanhos de fonte feito multiplicando um tamanho base pela mesma proporção repetidamente, de modo que cada tamanho se relaciona proporcionalmente aos outros.

### Qual é a melhor proporção de escala tipográfica?

Não existe uma única melhor. 1,2 ou 1,25 serve a sites e apps com muito texto; 1,5 ou mais serve a pôsteres e posts sociais com poucas palavras.

### Quantos tamanhos de fonte um design deve usar?

Em geral cinco ou seis: um tamanho pequeno, o texto, dois ou três níveis de título e um tamanho de exibição.

### Devo arredondar os valores da escala tipográfica?

Sim. Arredondar para pixels inteiros não faz diferença visível e deixa a escala mais fácil de usar e de lembrar.

### Como deixar uma escala tipográfica responsiva em CSS?

Use `clamp()` em cada passo, com um mínimo em rem, um valor intermediário fluido com unidades de viewport e um máximo para telas largas.