Escala tipográfica

Este capítulo organiza os tamanhos de letra da Oficina Costeira numa escala. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Este volume tem 52 capítulos. Esta é a 42.

O exemplo está em exemplos/42-escala-tipografica/. Tipo já apareceu antes. Agora os títulos e o corpo conversam em rem, com um ritmo que você consegue prever. Ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Usar rem ligado ao tamanho da raiz.
• Escolher um fator e multiplicar para subir de um título a outro.
• Combinar font-size, line-height e margem num ritmo.
• Limitar a largura da linha para leitura.
• Ajustar a escala em tela estreita sem inventar uma fonte nova.
• Tratar gerador de escala como extra opcional.

A raiz manda no rem

rem significa “unidade da raiz”. A raiz é o elemento html. Se a raiz vale 100%, o navegador usa o tamanho que a pessoa configurou. Em muitos aparelhos isso começa em 16 px, mas você não deve travar a página em pixel.

html {
  font-size: 100%;
}

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #14222b;
  background: #f7f4ee;
}

1rem no corpo acompanha a raiz. line-height: 1.5 é um número sem unidade: um e meio vezes o tamanho da letra. Quando a pessoa aumenta a fonte, o espaçamento cresce junto.

Evite font-size: 14px no body “para caber mais texto”. Quem precisa de letra maior perde a briga com o seu pixel.

Mude só html { font-size: 100%; } para 112.5%. Preveja texto um pouco maior em toda a página. Recarregue. Confira títulos e parágrafos. Depois volte a 100% se a home da Oficina Costeira ficar pesada.

Erro comum: misturar px nos títulos e rem no corpo. A escala parte ao meio quando a visitante zooma.

Um fator, vários degraus

Escala modular é uma sequência. Você escolhe um número, o fator, e multiplica. Com fator 1.25 (quarta maior), a conta sobe assim, a partir de 1rem:

• corpo e h6: 1rem
• h5: 1.25rem
• h4: 1.56rem
• h3: 1.95rem
• h2: 2.44rem
• h1: 3.05rem

Você não precisa de seis níveis na Oficina Costeira. Home e internas usam h1 e h2 o tempo todo. h3 aparece no card. Corte o que não usa.

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 1.5rem 0 0.5rem;
}

h3 {
  font-size: 1.15rem;
  line-height: 1.35;
}

Os valores acima são degraus mais manso do que 3rem no h1. Em tela de estudo, 2rem no título da home já destaca. O fator não precisa ser perfeito na terceira casa decimal. Precisa ser consciente: cada título é maior que o de baixo.

Mude só o h1 para 2.5rem. Preveja o título da Oficina Costeira mais alto. Recarregue. Confira se ainda cabe na janela estreita.

Erro comum: h1 menor que h2 “porque ficou bonito”. A hierarquia da página e a da folha precisam apontar para o mesmo lado.

Ritmo: tamanho, entrelinha, espaço

Letra, entrelinha e margem trabalham juntas. Se o título é grande e a margem de baixo é 4px, o bloco sufoca o parágrafo. Se a entrelinha do corpo é 1, as linhas colam.

Um ritmo simples para a Oficina Costeira:

p,
li {
  max-width: 65ch;
}

p + p {
  margin-top: 0.75rem;
}

.hero {
  padding: 1.5rem 0;
}

65ch limita a linha a cerca de 65 caracteres. Leitura longa não deve atravessar a tela inteira. Listas e parágrafos compartilham essa largura.

A margem entre parágrafos irmãos (p + p) evita espaço extra no primeiro. O padding do .hero respira o bloco de abertura, não cada frase.

Mude só max-width: 65ch para 40ch. Preveja colunas de texto mais estreitas. Recarregue. Confira. Se os cards da home parecerem um canudo, volte para 65ch ou aplique o limite só em .hero p.

Erro comum: line-height em pixel (24px) enquanto o tipo está em rem. A letra cresce, a entrelinha não.

Classes de tamanho, com parcimônia

Às vezes o h2 visual não pode ser um h2 de verdade, porque a ordem dos títulos na página já está certa. Aí uma classe de escala ajuda.

.titulo-pagina {
  font-size: 2rem;
  line-height: 1.2;
}

.titulo-secao {
  font-size: 1.4rem;
  line-height: 1.3;
}

.olho {
  font-size: 1.15rem;
}

Use pouco. Se tudo for classe de tamanho, você volta a pintar o HTML com aparência. Prefira estilizar h1, h2, h3 e reserve a classe para o caso raro.

Não crie .texto-14 e .texto-18. Isso é pixel disfarçado. O nome deve dizer o papel (olho, titulo-pagina), não o número do dia.

No HTML da home:

<main id="conteudo" class="wrap">
  <section class="hero">
    <h1>Oficina Costeira</h1>
    <p class="olho">Coletivo fictício de design gráfico em João Pessoa.</p>
  </section>
</main>

Mude só o parágrafo: tire .olho. Preveja o texto no tamanho do corpo. Recarregue. Confira. A informação continua. Só o destaque some.

Erro comum: pular de h1 para h3 porque o h3 “já está no tamanho certo”. Ajuste o CSS. Mantenha a ordem das tags.

A escala também responde à tela

Título de 2rem na janela larga pode ser grande demais no telefone, ou pequeno demais. Ajuste o degrau, não a família da fonte.

h1 {
  font-size: 1.75rem;
}

@media (min-width: 40rem) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 64rem) {
  h1 {
    font-size: 2.25rem;
  }
}

Comece pequeno. Suba. O mesmo fator pode valer dentro de cada faixa, mas você não é obrigado a recalcular tudo. Dois ou três tamanhos de h1 bastam.

Dê zoom até 200% depois de salvar. O texto não pode cobrir o menu. O foco visível de 3 px permanece.

Mude só o h1 da faixa larga para 3.5rem. Preveja um cartaz. Recarregue em janela larga e depois estreita. Confira. Se quebrar o cabeçalho, reduza.

Erro comum: font-size: 12px na media query estreita “para caber o menu”. Encolhe a leitura de quem já está no telefone.

Ferramenta de escala é extra

Existem sites e geradores que cospem uma lista de rem a partir de um fator. Um deles se chama Typografier. Você não precisa instalar nem colar o pacote para terminar este volume.

O caminho do volume: html { font-size: 100%; }, corpo em 1rem, títulos em degraus, max-width no texto, media query só no que cresce demais.

Se um dia você usar um gerador, copie os números para main.css e apague o que não usar. Não ligue um CSS de terceiros que você não lê. Não edite framework: personalize no arquivo da Oficina Costeira.

Abra o exemplo. Mude um h2 de projetos para 1.1rem, quase o corpo. Preveja hierarquia fraca. Recarregue. Confira. Devolva 1.4rem.

Servidor só aqui:

python -m http.server 8769 --bind 127.0.0.1 --directory curso

Não publique. Não use dado real nos textos de exemplo.

Atividades

1. O que acontece com 1rem se a pessoa aumenta a fonte do navegador e a raiz está em 100%?
2. Por que line-height: 1.5 sem unidade é mais seguro do que line-height: 24px?
3. Cite um motivo para limitar o parágrafo com max-width: 65ch.
4. Typografier é obrigatório neste volume? O que você usa no lugar?
5. Um h3 visual pode substituir um h2 que faltava na ordem da página? O que fazer?

Respostas comentadas

1. 1rem cresce junto, porque acompanha a raiz. A página inteira escala.
2. O número sem unidade é um múltiplo do tamanho atual. O pixel fica parado enquanto a letra muda.
3. Linha longa demais cansa. Cerca de 65 caracteres cabe numa leitura confortável.
4. Não. Você escreve a escala em main.css com rem. Gerador é extra opcional.
5. Não. Corrija a ordem das tags ou o CSS do h2. Não pule nível só por causa do tamanho.

Referências

• font-size
• line-height
• Unidades CSS
• Tipografia na Web

O arquivo completo

Referência do exemplo 42-escala-tipografica, 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.";});}