Texto confortável de ler

Neste capítulo você vai ajustar tamanho, fonte e espaço entre linhas preservando a hierarquia.

Seu ponto de partida

Estude depois do capítulo 05. O exemplo deste capítulo é 06-tipografia, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Escolha uma fonte com reserva

Font-family apresenta uma fila de fontes. Se a primeira não existir, o navegador tenta a próxima. A família genérica sans-serif oferece uma reserva. O volume funciona sem baixar fontes de terceiros.

A aparência pode variar um pouco entre sistemas. Isso não indica falha. Consistência de hierarquia, espaço e legibilidade importa mais que reproduzir cada pixel.

Faça no seu exemplo

Confira a fonte em main.css.

body { font-family: Arial, sans-serif; }

Mude uma coisa e preveja

Troque somente Arial por Georgia e sans-serif por serif nesta declaração.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O texto passa a uma família com serifas se disponível. Restaure a referência.

Se não acontecer

Não retire toda a fila de reserva nem acrescente uma conta externa para a experiência funcionar.

Tamanho e altura de linha trabalham juntos

Font-size controla tamanho. Line-height controla altura das linhas. Um número sem unidade, como 1.6, acompanha o tamanho da fonte. Evite alturas fixas que cortam o texto quando o usuário amplia a página.

Rem respeita a referência da fonte raiz. Não use uma letra minúscula para caber mais conteúdo: divida o assunto e dê espaço à leitura.

Faça no seu exemplo

Confira o texto geral.

body { font-size: 1.05rem; line-height: 1.6; }

Mude uma coisa e preveja

Troque somente line-height de 1.6 para 1.9.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Os parágrafos ganham mais espaço vertical sem trocar o tamanho das letras.

Se não acontecer

Se o tamanho mudar, confira se editou font-size. São propriedades distintas.

Aparência reforça o significado

Font-weight ajusta peso. Text-align ajusta alinhamento. A hierarquia h1, h2, h3 permanece no HTML mesmo quando o tamanho muda. Links continuam sublinhados para serem reconhecíveis sem depender só de cor.

Não transforme todos os textos em maiúsculas ou centralize parágrafos longos. O projeto usa alinhamento à esquerda para facilitar a continuidade das linhas.

Faça no seu exemplo

Confira h1 e o aviso.

h1 { font-size: 2.2rem; line-height: 1.2; }
.aviso { font-weight: 700; }

Mude uma coisa e preveja

Troque somente font-weight do aviso para 400.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O aviso perde o peso forte; o h1 permanece igual.

Se não acontecer

Se mudar o título, confira o seletor. Aparência diferente não exige trocar o papel semântico.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Teste line-height 1.8.

2. Explique a fonte de reserva.

3. Compare título e parágrafo sem CSS.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. A altura acompanha o tamanho e abre espaço entre linhas.

2. Sans-serif permite uma escolha disponível no sistema.

3. As tags mantêm o papel e a hierarquia mesmo sem o estilo.

Quando seguir

Você ajusta o texto e mantém links e títulos reconhecíveis. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

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

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
body { background: #eef4f7; color: #203246; }
h1 { color: #174d69; }
a { color: #174d69; text-underline-offset: .2em; }
.aviso { color: #703c16; font-weight: 700; }
body { font-family: Arial, sans-serif; font-size: 1.05rem; line-height: 1.6; }
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { line-height: 1.3; }