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

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

Escolhe os tamanhos de letra a olho e eles desviam-se: 18, 22, 23, 30, 31. Uma escala tipográfica troca esses palpites por um tamanho base e uma proporção, para que todos os tamanhos pareçam da mesma família.

## The short version

- Uma escala tipográfica é um conjunto curto de tamanhos de letra feito ao multiplicar um tamanho base pela mesma proporção, uma e outra vez.
- Proporções pequenas como 1,2 servem interfaces densas, enquanto proporções grandes como 1,5 servem cartazes, posts e páginas de aterragem.
- Com uma base de 16 px e uma proporção de 1,25, a escala vai de 16, 20, 25, 31, 39 a 49 px.
- A maioria dos designs precisa apenas de cinco ou seis tamanhos, e arredondar os resultados a píxeis inteiros não tem problema.
- Em CSS, uma escala tipográfica mantém-se mais facilmente como propriedades personalizadas, tornada fluida com clamp().

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

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

| Nome | Proporção | Sensação | Bom para |
| --- | --- | --- | --- |
| Segunda menor | 1,067 | Quase sem diferença | Tabelas de dados densas, ecrãs pequenos |
| Segunda maior | 1,125 | Suave | Aplicações e painéis de controlo |
| Terça menor | 1,2 | Calma e clara | Interfaces, documentação, leitura longa |
| Terça maior | 1,25 | Equilibrada | Sites e blogs, uma predefinição segura |
| Quarta perfeita | 1,333 | Confiante | Páginas de marketing, editorial |
| Quarta aumentada | 1,414 | Forte | Páginas de aterragem, apresentações |
| Quinta perfeita | 1,5 | Arrojada | Cartazes, posts, grandes títulos |
| Proporção áurea | 1,618 | Dramática | Letra de destaque com poucos níveis |

Proporções comuns, das pequenas às grandes. Em caso de dúvida, começa em 1,25 para a web e em 1,5 para posts.

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

| 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 a píxeis inteiros. O passo abaixo da base é a base dividida pela proporção, usado para legendas e etiquetas.

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

Um post vertical com uma grande estatística, Pagamento 3 vezes mais rápido, acima de texto de apoio mais pequeno

Um post de estatística precisa de três níveis claros: o número, o detalhe e a etiqueta. Numa escala de 1,5 são 135, 60 e 40 px.

Um slide vertical de carrossel intitulado Antes de publicares com uma lista de verificação curta por baixo

Um slide de lista usa os passos mais baixos da mesma escala, por isso fica bem ao lado do slide de estatística no mesmo carrossel.

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](https://gradiently.design/pt-pt/guide/text-hierarchy-social) 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp): um mínimo para telemóveis, um máximo para ecrãs largos e um valor fluido pelo 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); }
```

Muda `--ratio` uma vez e todos os passos se atualizam. Mantém `rem` no mínimo de cada clamp para que o texto continue a respeitar a definição de tamanho de letra do próprio leitor.

### Evita

- Dez tamanhos quando cinco chegavam
- Dois títulos com 2 px de diferença
- A mesma proporção para um painel de controlo e para um cartaz
- Tamanhos fixos em píxeis que ignoram as definições de letra do leitor

### Faz

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

Uma escala é uma parte de um conjunto maior de decisões sobre tipos de letra, espaçamento e funções. O [sistema tipográfico](https://gradiently.design/pt-pt/guide/brand-typography-system) junta-as, e o [tracking contra kerning](https://gradiently.design/pt-pt/guide/tracking-vs-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.

## FAQ

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

Um conjunto de tamanhos de letra feito ao multiplicar um tamanho base pela mesma proporção repetidamente, para que todos os tamanhos estejam proporcionalmente relacionados.

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

Não há uma única melhor. 1,2 ou 1,25 serve sites e aplicações com muito texto; 1,5 ou mais serve cartazes e posts com poucas palavras.

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

Normalmente cinco ou seis: um tamanho pequeno, texto, dois ou três níveis de título e um tamanho de destaque.

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

Sim. Arredondar a píxeis inteiros não faz diferença visível e torna a escala mais fácil de usar e de memorizar.

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

Usa `clamp()` para cada passo, com um mínimo em rem, um valor intermédio fluido com unidades de viewport e um máximo para ecrãs largos.