Tipografia

Este capítulo define a voz escrita da Oficina Costeira: família, tamanho, entrelinha e medida. A Oficina Costeira é um coletivo fictício de design em João Pessoa. O texto precisa ser lido na areia clara, no celular e com zoom.

O exemplo está em exemplos/20-tipografia/. Este volume tem 52 capítulos.

Tipografia na Web não é só escolher uma fonte bonita. É ritmo. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Montar uma fila de font-family com reserva genérica.
• Dimensionar texto em rem, não em pixel travado.
• Usar line-height sem unidade.
• Limitar a medida da linha com max-width e ch.
• Estilizar links pelos estados, com foco incluso.
• Tratar listas e o atalho font com cuidado.

Família e reserva

font-family é uma fila. O navegador tenta a primeira, depois a seguinte. A última precisa ser genérica: sans-serif, serif ou monospace.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Início · Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Coletivo fictício de design gráfico em João Pessoa.</p>
  </body>
</html>

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #14222b;
}

Aspas envolvem nome com espaço. Segoe UI tem espaço, então vai entre aspas. Tahoma não precisa. sans-serif nunca leva aspas.

A Oficina Costeira usa sem serifa no corpo. Títulos podem ser a mesma fila, com peso maior. Fonte nova baixa da rede fica para o capítulo 21. Aqui o sistema da visitante basta.

Não escreva o parágrafo em caixa alta no HTML. Se o logo precisar de maiúsculas, o CSS faz text-transform: uppercase. O NVDA lê melhor o texto original.

.brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

rem em vez de px no texto

O navegador tem um tamanho padrão de fonte, em geral 16 px. A pessoa pode subir isso. font-size: 14px no body ignora o pedido.

rem multiplica o tamanho do html. 1rem acompanha a pessoa. 2rem é o dobro.

html {
  font-size: 100%;
}
h1 {
  font-size: 2rem;
  line-height: 1.2;
}
h2 {
  font-size: 1.4rem;
}

em multiplica o pai. Se um div já está em 1.25em e o p interno também, o tamanho compõe. Por isso o volume prefere rem no texto.

px ainda serve para borda de 1 px. Não sirva o parágrafo nele.

Pare e experimente. No main.css, mude só o h1 de 2rem para 32px. Preveja: no tamanho padrão parece igual; com zoom só de texto, o título pode não acompanhar o corpo. Recarregue, aumente o texto no navegador, confira. Devolva 2rem.

Erro comum: font-size enorme no body sem ajustar line-height. As linhas se encostam. Trate os dois juntos.

Entrelinha solta no corpo

line-height: 1.5 (sem unidade) multiplica o font-size corrente. Filhos herdam a proporção, não um pixel congelado.

Corpo de texto lê melhor com 1.45 a 1.6. Título curto lê melhor perto de 1.2. Número grande demais no h1 abre buracos.

body {
  font-size: 1rem;
  line-height: 1.5;
}
h1, h2, h3 {
  line-height: 1.2;
}

line-height: 24px trava. Se o título cresce, a caixa não cresce junto.

O atalho font junta estilo, peso, tamanho, entrelinha e família numa linha. Se um pedaço faltar, o atalho pode resetar o resto.

/* Explícito, mais seguro enquanto estuda */
body {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

/* Atalho equivalente, fácil de errar */
body {
  font: 400 1rem/1.5 "Segoe UI", Tahoma, sans-serif;
}

Enquanto estuda, declare separado. O atalho entra quando a fila já estiver estável.

Medida: o comprimento da linha

Linha longa demais perde o começo na volta. Linha curta demais cansa o olho na horizontal. 45 a 75 caracteres é o recorte clássico. 65ch aproxima isso: ch é a largura do “0” da fonte atual.

p, li {
  max-width: 65ch;
}
.wrap {
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
}

.wrap limita a página. max-width no p limita a linha mesmo se o wrap for largo. Os dois podem coexistir.

Não justifique (text-align: justify). O português na tela fica com rios brancos. text-align: left é o padrão. center no hero curto pode valer. Não centre parágrafo longo.

text-indent de livro impresso atrapalha na Web, sobretudo no primeiro parágrafo depois de um h1. Evite.

Links: ordem dos estados

Link não herda color como um span. Estilize a de propósito. Mantenha sublinhado no texto corrido.

A ordem clássica dos pseudos é enlace, visitado, hover, foco, ativo. Se o hover vier depois do foco e empate na especificidade, o teclado pode perder o estilo de foco.

a {
  color: #0b4f6c;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}
a:visited {
  color: #0b4f6c;
}
a:hover {
  color: #c45c26;
}
a:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}
a:active {
  color: #14222b;
}

Neste site fictício, visitado igual ao enlace evita um roxo que quebra o contraste. O hover laranja não é o único sinal: o sublinhado permanece.

Não tire o sublinhado do parágrafo. No menu, o capítulo 17 já mostrou a exceção, com aria-current sublinhado.

Listas e peso

ul vem com disco. ol vem com número. list-style-type troca o marcador. none no menu tira o disco, porque o papel de lista continua no HTML.

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.lista-projetos {
  list-style-type: square;
  margin: 1rem 0 1rem 1.4rem;
}

font-weight: 700 é negrito. 400 é o regular. Se a web font da próximo capítulo não tiver o peso 600, o navegador inventa um falso negrito. Peça só os pesos que o arquivo tem.

font-style: italic no em já vem do navegador. Não troque em por span itálico. O significado de ênfase fica na tag.

A medida, o rem e a entrelinha já deixam a Oficina Costeira legível sem uma única imagem de layout. O capítulo 22 vai explorar uma página só com tipo. Antes, a 21 mostra como baixar uma família com @font-face local.

Atividades

1. Por que a fila de font-family termina em sans-serif?
2. Qual a vantagem de line-height: 1.5 sem unidade?
3. O que max-width: 65ch controla que width: 70rem no .wrap não controla sozinho?
4. Por que font-size: 14px no body atrapalha quem aumenta o texto no navegador?
5. Em que ordem você declara :hover e :focus-visible neste volume?

Respostas comentadas

1. Garante uma sem serifa mesmo se “Segoe UI” e Tahoma não existirem na máquina.
2. O número multiplica o font-size atual. Filhos herdam a proporção.
3. O comprimento da linha do parágrafo. O wrap pode ser largo; o p continua com medida de leitura.
4. Pixel fixo ignora o tamanho-base que a pessoa configurou. rem a partir de html { font-size: 100% } respeita.
5. Hover pode vir antes; o foco visível vem junto ou depois, para o teclado não perder o anel e a cor.

Referências

• font-family
• font-size
• line-height
• length: rem e ch
• Estilizando texto

O arquivo completo

Referência do exemplo 20-tipografia, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}