# Bases da tipografia: tamanho, peso, espaçamento e ritmo

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

A maior parte do que faz o texto parecer profissional não é o tipo de letra. São seis decisões sobre tamanho, peso e espaço, e cada uma tem um ponto de partida sensato.

## The short version

- A tipografia assenta em seis decisões: tamanho, peso, entrelinha, espaçamento entre letras, alinhamento e comprimento de linha.
- Uma escala tipográfica, em que cada tamanho é maior do que o anterior numa proporção fixa, dá a um design uma hierarquia clara e coerente.
- O texto corrido lê-se confortavelmente com uma entrelinha de cerca de 1,4 a 1,6 vezes o tamanho da letra, enquanto os títulos grandes precisam de menos, à volta de 1,0 a 1,2.
- Linhas de cerca de 45 a 75 caracteres são o intervalo mais recomendado para uma leitura confortável.
- Dois ou três pesos chegam para a maioria dos designs, e devem diferir claramente, como regular e negrito em vez de regular e médio.

As **bases da tipografia** resumem-se a seis decisões: o **tamanho** de cada texto, o seu **peso**, a **entrelinha**, o **espaçamento entre letras**, o **alinhamento** e o **comprimento de linha**. Acerta nelas e quase qualquer tipo de letra decente parece profissional; erra nelas e o melhor tipo de letra do mundo parece amador. Cada uma tem um ponto de partida sensato, indicado abaixo, do qual te podes afastar de propósito.

## Tamanho: usa uma escala tipográfica

Escolher os tamanhos um a um leva a uma página cheia de tamanhos quase iguais e sem uma ordem clara. Uma **escala tipográfica** resolve isso: parte de um tamanho base e multiplica pela mesma proporção a cada degrau. A proporção define o carácter. Proporções pequenas, como 1,2, parecem calmas e densas; proporções grandes, como 1,5, parecem dramáticas e editoriais.

| Degrau | Proporção 1,25 a partir de 16 px | Uso típico |
| --- | --- | --- |
| Pequeno | 12.8 px | Legendas, etiquetas |
| Base | 16 px | Texto corrido |
| Degrau 1 | 20 px | Parágrafo de abertura, texto grande |
| Degrau 2 | 25 px | Subtítulos |
| Degrau 3 | 31.25 px | Títulos de secção |
| Degrau 4 | 39 px | Títulos de página |
| Degrau 5 | 48.8 px | Títulos de destaque |

Uma escala de 1,25 a partir de uma base de 16 píxeis. Arredonda os números como quiseres; o que importa é que todos os tamanhos se relacionam entre si.

```css
:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }
```

A mesma escala como propriedades personalizadas de CSS, com um tamanho raiz de 16 píxeis. Usa só os degraus da escala.

Nas publicações para redes sociais a tela é maior, por isso os números são maiores, mas a ideia é a mesma. Numa publicação com 1080 píxeis de largura, um título de cerca de 90 a 120 píxeis e uma linha de detalhe de cerca de 40 a 56 mantêm um degrau claro entre eles e leem-se num telemóvel.

## Peso: menos pesos, degraus mais claros

O peso é a espessura dos traços, normalmente numerada de 100 (fino) a 900 (black), com 400 como regular e 700 como negrito. Dois ou três pesos chegam para a maioria dos designs. O essencial é que pesos vizinhos pareçam diferentes: regular contra negrito lê-se como um contraste intencional, regular contra médio lê-se muitas vezes como um erro.

### Confuso

- Cinco pesos numa só página
- Regular 400 contra médio 500 para dar ênfase
- Pesos leves ou finos para texto corrido pequeno
- Negrito usado em parágrafos inteiros

### Claro

- Dois ou três pesos, cada um com uma função
- Regular 400 contra negrito 700 ou seminegrito 600
- Regular ou médio para texto corrido em tamanhos pequenos
- Negrito para poucas palavras que têm de se destacar

## Entrelinha: espaço entre linhas

A entrelinha é a distância de uma linha à seguinte. O texto corrido precisa de ar para se ler confortavelmente: cerca de **1,4 a 1,6** vezes o tamanho da letra é um intervalo fiável. Os títulos grandes precisam de menos, à volta de **1,0 a 1,2**, porque em tamanhos grandes os espaços parecem muito maiores do que são. As linhas compridas precisam de um pouco mais de entrelinha do que as curtas, para que o olhar encontre o início da linha seguinte. [Entrelinha e comprimento de linha](https://gradiently.design/pt-pt/guide/line-height-and-line-length) aprofunda o tema.

## Espaçamento entre letras: quase sempre, deixa estar

Os tipos de letra são espaçados pelos seus designers para os tamanhos a que se destinam, por isso o texto corrido raramente precisa de ajustes. Há duas exceções que vale a pena conhecer. Os títulos grandes ficam muitas vezes melhor ligeiramente mais apertados, com um pequeno valor negativo como -0.01em a -0.02em. O texto em maiúsculas e as etiquetas pequenas precisam do contrário: um pouco mais de espaço, à volta de 0.05em a 0.1em, porque as maiúsculas foram desenhadas para ficar ao lado de minúsculas. [Espaçamento entre letras](https://gradiently.design/pt-pt/guide/letter-spacing) trata dos pormenores.

## Alinhamento

O texto alinhado à esquerda, com a margem direita irregular, é a predefinição por uma razão: todas as linhas começam no mesmo sítio, por isso o olhar encontra-as com facilidade. O texto centrado serve peças curtas, como um título, uma citação ou um convite, e torna-se cansativo para lá de algumas linhas. O texto justificado fica arrumado na impressão, onde o software consegue hifenizar bem, mas na web abre muitas vezes espaços irregulares entre as palavras.

Uma publicação vertical com um título grande, uma pequena etiqueta espaçada por cima e uma linha de apoio por baixo

Três tamanhos de uma só escala, dois pesos, entrelinha apertada no título e um pouco mais de espaçamento na pequena etiqueta por cima.

## Comprimento de linha: a medida

O comprimento de uma linha, a **medida**, importa tanto como o seu tamanho. Linhas demasiado compridas tornam difícil encontrar a seguinte; linhas demasiado curtas quebram o ritmo de leitura com mudanças constantes. Um intervalo de cerca de **45 a 75 caracteres** por linha é o mais recomendado para texto corrido. Na web, a unidade `ch` torna isto fácil.

```css
article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}
```

Medida, entrelinha e espaçamento numa pequena folha de estilos. `text-wrap: balance` é ignorado sem problemas onde não é suportado.

## Ritmo: espaçamento que agrupa

O espaço diz aos leitores o que pertence ao quê. Um título deve ficar mais perto do parágrafo que apresenta do que do anterior, por isso põe mais espaço por cima dos títulos do que por baixo. Mantém o espaçamento entre parágrafos coerente e usa uma só unidade de espaçamento, muitas vezes baseada na entrelinha do texto corrido, em todo o lado. Quando o espaço é usado com coerência, a página ganha um ritmo que a faz parecer calma mesmo quando está cheia. [Hierarquia visual](https://gradiently.design/pt-pt/guide/visual-hierarchy) parte daqui.

1. **Escolhe um tamanho para o texto corrido** 16 píxeis ou mais em ecrãs; muito maior em publicações para redes sociais.
2. **Escolhe uma proporção para a escala** 1,2 para algo calmo e denso, 1,25 para quase tudo, 1,333 ou mais para drama editorial.
3. **Define dois pesos** Regular para ler, negrito ou seminegrito para ênfase e títulos.
4. **Define as entrelinhas** Cerca de 1,5 para texto corrido, cerca de 1,1 para títulos grandes.
5. **Limita a medida** À volta de 65 caracteres para texto corrido.
6. **Espaça com uma unidade** Um degrau de espaçamento, reutilizado, com mais espaço por cima dos títulos do que por baixo.

Com isto no sítio, a escolha do tipo de letra passa a ser a parte divertida e não a solução. Começa por [combinar tipos de letra](https://gradiently.design/pt-pt/guide/font-pairing) e [serifa ou sem serifa](https://gradiently.design/pt-pt/guide/serif-vs-sans-serif).

## FAQ

### Quais são as regras básicas da tipografia?

Usa uma escala tipográfica coerente, dois ou três pesos claramente diferentes, uma entrelinha de cerca de 1,4 a 1,6 para texto corrido, linhas de cerca de 45 a 75 caracteres, alinhamento à esquerda para texto longo e espaçamento coerente.

### Qual é um bom tamanho de texto corrido para sites?

16 píxeis é um mínimo comum para texto corrido em ecrãs, e muitos sites usam um pouco mais.

### Que entrelinha devo usar?

Cerca de 1,4 a 1,6 vezes o tamanho da letra para texto corrido, e à volta de 1,0 a 1,2 para títulos grandes.

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

Um conjunto de tamanhos de letra em que cada um é maior do que o anterior numa proporção fixa, como 1,25, para que todos os tamanhos se relacionem e a hierarquia se mantenha coerente.