Estilo de texto

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

O texto da Biblioteca da Ribeira precisa ser lido: hora do conto, ficha de Maré Alta, carta de Lina Bezerra. Este capítulo trata fonte, entrelinha, links e listas. Web font é opcional e, se existir, fica em arquivo local — não depende de conta paga.

O exemplo deste capítulo é 10-estilo-de-texto, no pacote que acompanha o volume. Em estilos.css, mude uma coisa (line-height ou a família do body), preveja, recarregue e confira em zoom 200% também.

O CSS no disco descreve o tipo. A página no navegador aplica. 127.0.0.1 carrega a folha por HTTP local. Publicar uma página que aponta para uma fonte na sua pasta C:\ quebra no computador de outra pessoa.

O que você vai aprender

• Escolher font-family com reserva do sistema.
• Controlar line-height, peso e tamanho.
• Estilizar links e o estado de foco.
• Ajustar listas sem destruir o marcador útil.
• Entender web font local, sem obrigar download externo.

Família e reserva

O navegador usa a primeira fonte da lista que existir na máquina. "Segoe UI", Arial, sans-serif é um conjunto seguro neste volume.

Títulos podem ser sem serifa; o corpo, com serifa, se você quiser cara de livro. O exemplo da pasta faz isso.

body {
  font-family: Georgia, serif;
  line-height: 1.5;
}
h1, h2, .brand {
  font-family: "Segoe UI", Arial, sans-serif;
}
a {
  text-decoration-thickness: 2px;
}

Mude só line-height de 1.5 para 1.8. O espaço entre linhas do parágrafo deve crescer. Os títulos, se tiverem regra própria, podem não mudar.

Tamanho e entrelinha

font-size no html ou no body ancora o restante. rem acompanha essa âncora. Entrelinha 1.5 a 1.6 lê melhor em parágrafos longos do acervo.

Não use texto cinza claro no papel bege sem conferir contraste. A tinta --ink da pasta é quase preta de propósito.

font-weight: 700 no .brand destaca o nome da biblioteca sem gritar no parágrafo. Não deixe o corpo em negrito o tempo todo: a carta de Lina Bezerra precisa de hierarquia.

Links e listas

Link precisa parecer link: sublinhado ou outro sinal claro, não só cor. :hover e :focus-visible são estados diferentes. O foco de ~3 px continua obrigatório para teclado.

Listas: list-style pode mudar o marcador. Não remova o marcador do menu se você não recolocou outro sinal de lista. O menu da Ribeira usa list-style: none e Flexbox com espaçamento — o HTML segue sendo ul.

Web font, se quiser

@font-face aponta para um arquivo na pasta do exemplo. O navegador baixa a fonte daquele endereço. Em 127.0.0.1 o arquivo local funciona. Num site publicado, a fonte precisa ir junto.

Você não precisa de web font para terminar este capítulo. Arial, Georgia e Segoe UI bastam.

Se um dia você copiar um arquivo .woff2 para a pasta do exemplo, a regra local parece isto:

@font-face {
  font-family: "RibeiraTexto";
  src: url("ribeira-texto.woff2") format("woff2");
  font-display: swap;
}
body {
  font-family: "RibeiraTexto", Georgia, serif;
}

Sem o arquivo ribeira-texto.woff2 na pasta, o navegador cai na Georgia. Isso é o esperado.

Não cole um link de serviço externo como único caminho. Sem rede, a página ainda deve ler.

Erro comum: fonte que só existe no seu disco

Erro comum: font-family: "MinhaFonteLinda" sem reserva e sem @font-face. No seu editor parece certo. No navegador de outra pessoa, cai na fonte padrão sem você perceber.

Outro erro: font-size: 10px em bloco longo. Zoom ajuda, mas o ponto de partida já nasce pequeno.

Disco, HTTP local e publicação

Abrir file:// aplica a fonte do sistema. http://127.0.0.1:8765/exemplos/10-estilo-de-texto/ também, e ainda treina o pedido do CSS. Publicar com @font-face para file:///C:/... falha. Caminho relativo à pasta do site é o que vale.

Atividades

1. Por que a lista Georgia, serif precisa da palavra serif no fim?
2. Qual a diferença prática entre :hover e :focus-visible no menu?
3. Uma web font só na sua pasta Downloads funciona para quem abrir o site publicado?

Respostas comentadas

1. É a reserva genérica. Se Georgia não existir, o navegador escolhe qualquer serifada em vez de uma sem serifa aleatória.
2. :hover reage ao ponteiro. :focus-visible reage ao teclado (e a outros focos explícitos). Quem não usa rato depende do segundo.
3. Não. Publicação não leva a pasta Downloads da sua máquina. A fonte precisa estar nos arquivos do site, com caminho relativo, ou você usa fonte do sistema.