Propriedade line-height: Espaçamento entre linhas

Controle o espaçamento vertical entre as linhas de texto para melhorar a legibilidade.

Depois de definir a fonte, o tamanho e o estilo do seu texto, um aspecto crucial para a legibilidade e a estética é o espaçamento vertical entre as linhas. A propriedade line-height é responsável por controlar a altura de cada linha de texto, ou seja, o espaço entre a linha de base de uma linha de texto e a linha de base da próxima.

Um line-height bem ajustado melhora significativamente a legibilidade do seu conteúdo, tornando-o mais agradável de ler e menos cansativo para os olhos.

Pense na line-height como o espaçamento entre as linhas de um caderno pautado. Se as linhas são muito próximas, fica difícil ler. Se são muito distantes, o texto parece desconectado.

Como usar a propriedade line-height

A sintaxe é simples: você seleciona o elemento e atribui um valor à propriedade line-height.

Sintaxe:

seletor {
  line-height: valor;
}

Valores possíveis:

  1. normal (padrão): O navegador define um espaçamento de linha padrão, que geralmente varia entre 1.0 e 1.2 vezes o font-size do elemento, dependendo do navegador e da fonte.

    • Uso: Quando você quer que o navegador gerencie o espaçamento padrão.

  2. Número (sem unidade): Este é o valor mais recomendado e flexível. O line-height é calculado multiplicando este número pelo font-size do próprio elemento.

    • Exemplo: line-height: 1.5; significa que a altura da linha será 1.5 vezes o font-size do elemento. Se o font-size for 16px, o line-height será 24px.
    • Vantagens: É herdado pelos elementos filhos como um fator multiplicador, o que significa que se o font-size de um filho mudar, o line-height também escalará proporcionalmente, mantendo a proporção de espaçamento.
    • Uso: Ideal para a maioria dos textos, pois garante que o espaçamento se adapte automaticamente ao tamanho da fonte.

  3. Comprimento (px, em, rem, etc.): Define um valor fixo para a altura da linha.

    • Exemplo: line-height: 24px; ou line-height: 1.5em;
    • Vantagens: Controle preciso.
    • Desvantagens: Se o font-size do elemento mudar, o line-height fixo pode não ser mais adequado, podendo causar sobreposição de texto ou espaçamento excessivo. Se usado com em ou rem, ainda pode ter problemas de herança se o font-size base mudar.
    • Uso: Para elementos específicos onde você precisa de um espaçamento exato e sabe que o font-size não mudará drasticamente.

  4. Porcentagem (%): Define o line-height como uma porcentagem do font-size do próprio elemento.

    • Exemplo: line-height: 150%; é o mesmo que line-height: 1.5;.
    • Desvantagens: Embora pareça similar ao número sem unidade, a porcentagem é calculada e herdada como um valor absoluto (em pixels) pelo elemento filho, o que pode levar a problemas se o font-size do filho for diferente.
    • Uso: Menos recomendado que o número sem unidade devido ao comportamento de herança.

Exemplo Prático:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Line Height</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      font-size: 16px; /* Definindo um font-size base */
    }

    .box {
      width: 300px;
      border: 1px solid #ccc;
      padding: 15px;
      margin-bottom: 20px;
      background-color: #f9f9f9;
    }

    h2 {
      margin-top: 0;
      margin-bottom: 10px;
    }

    .normal-line-height {
      line-height: normal; /* Padrão do navegador */
    }

    .numeric-line-height {
      line-height: 1.5; /* 1.5 vezes o font-size do elemento */
    }

    .fixed-line-height {
      line-height: 24px; /* Altura fixa em pixels */
    }

    .percentage-line-height {
      line-height: 150%; /* 150% do font-size do elemento */
    }

    /* Exemplo de herança com número vs. comprimento */
    .parent-numeric {
      font-size: 16px;
      line-height: 1.5; /* Herdado como 1.5 */
      border: 1px dashed blue;
      padding: 5px;
      margin-bottom: 10px;
    }
    .parent-numeric span {
      font-size: 24px; /* Font-size maior */
      /* line-height será 1.5 * 24px = 36px */
    }

    .parent-fixed {
      font-size: 16px;
      line-height: 24px; /* Herdado como 24px */
      border: 1px dashed red;
      padding: 5px;
    }
    .parent-fixed span {
      font-size: 24px; /* Font-size maior */
      /* line-height ainda será 24px, o que pode causar sobreposição */
    }
  </style>
</head>
<body>
  <div class="box normal-line-height">
    <h2>Line Height: normal</h2>
    <p>Este parágrafo tem o espaçamento de linha padrão do navegador. A legibilidade pode variar dependendo da fonte e do tamanho.</p>
  </div>

  <div class="box numeric-line-height">
    <h2>Line Height: 1.5 (numérico)</h2>
    <p>Este parágrafo tem um espaçamento de linha de 1.5 vezes o tamanho da fonte. É geralmente o mais recomendado para boa legibilidade.</p>
  </div>

  <div class="box fixed-line-height">
    <h2>Line Height: 24px (fixo)</h2>
    <p>Este parágrafo tem um espaçamento de linha fixo de 24 pixels. Se o tamanho da fonte mudar, o espaçamento pode não ser ideal.</p>
  </div>

  <div class="box percentage-line-height">
    <h2>Line Height: 150% (porcentagem)</h2>
    <p>Este parágrafo tem um espaçamento de linha de 150% do tamanho da fonte. Comportamento de herança pode ser diferente do valor numérico.</p>
  </div>

  <h3>Exemplo de Herança:</h3>
  <div class="parent-numeric">
    <p>Pai com <code>line-height: 1.5;</code>. <span style="background-color: yellow;">Filho com font-size maior.</span> Observe como o espaçamento do filho se ajusta.</p>
  </div>

  <div class="parent-fixed">
    <p>Pai com <code>line-height: 24px;</code>. <span style="background-color: yellow;">Filho com font-size maior.</span> Observe como o espaçamento do filho pode ficar apertado.</p>
  </div>
</body>
</html>

Resultado: Observe as diferenças no espaçamento vertical entre as linhas e, principalmente, como o line-height numérico se adapta melhor à mudança de font-size em elementos filhos.

Boas Práticas:

  • Use valores numéricos (sem unidade): line-height: 1.5; é a forma mais robusta e flexível de definir o espaçamento de linha, pois ele escala proporcionalmente com o font-size do elemento.
  • Legibilidade: Um line-height entre 1.4 e 1.6 (ou 140% a 160%) é geralmente considerado ideal para o corpo do texto na web. Para títulos, pode ser menor.
  • Contraste: Garanta que o espaçamento não seja tão pequeno a ponto de as linhas se tocarem, especialmente em telas menores ou com fontes maiores.
  • Herança: Lembre-se que line-height é uma propriedade herdada. Definir um line-height numérico no body ou html fará com que todos os elementos filhos herdem esse fator multiplicador.

A propriedade line-height é um detalhe que faz uma grande diferença na experiência de leitura do seu site. Ajustá-la corretamente é essencial para um design profissional e acessível.