Noções básicas de tipografia: tamanho, peso, espaçamento e ritmo

As noções básicas de tipografia se resumem a seis decisões: o tamanho de cada trecho de texto, o peso, a entrelinha, o espaçamento entre letras, o alinhamento e o comprimento da linha. Acerte essas seis e quase qualquer fonte decente parece profissional; erre e a melhor fonte do mundo parece amadora. Cada uma tem um padrão sensato, mostrado abaixo, do qual você pode se afastar de propósito.

Tamanho: use uma escala tipográfica

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

: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); }

Em posts para redes sociais a tela é maior, então os números são maiores, mas a ideia é a mesma. Em um post de 1080 pixels de largura, um título de uns 90 a 120 pixels e uma linha de detalhe de uns 40 a 56 mantêm um degrau claro entre eles e se leem bem no celular.

Peso: menos pesos, degraus mais claros

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

Entrelinha: espaço entre as linhas

A entrelinha é a distância de uma linha para a próxima. Texto corrido precisa de ar para ser lido com conforto: cerca de 1,4 a 1,6 vez o tamanho da fonte é uma faixa confiável. Títulos grandes precisam de menos, por volta de 1,0 a 1,2, porque em tamanhos grandes os espaços parecem bem maiores do que são. Linhas longas precisam de um pouco mais de entrelinha que as curtas, para que o olho encontre o começo da linha seguinte. Entrelinha e comprimento de linha vai mais fundo.

Espaçamento entre letras: quase sempre, deixe como está

As fontes são espaçadas pelos seus criadores para os tamanhos a que se destinam, então texto corrido raramente precisa de ajuste. Duas exceções valem a pena conhecer. Títulos grandes costumam ficar melhores um pouco mais apertados, com um pequeno valor negativo como -0,01em a -0,02em. Texto em maiúsculas e rótulos pequenos precisam do contrário: um pouco mais de espaço, por volta de 0,05em a 0,1em, porque as maiúsculas foram desenhadas para ficar ao lado de minúsculas. Espaçamento entre letras traz os detalhes.

Alinhamento

Texto alinhado à esquerda, com a margem direita irregular, é o padrão por um motivo: toda linha começa no mesmo lugar, então o olho encontra o início com facilidade. Texto centralizado combina com trechos curtos, como um título, uma citação ou um convite, e cansa depois de algumas linhas. Texto justificado fica arrumado no impresso, onde o software consegue hifenizar bem, mas na web costuma abrir espaços irregulares entre as palavras.

Comprimento de linha: a medida

O comprimento da linha, a medida, importa tanto quanto o tamanho. Linhas longas demais dificultam achar a próxima; linhas curtas demais quebram o ritmo de leitura com voltas constantes. Uma faixa de cerca de 45 a 75 caracteres por linha é a mais recomendada para texto corrido. Na web, a unidade ch facilita isso.

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);
}

Ritmo: espaçamento que agrupa

O espaço diz ao leitor o que anda junto. Um título deve ficar mais perto do parágrafo que apresenta do que do anterior, então coloque mais espaço acima dos títulos do que abaixo. Mantenha o espaço entre parágrafos consistente e use uma única unidade de espaçamento, muitas vezes baseada na entrelinha do texto corrido, do começo ao fim. Quando o espaço é usado com consistência, a página ganha um ritmo que a faz parecer calma mesmo quando está cheia. Hierarquia visual parte daqui.

1. 1

   Escolha um tamanho para o texto corrido

   16 pixels ou mais nas telas; bem maior em posts para redes sociais.

2. 2

   Escolha uma proporção de escala

   1,2 para algo calmo e denso, 1,25 para quase tudo, 1,333 ou mais para drama editorial.

3. 3

   Defina dois pesos

   Regular para leitura, negrito ou seminegrito para ênfase e títulos.

4. 4

   Defina as entrelinhas

   Cerca de 1,5 para texto corrido, cerca de 1,1 para títulos grandes.

5. 5

   Limite a medida

   Por volta de 65 caracteres para texto corrido.

6. 6

   Espace com uma unidade

   Um degrau de espaçamento, reutilizado, com mais espaço acima dos títulos do que abaixo.

Com isso no lugar, a escolha da fonte vira a parte divertida em vez da solução. Comece por combinação de fontes e serifa ou sem serifa.