La Web Universal

2.4 Interlineado

El interlineado para la lectura en pantalla: line-height sin unidades en CSS, el requisito de WCAG 1.4.12 de tolerar 1.5, y por qué el valor correcto depende de la longitud de línea.

7 min read

Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.

El espacio entre las líneas de texto — el interlineado en la imprenta, line-height en CSS — es uno de los ajustes de mayores consecuencias en la tipografía de pantalla. Su función es de navegación: suficiente espacio en blanco entre líneas permite al ojo completar una línea, ejecutar el largo barrido de retorno hacia el margen izquierdo y aterrizar en la línea siguiente correcta, en lugar de releer la actual o saltarse alguna. La edición de 2005 recomendaba aproximadamente un 140% del tamaño de la fuente, señalando que los valores predeterminados de los navegadores, de 100–120%, eran demasiado apretados, especialmente para lectores con baja visión. Esa recomendación ha envejecido bien; en todo caso, la práctica y los estándares han avanzado ligeramente más allá de ella.

Qué cambió desde 2005

La cifra original de aproximadamente 1.4 se adelantó a su tiempo y hoy se sitúa en el extremo conservador de la práctica mayoritaria. El texto de lectura en sitios bien compuestos en 2026 suele oscilar entre 1.4 y 1.6, y el mínimo de accesibilidad se ha formalizado: el Criterio de Éxito 1.4.12 Espaciado del Texto de las WCAG (Nivel AA) exige que el contenido sobreviva a un interlineado aplicado por el usuario de 1.5 veces el tamaño de la fuente sin pérdida de contenido ni de funcionalidad, y el más antiguo 1.4.8 Presentación Visual (Nivel AAA) pide directamente un espaciado entre líneas de al menos 1.5 dentro de los párrafos. La lectura práctica: 1.5 no es una aspiración, es el valor que su maquetación debe, como mínimo, tolerar — y para la mayoría de las composiciones de texto de lectura es sencillamente un buen valor predeterminado.

Tres párrafos de líneas de relleno compuestos con line-height 1.2, 1.5 y 2.0 — las líneas apretadas agobian, 1.5 es el valor predeterminado para el texto de lectura, 2.0 se dispersa.

El segundo cambio es cómo se especifica el interlineado. En 2005, los diseñadores fijaban el interlineado en píxeles o porcentajes. La práctica moderna de CSS es tajante: use valores sin unidades (line-height: 1.5, no 24px ni 150%). La distinción importa por la herencia. Un valor sin unidades se hereda como proporción y se recalcula contra el tamaño de fuente propio de cada elemento; un valor en píxeles o en porcentaje se calcula una sola vez y se hereda como longitud fija. Fije line-height: 24px en el cuerpo de una página y un encabezado anidado a 32px se renderizará con las líneas superpuestas. El line-height sin unidades hace que toda la cascada escale correctamente — que es también lo que mantiene intactas las maquetaciones cuando los usuarios agrandan el texto.

Tercero, las propias maquetaciones cambiaron. Los contenedores de texto de altura fija eran comunes en 2005 y son la principal víctima del requisito 1.4.12: una caja dimensionada para exactamente tres líneas de texto con line-height 1.3 recortará su contenido cuando un lector lo anule con 1.5. Los contenedores que albergan texto deben dimensionarse a partir de su contenido, usando min-height donde se necesite un mínimo, nunca una altura fija.

Interlineado y medida son una sola decisión

El refinamiento más importante respecto al capítulo original es que el interlineado no puede elegirse de forma aislada. El interlineado y la longitud de línea (la medida) son interdependientes, y el mecanismo es el barrido de retorno. En una línea corta, el retorno del ojo hacia la izquierda es un salto breve y errar el objetivo es raro, así que un interlineado más apretado resulta tolerable. En una línea larga, el barrido de retorno es largo e impreciso; un interlineado generoso da al ojo una "pista de aterrizaje" más ancha y hace mucho menos probable el doblado — releer la misma línea. Este es un hallazgo de larga data en la investigación sobre legibilidad, observado desde los estudios de imprenta en adelante: el interlineado aceptable crece con la medida.

En la práctica: una nota lateral de 45 caracteres puede leerse con comodidad a 1.4; una columna de artículo de 75 caracteres pide 1.6 o más. Si una maquetación impone líneas largas, compense con interlineado. Mejor aún, restrinja la medida (el tema del próximo capítulo) para que el interlineado pueda quedarse en el cómodo rango medio.

La variabilidad entre tipografías, señalada en el original, sigue vigente. El line-height se calcula a partir del tamaño de la fuente, pero lo que el lector percibe es el canal blanco entre la masa visual de una línea y la siguiente — y eso depende de la altura de la x, de la longitud de ascendentes y descendentes y del peso del trazo. Una tipografía de altura de la x grande como Verdana llena su cuadratín más por completo y se lee más apretada a un line-height dado que una tipografía de altura de la x pequeña con el mismo ajuste. Las tipografías oscuras, negritas o condensadas también piden más aire. Juzgue el interlineado mirando párrafos compuestos, no confiando en un número.

Los encabezados son distintos

La pauta de 1.4–1.6 se aplica al texto corrido de lectura. Los encabezados siguen la lógica opuesta: a tamaños grandes, un interlineado proporcional deja huecos enormes entre las líneas partidas, cercenando visualmente el encabezado de sí mismo. Los encabezados de varias líneas se leen mejor apretados — típicamente de 1.1 a 1.25, acercándose a 1.0 en composiciones de display muy grandes. Como el line-height sin unidades se hereda como proporción, los estilos de encabezado deben fijar explícitamente sus propios valores más apretados en lugar de heredar el interlineado del cuerpo. Los requisitos de espaciado de las WCAG conciernen a los bloques de texto, no a los titulares de display, pero los encabezados tampoco deben recortarse cuando los usuarios aplican sus ajustes — otra razón para evitar contenedores hero de altura fija.

Dos notas menores. Primera, los extremos perjudican en ambas direcciones: la advertencia del original sobre el interlineado excesivo se mantiene, pues las líneas que flotan en demasiado espacio blanco dificultan la búsqueda de la línea siguiente y fragmentan el párrafo como unidad — más allá de aproximadamente 2.0, el texto de lectura empieza a desarmarse. Segunda, las interfaces también son texto: los botones, las etiquetas de formulario y la navegación necesitan un line-height lo bastante sensato como para sobrevivir a los saltos de línea y a los ajustes del usuario, y la costumbre común de centrar texto de interfaz de una sola línea con trucos que asumen que nunca se partirá es un fallo recurrente del 1.4.12.

En CSS

body { line-height: 1.5; }      /* unitless — scales with size */
h1, h2 { line-height: 1.15; }   /* display sizes want less */
figcaption { line-height: 1.4; }

/* Longer measures need more leading: */
.wide-column { line-height: 1.6; }

Recomendaciones

  • Componga el texto de lectura con un interlineado de 1.5 como valor predeterminado; ajuste dentro de aproximadamente 1.4–1.7 según la tipografía y la medida.
  • Use siempre valores de line-height sin unidades para que la proporción se herede y escale correctamente.
  • Aumente el interlineado a medida que crece la longitud de línea; las medidas largas necesitan más aire para el barrido de retorno.
  • Apriete los encabezados a aproximadamente 1.1–1.25, fijándolo explícitamente en los estilos de encabezado.
  • Nunca fije la altura de los contenedores que albergan texto; deje que el contenido determine la altura, con min-height donde sea necesario.
  • Pruebe con un ajuste de espaciado de texto (interlineado 1.5, según WCAG 1.4.12) y con zoom al 200% para confirmar que nada se recorta ni se superpone.
  • Evalúe el interlineado visualmente para cada tipografía — la altura de la x y el peso cambian cómo se lee el mismo número.

Lecturas complementarias