Tipografia: Fontes, Tamanhos e Espaçamento

Texto é o conteúdo da web - a maior parte do que o usuário lê. Tipografia bem-feita é a diferença entre um site legível e um site cansativo.

Família da fonte (font-family)

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

Você lista várias fontes, separadas por vírgula. O navegador usa a primeira que existir no sistema do usuário. A última (geralmente sans-serif ou serif) é uma garantia - se nenhuma das outras existir, o navegador usa a fonte padrão da categoria.

Tem dois tipos de fonte que você vai encontrar:

• Fontes do sistema: as que já vêm instaladas. -apple-system é a fonte da Apple (San Francisco), Segoe UI é a do Windows, Roboto é a do Android. Boas para performance - zero download.
• Web fonts: fontes que você baixa para o usuário (Google Fonts, Adobe Fonts, etc.). Mais bonitas e customizáveis, mas custam um download extra e podem atrasar a renderização.

/* Exemplo com Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

body { font-family: "Inter", sans-serif; }

Tamanho (font-size)

h1 { font-size: 32px; }
p { font-size: 16px; }
small { font-size: 14px; }

Unidades a gente vê em detalhe no próximo nó, mas a regra geral é: 16px é o padrão do navegador. Texto de corpo, 16. Títulos, maior. Detalhes e legendas, menor. Veremos rem mais à frente, mas se puder já fixar: use rem para tamanhos de fonte - respeita a preferência do usuário que aumenta o texto nas opções do sistema.

Peso (font-weight)

.normal { font-weight: 400; } /* mesmo que "normal" */
.bold { font-weight: 700; }    /* mesmo que "bold" */
.light { font-weight: 300; }

Vai de 100 (fina) a 900 (super preta), em passos de 100. Nem toda fonte tem todos os pesos: se você pedir font-weight: 800 numa fonte que só tem 400 e 700, o navegador arredonda pro mais próximo.

Altura de linha (line-height)

p { line-height: 1.5; }
h1 { line-height: 1.2; }

A distância entre as linhas do parágrafo. Sem unidade é o ideal - é proporcional ao font-size. 1.5 significa "1,5 vezes o tamanho da fonte". Texto de corpo fica bom entre 1.4 e 1.7. Títulos, mais apertado (1.1 a 1.3).

Alinhamento e decoração

p { text-align: justify; }       /* esquerda | center | right | justify */
a { text-decoration: none; }     /* tira o sublinhado do link */
h1 { letter-spacing: 2px; }      /* espaço entre letras */
p { text-transform: uppercase; } /* caixa alta */

• font-family: a fonte em si. Liste várias e termine com uma categoria genérica.
• font-size: tamanho. Use rem por padrão.
• font-weight: peso (100 a 900). 400 é normal, 700 é negrito.
• line-height: distância entre linhas. Sem unidade, proporcional.
• Alinhamento/decoration/transform: retoques finais.

Dica: leia em voz alta. Se o texto fica ofegante pra ler, aumente a line-height. Se as letras parecem amontoadas, aumente o letter-spacing. Tipografia boa é invisível - o usuário lê sem perceber que existe.

No próximo nó, vamos falar do box model - o conceito que explica por que todo elemento tem um "tamanho maior do que você acha".