Peso, altura de linha e hierarquia
Um texto todo do mesmo peso e tamanho é cansativo de escanear. Hierarquia tipográfica é o que guia o olho do leitor pela página.
Estudar esta lição interativa →No curso de HTML você aprendeu a diferença entre h1, h2 e p do ponto de vista de estrutura (o que é título, o que é texto corrido). Agora entra a parte visual: é o CSS que decide o quanto essa hierarquia aparece na tela, através de font-size (tamanho), font-weight (peso, o quão "grosso" o traço da letra é) e line-height (altura de linha, o espaço vertical entre uma linha e a próxima).
Pense num anúncio de jornal: o título vem grande e em negrito, gritando "olhe aqui primeiro"; o texto corrido vem menor, mais fino, com espaço confortável entre as linhas, "agora leia com calma". É exatamente essa combinação de tamanho, peso e espaçamento vertical que faz o olho saber, sem esforço, o que ler primeiro.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. h1 grande e pesado, h2 médio, p menor e leve, com line-height confortável para leitura.
Um exemplo de produto real: praticamente todo artigo de blog bem produzido usa line-height entre 1.5 e 1.7 para o texto corrido, sensivelmente mais espaçado do que o padrão apertado do navegador (perto de 1.2). Esse espaço extra reduz o cansaço visual em blocos longos de leitura, uma das poucas mudanças de CSS com efeito comprovado em conforto de leitura.
Usar font-weight: bold (ou um número, como 700) só para simular um título, em vez de usar a tag h1–h6 certa, é o mesmo problema visto no curso de HTML: aparência não substitui estrutura. A tag certa comunica hierarquia para leitores de tela e buscadores; o peso da fonte é só o acabamento visual por cima dela.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Corrija font-weight, font-size e line-height.