⚡ Curso de CSS • Web-ZoneWare

Peso, Estilo e Altura de Linha no CSS | Web Academy

Lição 18 de 50

Peso, Estilo e Altura de Linha no CSS | Web Academy

A escolha de uma bela família tipográfica é apenas o primeiro passo no design editorial de interfaces. O conforto visual de leitura, a hierarquia de escaneabilidade e o ritmo da página dependem diretamente da calibração entre três propriedades fundamentais: o peso da haste das letras (font-weight), a ênfase estilística (font-style) e a respiração vertical entre as linhas (line-height). Nesta aula, você dominará a escala numérica de 100 a 900, aprenderá a eliminar as distorções borradas do temido Faux Bold e compreenderá a regra de ouro que separa programadores amadores de engenheiros sêniores: por que a altura de linha deve SEMPRE ser declarada sem unidades.

1. A Escala Numérica do font-weight: De 100 a 900

Embora palavras-chave como normal e bold sejam amplamente usadas, a tipografia digital profissional opera em uma escala numérica de centenas padronizada de 100 a 900:

Valor Numérico Nome Técnico Palavra-Chave Equivalente Uso Recomendado em UI
100 Thin / Hairline — Títulos ultra-leves decorativos em tamanhos gigantes (64px+).
200 Extra Light / Ultra Light — Subtítulos delicados em dark mode.
300 Light — Textos de apoio ou resumos em tipografias serifadas.
400 Regular / Normal normal Padrão absoluto para corpo de texto e parágrafos de leitura.
500 Medium — Rótulos de campos de formulário, botões secundários e menus.
600 Semi Bold / Demi Bold — Títulos de cards, badges e destaque forte sem peso excessivo.
700 Bold bold Títulos principais (H1, H2) e ênfase forte (<strong>).
800 Extra Bold — Banners de alta conversão e números de métricas/dashboard.
900 Black / Heavy — Logotipos tipográficos e cartazes publicitários.

2. O Perigo do “Faux Bold” (Negrito Sintético)

O que acontece se você declarar font-weight: 700; em um texto, mas sua folha de estilos só tiver baixado o arquivo de peso 400 daquela fonte?

O navegador não avisa que a fonte está faltando: ele aciona um algoritmo tosco de síntese artificial (Faux Bold). O motor pega as letras da fonte 400 e simplesmente as “engorda” digitalmente duplicando pixels nas bordas.

⚠️
O Desastre do Negrito Falso: O Faux Bold destrói o desenho da tipografia! As letras ficam borradas nas curvas, o espaçamento entre caracteres (kerning) colapsa e os furos internos de letras como ‘e’, ‘a’ e ‘o’ viram borrões pretos ilegíveis.

Como prevenir: Baixe sempre os arquivos reais de cada peso utilizado no @font-face ou desative a síntese artificial no CSS moderno com a regra:

font-synthesis: none;

3. font-style: Itálico Real vs. Oblíquo Mecânico

A propriedade font-style controla a inclinação e a anatomia dos glifos:

  • font-style: normal;: Os caracteres verticais padrão (romanos).
  • font-style: italic;: Utiliza os glifos cursivos autênticos desenhados à mão pelo tipógrafo. As letras ‘a’, ‘f’ e ‘g’ ganham traços cursivos completamente diferentes da versão normal!
  • font-style: oblique;: Uma inclinação puramente mecânica e geométrica da fonte romana padrão.
CSS
font-style-examples.css
CSS3 11 linhas 
/* Citação editorial com itálico real */
blockquote {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: #cbd5e1;
}
 
/* Protege o site contra itálico artificial deformado pelo navegador */
body {
    font-synthesis: none; /* Impede o navegador de inventar faux bold ou faux italic */
}

4. O Mistério da Entrelinha: Por Que o line-height DEVE Ser Sem Unidades?

A propriedade line-height define a altura de cada linha de texto dentro de um parágrafo.

Existe uma lei absoluta ensinada pelos maiores arquitetos de CSS do mundo: o line-height deve SEMPRE ser declarado como um número puro sem unidades (ex: 1.5 ou 1.6), NUNCA com em, px ou %!

A Demonstração Matemática do Bug das Linhas Atropeladas

Observe o que acontece se você declarar a entrelinha usando unidades em um contêiner pai:

CSS
line-height-bug.css
CSS3 15 linhas 
/* ❌ O ERRO: line-height com unidade relativa (1.5em ou 150%) */
body {
    font-size: 16px;
    line-height: 1.5em; /* O navegador computa: 16px * 1.5 = 24px FIXOS! */
}
 
/* O título herda o estilo: */
h1 {
    font-size: 40px;
    /* O h1 NÃO herda a proporção 1.5! Ele herda o valor computado FIXO de 24px! */
}
 
/* RESULTADO CATASTRÓFICO:
   Um título com letras gigantes de 40px é espremido dentro de linhas de 24px!
   As linhas de texto do título SE ATROPELAM e ficam UMA POR CIMA DA OUTRA! */

A Solução Elegante com Número Sem Unidade

Ao declarar line-height: 1.5; (sem nenhuma unidade), o navegador transmite para todos os elementos filhos o fator multiplicador, e não um valor fixo em pixels:

CSS
line-height-correto.css
CSS3 10 linhas 
/* ✅ O JEITO CORRETO: Número puro sem unidades */
body {
    font-size: 16px;
    line-height: 1.5; /* Fator multiplicador universal */
}
 
h1 {
    font-size: 40px;
    /* O navegador calcula automaticamente: 40px * 1.5 = 60px de entrelinha! Perfeito! */
}

5. Tabela de Alturas de Linha Recomendadas para UI

A entrelinha ideal varia de acordo com o tamanho do texto e sua função na interface:

Elemento line-height Recomendado Por que essa proporção?
Títulos Grandes (H1, H2) 1.1 a 1.25 Fontes grandes precisam de linhas próximas. Entrelinhas abertas em títulos fazem as frases parecerem desconexas.
Subtítulos (H3, H4) 1.3 a 1.4 Equilíbrio entre coesão de bloco e legibilidade.
Texto de Leitura (Parágrafos) 1.5 a 1.7 Exigência de Acessibilidade WCAG 2.1: evita que os olhos do leitor se percam ao saltar para a linha seguinte.
Botões e Badges (Linha única) 1 ou 1.2 Garante que o texto fique perfeitamente centralizado verticalmente pelo padding.

6. O Shorthand Completo da Propriedade font

O CSS permite resumir todas as propriedades de fonte em uma única linha. A sintaxe oficial exige uma ordem estrita e o uso de uma barra (/) para separar o tamanho da fonte da altura de linha:

CSS
font-shorthand.css
CSS3 4 linhas 
/* Ordem: [style] [weight] [size] / [line-height] [family] */
.destaque-editorial {
    font: italic 700 1.25rem / 1.6 'Outfit', sans-serif;
}
📌
Regra Obrigatória do Shorthand: O font-size e o font-family são itens obrigatórios. Se qualquer um dos dois for omitido na declaração resumida font:, o navegador rejeita e descarta a linha inteira.

7. Laboratório Prático: Cadência Tipográfica Editorial com Hierarquia Perfeita

Neste laboratório completo, construiremos um cartão de artigo integrando títulos com pesos calculados, entrelinhas proporcionais sem unidades e proteção contra Faux Bold:

HTML
typography-cadence.html
HTML5 22 linhas 
<article class="card-artigo">
    <span class="categoria-tag">Design Systems</span>
    
    <h1 class="artigo-h1">A Harmonia Oculta do Ritmo Tipográfico na Web Moderna</h1>
    
    <p class="artigo-resumo">
        Por que o line-height sem unidades e o controle milimétrico de pesos de 100 a 900 garantem interfaces limpas e leitura sem fadiga visual.
    </p>
 
    <div class="artigo-corpo">
        <p>
            A legibilidade não é um acidente estético: é uma ciência geométrica. Quando alinhamos o peso semântico das fontes ao espaçamento vertical correto, os olhos do leitor deslizam suavemente sem esforço cognitivo.
        </p>
        <blockquote class="artigo-citacao">
            "Tipografia boa é aquela que transmite a mensagem sem que o leitor perceba o esforço mecânico da leitura."
        </blockquote>
    </div>
 
    <footer class="artigo-rodape">
        <button class="btn-leitura">Continuar Lendo →</button>
    </footer>
</article>
CSS
typography-cadence.css
CSS3 96 linhas 
/* Reset e base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    background-color: #0b0f19;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Proteção global contra distorções sintéticas de negrito/itálico */
    font-synthesis: none;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.5rem;
}
 
.card-artigo {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 640px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}
 
.categoria-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #38bdf8;
    display: inline-block;
    margin-bottom: 0.75rem;
}
 
/* 1. Título H1: Peso 800 e entrelinha coesa de 1.2 */
.artigo-h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;          /* Entrelinha compacta sem unidades! */
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
}
 
/* 2. Resumo: Peso 500 (Medium) e entrelinha 1.45 */
.artigo-resumo {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.45;
    color: #94a3b8;
    margin-bottom: 1.75rem;
}
 
/* 3. Parágrafo corrido: Peso 400 (Regular) e entrelinha WCAG 1.65 */
.artigo-corpo p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;         /* Entrelinha confortável para leitura contínua */
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}
 
/* 4. Citação em Itálico Real */
.artigo-citacao {
    border-left: 3px solid #38bdf8;
    padding-left: 1.25rem;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #f1f5f9;
    margin-bottom: 2rem;
}
 
/* 5. Botão de linha única: line-height 1 para alinhamento geométrico perfeito */
.btn-leitura {
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;            /* O line-height 1 evita vãos fantasmas no botão */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
 
.btn-leitura:hover {
    background-color: #0369a1;
}
⚡ Abrir no Playground IDE →

8. Boas Práticas da Indústria & Erros Comuns

  • ❌ Nunca Declare line-height com Unidades Relativas (em ou %): Isso faz com que títulos filhos herdem o valor computado em pixels do pai, atropelando o texto em títulos de várias linhas. Declare sempre como número puro (ex: line-height: 1.6;).
  • ❌ Não Acomode o Faux Bold: Se o designer planejou textos com peso 700 ou 800, certifique-se de carregar os arquivos .woff2 desses pesos exatos na regra @font-face.
  • ✅ Adote font-synthesis: none; Globalmente: Uma declaração de uma linha no body que blinda seu site contra deformações artificiais do navegador.
  • ✅ Ajuste a Entrelinha Inversamente ao Tamanho da Fonte: Quanto maior a fonte (H1/H2), menor deve ser o line-height (entre 1.1 e 1.25). Quanto menor a fonte de texto corrido, mais generosa deve ser a entrelinha (entre 1.5 e 1.7).

9. Ferramentas Relacionadas & Próximos Passos

Valide e calibre o ritmo tipográfico no ecossistema Web-ZoneWare:

🚀
Próxima Lição: Na Lição 19: Alinhamento & Decoração de Texto no CSS, aprenderemos sobre text-align, o perigo de justificar textos na web, text-decoration moderno com cores e espessuras customizadas e a transformação de maiúsculas e minúsculas com text-transform.

10. Referências Técnicas & Especificações Oficiais

Rolar para cima