Tipografia: dar voz ao texto — Tipografia, cor e efeitos

O detalhe que separa "amador" de "profissional"

Coloque dois sites lado a lado. O que parece de verdade quase nunca vence por ter mais coisas: vence na tipografia, na cor e em um toque de efeitos. É o que você nota sem saber explicar. E aqui você tem vantagem: cada mudança aparece na hora.

90% da web é texto, então é por aí que começamos. Escolher bem a fonte e o seu ritmo é o que faz um design parecer profissional, e o CSS controla a fonte com um punhado de propriedades muito expressivas.

font-family e os font stacks

font-family indica qual fonte usar. Você nunca informa apenas uma: oferece uma lista de reserva (font stack), como um plano B, C e D. O navegador tenta da esquerda para a direita até encontrar uma que esteja instalada, e termina com uma família genérica (serif, sans-serif, monospace).

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
code {
  font-family: "Fira Code", Consolas, monospace;
}

Os nomes com espaços vão entre aspas. A genérica final é o seu seguro de vida: sempre haverá algo legível.

Tamanho, peso e estilo

h1 {
  font-size: 2.5rem;    /* tamanho (rem = relativo à raiz) */
  font-weight: 700;     /* espessura: 400 normal, 700 negrito */
  font-style: italic;   /* normal | italic */
}

font-size: use rem para que escale com as preferências do usuário.
font-weight: de 100 a 900; bold equivale a 700.

Ritmo vertical e horizontal

p {
  line-height: 1.6;        /* entrelinha: 1.4–1.7 se lê melhor */
  letter-spacing: 0.02em;  /* espaçamento entre letras */
  text-align: justify;     /* left | right | center | justify */
}

Um line-height sem unidade (1.6) é proporcional ao tamanho da fonte: é o recomendado, porque se adapta a cada elemento.

⚠️ Cilada clássica: esquecer o line-height. Um texto com as linhas grudadas cansa de ler mesmo com uma fonte linda. Dê respiro: 1.5–1.7 em parágrafos longos e você sente a diferença.

Web fonts (ideia geral)

As fontes do sistema são limitadas. Para usar uma fonte personalizada você a baixa com @font-face ou de um serviço como o Google Fonts:

/* Opção 1: declará-la você mesmo com @font-face */
@font-face {
  font-family: "MinhaFonte";
  src: url("/fonts/minhafonte.woff2") format("woff2");
}

/* Opção 2: importar do Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

Uma vez carregada, você a usa como qualquer outra em font-family. Em alto nível: a fonte é mais um recurso que o navegador baixa antes de pintar o texto.

⚠️ Cilada clássica: colocar cinco tipografias "porque são legais". Duas bem escolhidas (uma para títulos, outra para o corpo) dão mais classe que uma festa de fontes. Menos é mais.

Exemplos

Uma pilha de fontes com boa entrelinha

body {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 1rem;
}