line-height

line-height es la propiedad CSS que controla la altura de cada línea de texto — lo que en tipografía tradicional se llama interlineado o leading. Define el espacio vertical total que ocupa una línea: el texto en sí más el espacio adicional repartido proporcionalmente arriba y abajo del texto. Un line-height mayor separa más las líneas entre sí; uno menor las aprieta. Junto con font-size y font-family, es una de las propiedades que más impacto tiene en la legibilidad de un bloque de texto.

line-height hereda por defecto y ese comportamiento de herencia es el motivo de su gotcha más importante. El valor por defecto del navegador es normal, que equivale aproximadamente a 1.2 veces el font-size. Para textos de cuerpo, los estándares de accesibilidad recomiendan al menos 1.5. Para títulos, donde las líneas son pocas y el font-size es grande, valores de 1.1 a 1.3 suelen verse mejor.

El gotcha central de line-height: si declarás line-height: 24px en un contenedor y algún elemento hijo tiene un font-size mayor, las líneas de ese hijo van a quedar demasiado juntas (o incluso superpuestas), porque el line-height heredado es el valor calculado 24px, no el factor 1.5. En cambio, si declarás line-height: 1.5 (número sin unidad), el hijo hereda el factor 1.5 y lo multiplica por su propio font-size — dando un interlineado proporcionalmente correcto. Por eso la práctica estándar es usar número sin unidad.

Cómo funciona

line-height define la altura de la caja de línea (line box). El espacio entre el texto y los bordes de esa caja se llama half-leading: la diferencia entre line-height y font-size se divide en dos y se reparte arriba y abajo del texto. Con line-height: 1.5 y font-size: 16px, la line box mide 24px, y hay 4px de half-leading arriba y 4px abajo.

El valor computado de line-height: 1.5 es 1.5 (un número, no un px). Cuando un hijo hereda este valor, lo hereda como factor y lo multiplica por su propio font-size. Esto es lo que hace a los números sin unidad seguros para la herencia.

body {
  font-size: 1rem;       /* 16px */
  line-height: 1.5;      /* 24px para este elemento */
}

h1 {
  font-size: 2rem;       /* 32px */
  /* hereda line-height: 1.5 → 32 × 1.5 = 48px → correcto */
}

Sintaxis

selector {
  line-height: normal | <número> | <longitud> | <porcentaje>;
}

Valores

Número sin unidad (recomendado)

Un número sin unidad se multiplica por el font-size del elemento para calcular la altura de línea. Es el valor recomendado porque se hereda como factor, no como valor calculado.

body { line-height: 1.5;  }  /* 16px × 1.5 = 24px */
h1   { line-height: 1.2;  }  /* para títulos, más compacto */
.code{ line-height: 1.4;  }  /* para código, algo más apretado que el cuerpo */

Por qué sin unidad: si un hijo tiene font-size: 2rem (32px) y hereda line-height: 1.5, su line height es 48px — proporcionalmente correcto. Si en cambio heredara line-height: 24px, sus 32px de texto en una caja de 24px darían un resultado superpuesto.

Cuándo usar: siempre, salvo casos muy específicos. Es la práctica estándar para toda tipografía web.

normal (valor inicial)

El navegador calcula automáticamente un interlineado razonable según la fuente. Suele equivaler a aproximadamente 1.2, pero varía según la tipografía.

p { line-height: normal; }

Cuándo usar: cuando querés que la fuente determine su propio interlineado óptimo. En la práctica, es demasiado apretado para texto de cuerpo largo; explicitá al menos 1.5.

Longitud — px, em, rem

Especifica la altura de línea con una unidad. Funciona, pero con herencia puede dar resultados inesperados.

p { line-height: 24px; }
p { line-height: 1.5em; }   /* em: relativo al font-size del elemento */
p { line-height: 1.5rem; }  /* rem: relativo al font-size del html */

El gotcha: con px, el valor heredado es el px calculado. Un hijo con font-size mayor recibe ese mismo px y puede quedar con líneas demasiado juntas. Con em, hay un riesgo similar si hay anidamiento.

Cuándo usar: px para casos donde el line height es un valor fijo de diseño independiente del texto (por ejemplo, en un botón o un chip donde el texto siempre es de tamaño conocido). Evitalo en contenedores con texto de tamaño variable.

Porcentaje — %

Equivalente al em: 150% es lo mismo que 1.5em. Se hereda como valor calculado (el px resultante), igual que em, con el mismo riesgo para la herencia.

p { line-height: 150%; } /* = 1.5em del elemento */

Cuándo usar: rara vez. Preferí el número sin unidad.

Cuándo usar qué

Notas, gotchas e interacción

• Número sin unidad siempre, salvo caso concreto justificado. Es el consejo más importante de esta propiedad. line-height: 1.5 se hereda como factor; line-height: 24px se hereda como valor fijo. En contenedores con texto de distintos tamaños, el número sin unidad siempre da el resultado correcto.
• line-height: normal suele ser demasiado apretado para cuerpo de texto. El valor normal (≈1.2) es aceptable para títulos cortos, pero para párrafos de lectura, WCAG 1.4.8 recomienda al menos 1.5 para accesibilidad.
• line-height afecta el tamaño visual del elemento incluso sin contenido. Un <div> vacío con line-height: 3 y font-size: 1rem tiene una altura de 48px. Este comportamiento sorprende cuando se usan line-height grandes en contenedores que se esperan compactos.
• Interacción con vertical-align. line-height es la base sobre la que opera vertical-align para alinear inline boxes dentro de una línea. Si el line-height es menor que la altura del contenido inline más alto (por ejemplo, una imagen inline), la línea se expande más allá del line-height declarado.
• font-size y line-height van de la mano. Cambiar el font-size sin revisar el line-height puede romper el ritmo vertical de la tipografía. Si usás números sin unidad, el ritmo se mantiene automáticamente.

Vigente / legacy

line-height está vigente desde CSS1. No hay forma legacy. El valor normal como inicial nunca cambió. La recomendación de usar números sin unidad es una buena práctica establecida desde hace décadas, no una novedad.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección La fuente: family, size, weight, style.