¿Para qué sirve la propiedad line-height en CSS y cómo afecta la legibilidad?

La propiedad line-height en CSS se utiliza para especificar la altura de una línea de texto. A menudo se le llama «interlineado» (aunque técnicamente no es solo el espacio entre líneas, sino la altura total de la caja que ocupa cada línea de texto). Esta propiedad afecta directamente la cantidad de espacio vertical entre las líneas de un bloque de texto.

¿Cómo afecta la legibilidad?

El line-height tiene un impacto muy significativo en la legibilidad del texto, especialmente en párrafos largos:

1. line-height demasiado pequeño:
   • Si el line-height es muy bajo (cercano al tamaño de la fuente, por ejemplo, line-height: 1; o line-height: 100%;), las líneas de texto aparecerán muy juntas. Los ascendentes (partes de letras como 'h', 'l') y descendentes (partes de letras como 'g', 'p') de las líneas adyacentes pueden tocarse o incluso superponerse.
   • Efecto en la legibilidad: Esto hace que el texto sea denso, difícil de leer y visualmente agotador, ya que el ojo tiene problemas para seguir la línea actual y pasar a la siguiente sin saltar o releer.
2. line-height demasiado grande:
   • Si el line-height es excesivo (por ejemplo, line-height: 2.5; o line-height: 250%;), las líneas de texto estarán muy separadas.
   • Efecto en la legibilidad: Aunque un poco de espacio es bueno, demasiado puede hacer que las líneas de texto parezcan desconectadas entre sí, rompiendo la cohesión del párrafo. El ojo puede tener dificultades para asociar las líneas como parte de un mismo bloque de pensamiento.
3. line-height óptimo:
   • Un valor de line-height adecuado, generalmente recomendado entre 1.4 y 1.8 (sin unidades) para el cuerpo del texto, proporciona suficiente espacio en blanco (o «aire») entre las líneas.
   • Efecto en la legibilidad: Este espaciado adecuado permite que el ojo del lector se mueva fluidamente a lo largo de cada línea y salte fácilmente a la siguiente. Ayuda a distinguir las formas de las palabras y mejora la comprensión y la comodidad de lectura general, especialmente en textos largos.

Valores para line-height:

• Número sin unidad (recomendado): Por ejemplo, line-height: 1.6;. Este número se multiplica por el font-size actual del elemento para obtener la altura de la línea. Es la forma más flexible y recomendada porque escala proporcionalmente si el font-size cambia.
• Longitud: Por ejemplo, line-height: 24px; o line-height: 1.5em;.
• Porcentaje: Por ejemplo, line-height: 160%; (basado en el font-size del elemento).
• normal (valor por defecto): El navegador elige una altura de línea «razonable», que suele ser alrededor de 1.2 veces el font-size, dependiendo de la familia tipográfica.