Interlineado y longitud de línea para un texto legible

El interlineado es la distancia entre la línea base de una línea de texto y la de la siguiente, y la longitud de línea (lo que los tipógrafos llaman la medida) es cuántos caracteres hay en una línea. Para el texto de lectura, un interlineado de unas 1,4 a 1,6 veces el tamaño de la fuente y una longitud de línea de unos 45 a 75 caracteres es el rango que se lee cómodo con la mayoría de las fuentes. Los titulares piden menos interlineado, a menudo de 1,05 a 1,25. Estos dos ajustes hacen más por la legibilidad que casi cualquier elección de fuente.

Esta guía explica por qué funcionan esos rangos, cómo se afectan los dos ajustes entre sí y cómo definirlos en páginas web, diapositivas y publicaciones en redes. Forma parte de la guía más amplia de fundamentos de tipografía, junto a el espaciado entre letras.

Qué controlan de verdad el interlineado y la longitud de línea

Leer es una serie de saltos. El ojo capta unas pocas palabras, salta a lo largo de la línea y luego hace un largo barrido de vuelta a la izquierda para encontrar la línea siguiente. La longitud de línea decide cuánto dura ese recorrido. El interlineado decide lo fácil que es aterrizar en la línea correcta al final del barrido.

Si es demasiado cerrado, las líneas se amontonan: los descendentes tocan los ascendentes y el barrido de vuelta cae en la línea equivocada. Si es demasiado abierto, el párrafo se deshace en tiras. Las líneas demasiado largas pierden al ojo en el camino de vuelta; las demasiado cortas hacen que la lectura vaya a trompicones.

Cómo elegir el interlineado del texto de lectura

Empieza en 1,5 y ajusta a ojo. Tres cosas empujan el número hacia arriba o hacia abajo.

• La altura de la x. Las fuentes con una altura de x grande (minúsculas grandes en relación con las mayúsculas) se ven más densas, así que necesitan más interlineado. Las que tienen una altura de x pequeña pueden ir más cerradas.
• La longitud de línea. Las líneas largas necesitan más interlineado para que el barrido de vuelta tenga un objetivo más amplio. Las líneas cortas, como una columna estrecha o una pantalla de móvil, pueden usar un poco menos.
• El peso y el color. El texto en negrita y el texto claro sobre fondo oscuro se ven más pesados en la página, así que agradecen algo más de espacio entre líneas.

Las pautas de accesibilidad apuntan en la misma dirección. El criterio de éxito sobre espaciado del texto del W3C pide que el contenido siga funcionando cuando un lector sube el interlineado a 1,5 veces el tamaño de la fuente, así que cualquier composición pensada en torno a 1,5 ya supera esa parte de la prueba. Nunca fijes la altura de una caja de texto tan justa que un interlineado mayor corte las palabras.

Interlineado para titulares y letra grande

El interlineado es una proporción, así que el espacio que crea crece con el tamaño de la fuente. A 16 px, un interlineado de 1,5 añade 8 px de espacio. A 72 px, la misma proporción añade 36 px, mucho más de lo que necesita un titular. Por eso la letra grande se ve suelta con los ajustes del texto de lectura y hay que cerrarla a medida que crece.

Una escala práctica: texto de lectura a 1,5, subtítulos a unos 1,3, titulares de 1,1 a 1,2 y líneas muy grandes de 1,0 a 1,05. Revisa los ajustes más cerrados por si hay choques: un descendente en la primera línea (g, y, p) puede tocar una tilde o un ascendente en la segunda. Si pasa, abre un poco el interlineado en lugar de mover líneas sueltas.

Qué longitud debe tener una línea de texto

El rango clásico de la tipografía de libros es de 45 a 75 caracteres por línea, contando letras, espacios y signos, y algo en torno a 60 o 70 se siente más natural para la lectura continua. En una web eso suele suponer una columna de texto de entre unos 560 y 720 px de ancho con un tamaño de 16 a 18 px, pero depende de la fuente, así que mide en caracteres y no en píxeles.

Para comprobarlo, cuenta los caracteres de una línea típica. Si suele pasar de unos 80, la columna es demasiado ancha; si baja de unos 40, es demasiado estrecha, con bordes irregulares y palabras cortas que se quedan colgando.

Demasiado ancha: 110 caracteres

1100 × 180

Cómoda: 65 caracteres

650 × 260

Demasiado estrecha: 30 caracteres

300 × 480

Cómo definir el interlineado y la longitud de línea en CSS

Dos costumbres lo cubren casi todo. Escribe el interlineado como un número sin unidad, para que cada elemento lo calcule a partir de su propio tamaño de fuente, y limita la longitud de línea con la unidad ch, que se basa en el ancho del carácter cero de la fuente actual. La página de MDN sobre line-height explica por qué los valores sin unidad se heredan de forma más segura que los píxeles o los em.

:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}

Interlineado y longitud de línea en publicaciones y diapositivas

Las publicaciones en redes y las diapositivas se leen en segundos, a menudo en el móvil, así que las reglas cambian. Las líneas son cortas por naturaleza y hay pocas. Mantén los titulares cerrados, de 1,05 a 1,2, y cualquier línea de apoyo en una o dos líneas cortas a unos 1,3. Si una publicación necesita un párrafo con interlineado de lectura, probablemente lo que necesita es menos palabras.

En una publicación de 1080 por 1350, un titular de tres a seis palabras por línea se lee bien a tamaño de móvil. En una diapositiva de 1920 por 1080, el mismo principio vale desde el otro lado de una sala: líneas cortas, titulares cerrados, márgenes generosos. Las guías de fuentes para redes sociales y fondos para presentaciones cubren el lado del tamaño.

El texto sobre un fondo cargado necesita un poco más de todo: más interlineado, un tamaño mayor y una zona más tranquila detrás. Texto sobre un degradado explica el método completo.

Una lista rápida para un espaciado legible

1. 1

   Define primero el texto de lectura

   Elige el tamaño, un interlineado en torno a 1,5 y una medida de 60 a 70 caracteres. Ajusta todo lo demás a partir de ahí.

2. 2

   Cierra a medida que crece la letra

   Baja el interlineado de los subtítulos a los titulares y revisa las líneas más cerradas por si hay choques.

3. 3

   Mide en caracteres

   Cuenta una línea real. Si queda fuera de 45 a 75, arregla el contenedor, no el tamaño de fuente.

4. 4

   Deja que el lector lo cambie

   Evita cajas de texto de altura fija, para que un texto más grande o un espaciado mayor nunca corte tus palabras.