Tipografia

Texto é a maior parte do site do Laboratório Belavista. HTML já traz defaults razoáveis; CSS afina família, peso, tamanho, entrelinha e o carregamento de fontes próprias.

O exemplo deste capítulo é 56-tipografia, no pacote que acompanha o volume. Mude line-height do artigo, preveja a leitura, recarregue e confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Declarar font-family, font-size, font-weight, font-style.
• Controlar line-height, letter-spacing e alinhamento.
• Carregar fonte com @font-face e font-display.
• Usar unidades relativas (rem) no texto do corpo.
• Evitar blocos longos com medida excessiva.

Família e corpo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tipografia — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <article class="artigo">
      <h1>Caderno de provas</h1>
      <p class="chapéu">Oficina de tipografia móvel</p>
      <p>No ateliê fictício Belavista, cada cartaz começa no papel milimetrado. Ajuste o corpo tipográfico até a linha respirar.</p>
    </article>
  </body>
</html>

@font-face {
  font-family: "Belavista Texto";
  src: url("fonts/belavista-texto.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Belavista Texto", "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #1a1a1a;
}

.artigo {
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.artigo h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.chapéu {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b1e1e;
}

Medida e ritmo

Linhas muito longas cansam. max-inline-size ~60–75 caracteres ajuda. line-height unitless (ex.: 1.6) escala com o tamanho da fonte.

.artigo p {
  margin-block: 0 1em;
  text-wrap: pretty; /* onde houver suporte */
}

@font-face

Liste formatos modernos (woff2) primeiro. font-display: swap mostra fallback rápido e troca quando a fonte chega — evita texto invisível longo.

Erro comum: só px fixos em tudo e zoom do usuário quebrando a hierarquia. Prefira rem no corpo e títulos relativos.

Ênfase

font-style: italic e font-weight: 700 só funcionam bem se a família tiver esses cortes (ou eixo variável). Senão o navegador “finge” e a qualidade cai.

Critério para avançar

Você avança se: define pilha de fontes com fallback; ajusta line-height; limita a medida do artigo.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Para que serve font-display: swap?
2. Por que line-height: 1.6 (sem unidade) é preferível a line-height: 16px no corpo?
3. O que max-inline-size no .artigo melhora?

Respostas comentadas

1. Mostra texto com fonte reserva enquanto a webfont carrega.
2. Escala automaticamente se font-size mudar; 16px fica engessado.
3. Evita linhas excessivamente longas, melhorando a leitura.