Docs ejecutables de CSS: Line-height

Q: ¿line-height debe llevar unidad?

Normalmente no. Un valor sin unidad como 1.5 se multiplica por el tamaño de letra de cada elemento, así que se mantiene proporcional en los hijos que tienen otro tamaño. Un valor con unidad se calcula una vez y se hereda como una longitud fija.

Qué hace line-height

line-height define la altura de cada línea de texto. La diferencia entre esa altura y la que necesita la propia fuente se divide a la mitad y se agrega arriba y abajo de las letras, así que es la forma de controlar el espacio entre líneas.

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

Los tres párrafos usan una fuente de 16px. Las líneas miden 16px, 24px y 32px de alto.

Valores: sin unidad, longitud, porcentaje, normal

Valor	Ejemplo	Interlineado para texto de 16px	Lo heredan los hijos como
Número	`1.5`	24px	El número (1.5), recalculado en cada elemento
Longitud	`24px`, `1.5em`, `1.5rem`	24px	La longitud calculada (24px)
Porcentaje	`150%`	24px	La longitud calculada (24px)
`normal`	`normal`	Según la fuente, a menudo cerca de 1.2	`normal`

La primera y la segunda fila se ven igual en un solo elemento. La diferencia solo aparece cuando un hijo tiene otro tamaño de letra, que es la siguiente sección.

Por qué sin unidad es la opción correcta

Un line-height de 1.5em o 150% se convierte en píxeles en el padre, y los hijos heredan esos píxeles. Un hijo con una fuente más grande recibe entonces líneas más bajas que sus letras. Un 1.5 sin unidad se hereda como el número en sí y se multiplica por el tamaño de letra de cada hijo.

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

Los dos títulos ocupan dos líneas. El primero hereda líneas de 21px para letras de 32px, así que sus líneas se superponen. El segundo recibe líneas de 32 × 1.5 = 48px. Define line-height una vez en body como número y la mayoría de las páginas no lo vuelven a necesitar.

Prueba valores tú mismo

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

Prueba 1, 2, 30px, 200% y normal. Chrome informa normal como la palabra en sí y no como un valor en píxeles, porque su tamaño viene de la fuente.

Buenos valores para un texto legible

Texto del cuerpo: de 1.4 a 1.6. Las líneas más largas necesitan más interlineado para que el ojo encuentre el inicio de la siguiente línea.
Títulos: de 1.1 a 1.3. Un texto grande con 1.5 de interlineado parece líneas separadas y no un solo título.
Botones y etiquetas de una línea: de 1 a 1.25, con padding para la altura.

En accesibilidad, el criterio de conformidad 1.4.12 de WCAG exige que una página siga funcionando cuando el lector pone el interlineado en 1.5 veces el tamaño de letra, así que evita alturas fijas en cajas de texto que lo recortarían.

Centrar verticalmente una línea de texto

Cuando una caja contiene exactamente una línea, un line-height igual a la altura de la caja pone el texto en su centro vertical, porque el espacio extra se reparte por igual arriba y abajo:

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

Deja de funcionar en cuanto el texto pasa a dos líneas, porque entonces cada línea mide 40px de alto. Para cualquier cosa que pueda ocupar varias líneas, centra con flexbox, como se muestra en la página de cómo centrar un div.

La abreviatura font

La abreviatura font define el tamaño y el interlineado juntos con una barra:

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

La abreviatura restablece todas las propiedades de fuente que no menciona (incluido line-height a normal cuando omites la parte de la barra), así que escríbela antes de cualquier regla font-* individual.

Errores comunes

Usar em o % en un contenedor. Los hijos heredan una longitud fija. Usa un número sin unidad.
Una height fija en una caja de texto. Cuando el texto ocupa más líneas o el lector aumenta el espaciado, se desborda. Deja que el contenido defina la altura.
Texto del cuerpo demasiado apretado. line-height: 1 hace que los párrafos sean difíciles de leer. Empieza en 1.5.
Esperar que line-height agregue espacio entre párrafos. Eso es margin en los párrafos.
Depender de normal. Cambia de una fuente a otra, así que el layout se mueve cuando cambia la fuente.

Preguntas frecuentes

¿Qué hace line-height en CSS?

Define la altura de cada caja de línea de texto. El espacio que sobra más allá de la altura propia de la fuente se reparte por igual arriba y abajo de las letras, así que un line-height mayor significa más espacio entre líneas.

¿line-height debe llevar unidad?

Normalmente no. Un valor sin unidad como 1.5 se multiplica por el tamaño de letra de cada elemento, así que se mantiene proporcional en los hijos que tienen otro tamaño. Un valor con unidad se calcula una vez y se hereda como una longitud fija.

¿Cuál es un buen line-height para el texto del cuerpo?

Entre 1.4 y 1.6 para párrafos, y alrededor de 1.1 a 1.3 para títulos grandes. La guía AAA de WCAG pide al menos 1.5 en los párrafos.

¿Qué es line-height: normal?

El valor por defecto. El navegador usa un valor que sale de las métricas de la propia fuente, normalmente cerca de 1.2 pero distinto en cada fuente, así que no es predecible entre fuentes.

¿Cómo cambio el interlineado en HTML?

HTML no tiene un atributo de interlineado. Usa la propiedad CSS, por ejemplo <p style="line-height: 2;"> para un interlineado doble.

Conceptos relacionados