Pular para o conteúdo
murad.guide

A Web Aberta

Capítulo 22

Página só com tipo

6 min de leitura 1.042 palavras 2 gravuras

Este capítulo fecha a série de tipografia: uma página da Oficina Costeira que se aguenta sem foto de layout. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Letras, espaço e hierarquia fazem o trabalho.

O exemplo está em exemplos/22-pagina-so-com-tipo/. Este volume tem 52 capítulos.

Você também abre as ferramentas do navegador e os validadores. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

Layout que nasce da leitura

Uma página só com tipo não é página vazia. É página em que o ritmo tipográfico substitui a grade de imagens.

Na Oficina Costeira, pense num recorte de projeto: título, chapéu, parágrafos, uma lista, um fechamento. Sem hero fotográfico. Sem cartões com thumb.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Caderno da orla · Oficina Costeira</title>
    <meta name="description" content="Texto fictício de um caderno de bordo em João Pessoa.">
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <header class="site-header">
      <p class="brand"><a href="index.html">Oficina Costeira</a></p>
      <p class="chapéu">João Pessoa · conteúdo fictício</p>
    </header>
    <main id="conteudo">
      <h1>Caderno da orla</h1>
      <p>A tinta seca mais devagar quando o vento vem do mar. Este caderno registra um cartaz que não existiu fora do exercício.</p>
      <h2>O que o cartaz precisava dizer</h2>
      <ul>
        <li>Hora da oficina fictícia</li>
        <li>Ponto de encontro na areia</li>
        <li>Que não há inscrição real</li>
      </ul>
    </main>
    <footer class="site-footer">
      <p>Oficina Costeira — João Pessoa. Nada é enviado a um servidor.</p>
    </footer>
  </body>
</html>

O HTML já tem hierarquia. O CSS só revela.

Ritmo: espaço entre blocos

Depois da família, do rem e da medida, o que resta é o ar.

.chapéu {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
}
p + p {
  margin-top: 0.75rem;
}
main {
  max-width: 38rem;
  margin-inline: auto;
  padding: 2rem 1rem 4rem;
}

p + p espaça parágrafos vizinhos sem empurrar o primeiro para longe do h1. O h2 ganha margem de cima maior: é um novo bloco de pensamento.

Alinhamento à esquerda. Sem justificativa. Corpo em 1rem/1.5. Marca em peso 700.

Isso já é layout. O capítulo 23 vai mostrar que cada um desses blocos é uma caixa. Agora, olhe o resultado como texto impresso na tela.

Resumo dos conceitos: só tipo, DevTools, validador

DevTools o tempo todo

As ferramentas do desenvolvedor vêm no navegador. No Windows, F12 ou Ctrl+Shift+I. Ou clique com o botão direito no título e escolha Inspecionar.

A aba Elementos (ou Inspetor) mostra a árvore que o navegador entendeu. Se o seu HTML tem erro, a árvore pode não bater com o arquivo. Confie no arquivo. Use a árvore para achar o nó.

Clique duas vezes num atributo para editar. Tire a classe brand e veja a marca perder o peso. Recarregue: a edição do painel some. O disco é a fonte da verdade.

No painel de estilos:

Aba Rede: recarregue com o painel aberto. main.css em vermelho é caminho errado. Fonte woff2 em vermelho é @font-face quebrado.

Encaixe o painel à direita e arraste a largura. Você simula uma tela estreita sem mudar o arquivo.

Safari esconde o menu Desenvolver até você ligar nas preferências. No Windows, Edge e Firefox já trazem as ferramentas.

Validar HTML

Validador não mede se o h1 é o melhor título. Mede se o código está bem formado.

Abra o validador do W3C, escolha entrada direta, cole o HTML. Leia o primeiro erro. Erro de tag aberta derruba o resto. Corrija, cole de novo, só então olhe o segundo.

Avisos de “outline” e de charset às vezes aparecem. Trate erro real primeiro: alt faltando, lang ausente, elemento no lugar errado.

Google Fonts no head pode gerar aviso. Se você não usou o link externo, esse aviso nem surge.

<!-- Erro: h2 dentro de p, o navegador fecha o p sozinho -->
<p>O cartaz pedia
  <h2>hora e lugar</h2>
</p>

O validador aponta. O DevTools mostra um p vazio e um h2 irmão. A intenção era ênfase, não título. Use strong ou reescreva a frase.

Validar CSS

O validador de CSS também tem entrada direta. Cole o main.css. Primeiro erro primeiro.

Ignore, neste volume, choramingos de prefixo antigo (-webkit-) se você não os escreveu. Ignore text-rendering se não estiver no arquivo. Não ignore propriedade misspelled: font-weigth não é font-weight.

/* Inválido: quebra a declaração */
h1 {
  font-weigth: 700;
  color: #0b4f6c;
}

O peso não aplica. A cor pode aplicar. O validador e o risco no DevTools contam a mesma história.

Ferramentas de estatística de CSS (quantas cores, quantos tamanhos) ajudam a enxugar. Não são obrigatórias. Se você tem sete font-size no corpo, volte à escala do capítulo 20.

JavaScript lint fica para a série 12. Esta página não precisa de script.

Conferir a página estreita e a página nua

Desligue o CSS no Web Developer ou comente o link. A ordem deve continuar: skip, marca, chapéu, h1, parágrafos, lista, rodapé. Se o rodapé pular para o topo no arquivo, a página nua mente.

Ligue o CSS. Encolha a janela. A medida max-width: 38rem encolhe com a tela. O padding lateral de 1rem impede o texto de colar na borda.

Pare e experimente. No h1, mude só margin de 0 0 1rem para 0. Preveja: o título cola no primeiro parágrafo. Recarregue e confira. Devolva o 1rem.

Erro comum: validar a página inteira depois de dez mudanças. O relatório explode. Valide depois de cada bloco: cabeçalho, depois main, depois CSS da medida.

Resumo dos conceitos: validador, DevTools, só tipo

Você agora liga CSS, escolhe tipo e confere. A série seguinte abre a caixa: margem, padding, borda e box-sizing.

Atividades

  1. O que p + p faz que p { margin-top: 0.75rem } também faria no primeiro parágrafo depois do h1?
  2. Por que a edição de CSS no DevTools some ao recarregar?
  3. Por que corrigir o primeiro erro do validador HTML antes dos outros?
  4. Cite um aviso de CSS que este volume manda ignorar e um que manda corrigir.
  5. O que a página nua (sem CSS) precisa ainda comunicar neste exercício?

Respostas comentadas

  1. p + p só espaça parágrafo que segue parágrafo. O primeiro depois do h1 não ganha margem extra. A regra em todos os p empurraria o título para longe.
  2. O painel mexe na cópia em memória. O arquivo no disco só muda se você salvar no editor.
  3. Um erro cedo (tag mal fechada) gera uma cadeia. Os erros seguintes podem ser fantasma.
  4. Ignorar prefixo de fabricante que você não escreveu. Corrigir font-weigth misspelled.
  5. Idioma, skip-link, marca, título, texto e lista na ordem de leitura. Sem foto, a hierarquia ainda existe.

Referências

O arquivo completo

Referência do exemplo 22-pagina-so-com-tipo, 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.";});}