Guida CSS interattiva: Line Height

Q: line-height deve avere un'unità?

Di solito no. Un valore senza unità come 1.5 viene moltiplicato per la dimensione del font di ciascun elemento, quindi resta proporzionale nei figli con una dimensione diversa. Un valore con unità viene calcolato una volta sola ed ereditato come lunghezza fissa.

Cosa fa line-height

line-height imposta l'altezza di ogni riga di testo. La differenza tra quell'altezza e quella che serve al font viene divisa a metà e aggiunta sopra e sotto le lettere, quindi è così che controlli lo spazio tra le righe.

<!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>

Tutti e tre i paragrafi usano un font da 16px. Le righe sono alte 16px, 24px e 32px.

Valori: senza unità, lunghezza, percentuale, normal

Valore	Esempio	Altezza di riga per testo da 16px	Ereditato dai figli come
Numero	`1.5`	24px	Il numero (1.5), ricalcolato per ogni elemento
Lunghezza	`24px`, `1.5em`, `1.5rem`	24px	La lunghezza calcolata (24px)
Percentuale	`150%`	24px	La lunghezza calcolata (24px)
`normal`	`normal`	Dal font, spesso circa 1.2	`normal`

La prima e la seconda riga danno lo stesso risultato su un solo elemento. La differenza si vede solo quando un figlio ha una dimensione del font diversa, ed è l'argomento della prossima sezione.

Perché senza unità è la scelta giusta

Un line-height di 1.5em o 150% viene convertito in pixel sul genitore, e i figli ereditano quei pixel. Un figlio con un font più grande riceve così righe più basse delle sue lettere. Un 1.5 senza unità viene ereditato come numero e moltiplicato per la dimensione del font di ogni figlio.

<!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>

Entrambi i titoli vanno a capo su due righe. Il primo eredita righe da 21px per lettere da 32px, quindi le righe si sovrappongono. Il secondo riceve righe da 32 × 1.5 = 48px. Imposta line-height una volta sola su body come numero e nella maggior parte delle pagine non ti servirà più.

Prova i valori

<!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>

Prova 1, 2, 30px, 200% e normal. Chrome riporta normal come parola e non come valore in pixel, perché la sua dimensione viene dal font.

Valori adatti per un testo leggibile

Testo dei paragrafi: da 1.4 a 1.6. Le righe più lunghe hanno bisogno di più interlinea, così l'occhio trova l'inizio della riga successiva.
Titoli: da 1.1 a 1.3. Un testo grande con interlinea 1.5 sembra fatto di righe separate invece che di un solo titolo.
Pulsanti ed etichette su una riga: da 1 a 1.25, con il padding per l'altezza.

Per l'accessibilità, il criterio di successo WCAG 1.4.12 richiede che una pagina funzioni ancora quando chi legge imposta l'interlinea a 1.5 volte la dimensione del font, quindi evita altezze fisse sui riquadri di testo che lo taglierebbero.

Centrare verticalmente una riga di testo

Quando un riquadro contiene esattamente una riga, un line-height uguale all'altezza del riquadro mette il testo al centro in verticale, perché lo spazio in più viene diviso in parti uguali sopra e sotto:

<!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>

Smette di funzionare appena il testo va a capo su due righe, perché ogni riga diventa alta 40px. Per tutto ciò che può andare a capo, centra con flexbox, come mostrato nella pagina su come centrare un div.

La proprietà abbreviata font

La proprietà abbreviata font imposta insieme dimensione e interlinea con una barra:

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

La proprietà abbreviata reimposta ogni proprietà del font che non nomina (compreso line-height, che torna a normal se ometti la parte dopo la barra), quindi scrivila prima delle singole regole font-*.

Errori comuni

Usare em o % su un contenitore. I figli ereditano una lunghezza fissa. Usa un numero senza unità.
height fisso su un riquadro di testo. Quando il testo va a capo o chi legge aumenta la spaziatura, trabocca. Lascia che sia il contenuto a determinare l'altezza.
Testo troppo compatto. line-height: 1 rende i paragrafi difficili da leggere. Parti da 1.5.
Aspettarsi che line-height aggiunga spazio tra i paragrafi. Per quello serve il margin sui paragrafi.
Affidarsi a normal. Cambia da un font all'altro, quindi il layout si sposta quando cambi font.

Domande frequenti

Cosa fa line-height in CSS?

Imposta l'altezza di ogni riga di testo. Lo spazio in più rispetto all'altezza del font viene diviso in parti uguali sopra e sotto le lettere, quindi un line-height più grande significa più spazio tra le righe.

line-height deve avere un'unità?

Di solito no. Un valore senza unità come 1.5 viene moltiplicato per la dimensione del font di ciascun elemento, quindi resta proporzionale nei figli con una dimensione diversa. Un valore con unità viene calcolato una volta sola ed ereditato come lunghezza fissa.

Qual è un buon line-height per il testo?

Tra 1.4 e 1.6 per i paragrafi, e tra circa 1.1 e 1.3 per i titoli grandi. Le linee guida WCAG di livello AAA chiedono almeno 1.5 nei paragrafi.

Cos'è line-height: normal?

Il valore predefinito. Il browser usa un valore preso dalle metriche del font, di solito intorno a 1.2 ma diverso per ogni font, quindi non è prevedibile da un font all'altro.

Come si cambia l'interlinea in HTML?

HTML non ha un attributo per l'interlinea. Usa la proprietà CSS, per esempio <p style="line-height: 2;"> per l'interlinea doppia.

Concetti correlati