Docs executáveis de CSS: Line-height CSS

Q: O line-height deve ter unidade?

Normalmente não. Um valor sem unidade como 1.5 é multiplicado pelo tamanho de fonte de cada elemento, então continua proporcional em filhos com outro tamanho. Um valor com unidade é calculado uma vez e herdado como um comprimento fixo.

O que o line-height faz

line-height define a altura de cada linha de texto. A diferença entre essa altura e a altura de que a fonte precisa é dividida ao meio e somada acima e abaixo das letras, então é com ele que você controla o espaço entre as linhas.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

Os três parágrafos usam fonte de 16px. As linhas têm 16px, 24px e 32px de altura.

Valores: sem unidade, comprimento, porcentagem, normal

Valor	Exemplo	Altura da linha para texto de 16px	Herdado pelos filhos como
Número	`1.5`	24px	O número (1.5), recalculado em cada elemento
Comprimento	`24px`, `1.5em`, `1.5rem`	24px	O comprimento calculado (24px)
Porcentagem	`150%`	24px	O comprimento calculado (24px)
`normal`	`normal`	Vem da fonte, muitas vezes perto de 1.2	`normal`

A primeira e a segunda linhas parecem iguais em um elemento só. A diferença só aparece quando um filho tem outro tamanho de fonte, que é o assunto da próxima seção.

Por que sem unidade é o padrão certo

Um line-height 1.5em ou 150% é convertido em pixels no pai, e os filhos herdam esses pixels. Um filho com fonte maior recebe então linhas mais baixas que as próprias letras. Um 1.5 sem unidade é herdado como o próprio número e multiplicado pelo tamanho de fonte de cada filho.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

Os dois títulos quebram em duas linhas. O primeiro herda linhas de 21px para letras de 32px, então as linhas se sobrepõem. O segundo recebe linhas de 32 × 1.5 = 48px. Defina line-height uma vez no body como número e a maioria das páginas nunca mais vai precisar mexer nisso.

Teste valores você mesmo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Experimente 1, 2, 30px, 200% e normal. O Chrome informa normal como a própria palavra, e não como um valor em pixels, porque o tamanho vem da fonte.

Bons valores para um texto legível

Texto do corpo: de 1.4 a 1.6. Linhas mais longas precisam de mais altura para o olho achar o começo da linha seguinte.
Títulos: de 1.1 a 1.3. Texto grande com espaçamento 1.5 parece um monte de linhas separadas, e não um título só.
Botões e rótulos de uma linha: de 1 a 1.25, com padding para a altura.

Em acessibilidade, o critério de sucesso 1.4.12 da WCAG exige que a página continue funcionando quando o leitor define a altura da linha em 1.5 vez o tamanho da fonte, então evite alturas fixas em caixas de texto que cortariam o conteúdo.

Centralizar uma linha de texto na vertical

Quando uma caixa tem exatamente uma linha, um line-height igual à altura da caixa coloca o texto no meio vertical, porque o espaço extra é dividido igualmente acima e abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

Isso quebra assim que o texto passa para duas linhas, porque cada linha fica com 40px de altura. Para qualquer coisa que possa quebrar linha, centralize com flexbox, como mostra a página de como centralizar uma div.

O shorthand font

O shorthand font define o tamanho e a altura da linha juntos, com uma barra:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

O shorthand redefine toda propriedade de fonte que ele não menciona (incluindo line-height para normal quando você deixa de fora a parte da barra), então escreva-o antes de qualquer regra font-* individual.

Erros comuns

Usar em ou % em um contêiner. Os filhos herdam um comprimento fixo. Use um número sem unidade.
height fixo em uma caixa de texto. Quando o texto quebra ou o leitor aumenta o espaçamento, ele transborda. Deixe o conteúdo definir a altura.
Texto do corpo apertado demais. line-height: 1 torna os parágrafos difíceis de ler. Comece em 1.5.
Esperar que o line-height crie espaço entre parágrafos. Isso é margin nos parágrafos.
Depender de normal. Ele muda de fonte para fonte, então o layout se mexe quando a fonte muda.

Perguntas frequentes

O que o line-height faz no CSS?

Ele define a altura de cada caixa de linha do texto. O espaço extra além da altura da própria fonte é dividido igualmente acima e abaixo das letras, então um line-height maior significa mais espaço entre as linhas.

O line-height deve ter unidade?

Normalmente não. Um valor sem unidade como 1.5 é multiplicado pelo tamanho de fonte de cada elemento, então continua proporcional em filhos com outro tamanho. Um valor com unidade é calculado uma vez e herdado como um comprimento fixo.

Qual é um bom line-height para o texto do corpo?

Entre 1.4 e 1.6 para parágrafos, e algo entre 1.1 e 1.3 para títulos grandes. A orientação AAA da WCAG pede pelo menos 1.5 em parágrafos.

O que é line-height: normal?

É o padrão. O navegador usa um valor das métricas da própria fonte, normalmente perto de 1.2, mas diferente para cada fonte, então não é previsível entre fontes.

Como mudar o espaçamento entre linhas no HTML?

O HTML não tem atributo de espaçamento entre linhas. Use a propriedade CSS, por exemplo <p style="line-height: 2;"> para espaçamento duplo.

Conceitos relacionados