Texto em CSS

A maior parte da Web é texto. Antes de grid e animação, a Oficina da Lia precisa de letra legível: família, tamanho, peso, altura de linha e alinhamento.

O que você vai aprender

• Montar uma pilha font-family com fallback.
• Controlar font-size, font-style e font-weight.
• Usar line-height sem unidade.
• Ler o atalho font.
• Aplicar text-align, text-decoration e text-transform com parcimônia.

Família tipográfica

O navegador só desenha fontes instaladas (ou baixadas por você). Sempre termine a pilha com uma família genérica: serif, sans-serif ou monospace.

body {
  font-family: Georgia, "Times New Roman", serif;
}

.menu {
  font-family: "Segoe UI", Tahoma, sans-serif;
}

Nome com espaço vai entre aspas. Se Georgia faltar, o navegador tenta Times; se faltar, usa qualquer serifada.

Pare e experimente. Copie a regra font-family do exemplo. Mude somente Georgia para Arial. Preveja as formas das letras, recarregue e confira. Restaure a pilha.

Tamanho, estilo e peso

font-size: 1.125rem cresce a partir da fonte do html. font-style: italic inclina. font-weight: 700 engrossa; 400 é o normal. Nem toda família tem todos os pesos: se 300 não existir, o navegador inventa e o resultado fica feio.

Título grande demais no celular cansa. Comece pelo corpo (1rem) e escale o h1 com rem ou em.

Pare e experimente. Copie h1 { font-size: 2rem; } no fim da folha. Mude só 2rem para 1.5rem, preveja o título, recarregue e confira em tela estreita. Retire o teste.

Altura de linha

line-height: 1.5 é um fator: 1,5 vezes o tamanho da fonte. Sem unidade, o valor herda melhor. line-height: 24px fixa a distância em pixels CSS: ela aumenta com o zoom, mas não acompanha automaticamente uma mudança de font-size.

Parágrafo longo pede mais folga do que um botão.

Pare e experimente. Copie a regra line-height do exemplo. Mude só 1.5 para 1.1, preveja o espaço entre linhas, recarregue e confira. Restaure antes de continuar.

Atalho font

A propriedade font junta estilo, peso, tamanho, altura de linha e família. Tamanho e família são obrigatórios no atalho.

h1 {
  font: 700 2rem/1.2 Georgia, serif;
}

Se você omitir a família, a regra inteira cai. Quando estiver em dúvida, declare as propriedades soltas.

Pare e experimente. Copie o atalho completo mostrado. Mude somente 2rem para 1.5rem, preveja o tamanho, recarregue e confira. Mantenha a família; uma declaração incompleta seria ignorada.

Outras propriedades de texto

h1 {
  text-align: left;
  text-transform: none;
  letter-spacing: 0.01em;
}

a {
  text-decoration: underline;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 3px;
}

text-align: justify no corpo longo abre buracos feios na Web. text-transform: uppercase em parágrafos longos dificulta a leitura visual: se a palavra precisa ser maiúscula, escreva maiúscula no conteúdo ou use com cuidado só em rótulos curtos.

Sublinhado no link ajuda quem não distingue só por cor. Não tire o sublinhado sem outro sinal claro (peso, ícone, borda).

O exemplo 08-css-texto aplica essas regras na Oficina da Lia. Mude line-height do body de 1.5 para 1.1, recarregue e veja o texto grudar.

Pare e experimente. Copie h1 { text-align: left; } no fim da folha. Mude só left para center. Preveja o alinhamento, recarregue e confira. Restaure left.

Atividades

1. Complete a pilha: font-family: Georgia, ?;
2. Por que line-height: 1.5 costuma ser melhor que line-height: 24px?
3. O atalho font: 2rem/1.2; é válido? Por quê?
4. Cite um risco de text-transform: uppercase em parágrafos.

Respostas comentadas

1. Uma genérica, por exemplo serif.
2. O fator acompanha mudanças de font-size. Ambos aumentam com o zoom; a altura em pixels pode ficar pequena se só a fonte mudar.
3. Não: falta a família. O atalho exige tamanho e família.
4. O texto perde ritmo e a leitura de parágrafos longos fica mais difícil. O anúncio por tecnologia assistiva varia; não conte com uma pronúncia específica. Reserve o efeito a rótulos curtos.

O arquivo completo

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

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}