Longitud de línea e interlineado: cómo ajustarlos en 6 pasos

Al terminar tendrás dos números que puedes defender en una revisión de diseño: el ancho máximo del texto corrido y el interlineado que le corresponde. Los dos escritos en CSS que aguanta un cambio de fuente, un zoom al 200 por ciento y un móvil en vertical.

La respuesta corta primero. El texto se lee mejor entre 50 y 75 caracteres por línea, con 66 como cifra más citada, y el interlineado que encaja en esa franja va de 1,4 a 1,6 como multiplicador sin unidad. En tipografía el ancho de línea se llama medida. Lo demás es cómo llegar a esos números sin adivinar.

La medida es el ajuste más olvidado de las interfaces de producto. Casi siempre se define un contenedor en píxeles o en porcentaje y el texto cae donde le toca. En un monitor de 27 pulgadas un párrafo a todo ancho pasa de 140 caracteres. El ojo termina la línea, vuelve a la izquierda y aterriza en la equivocada. Quien lee relee, luego pasa a ojear, luego se va. La revisión de Baymard sobre la literatura de legibilidad sitúa la franja útil entre 50 y 75 caracteres. Emil Ruder, que trabajaba en papel décadas antes del navegador, se quedaba entre 50 y 60.

Qué necesitas antes de empezar

• La fuente de producción, no un sustituto. La medida depende del ancho de las letras que publicas de verdad.
• Una escala tipográfica ya cerrada. Ajustar el interlineado antes de fijar el cuerpo del texto significa hacer el trabajo dos veces.
• Una muestra de contenido real: el párrafo más largo del producto, no lorem ipsum.
• Las herramientas de desarrollo del navegador y diez minutos.

Paso 1: cuenta los caracteres que publicas hoy

Abre el párrafo más largo del producto en tu breakpoint más ancho. Selecciona una línea entera, cópiala y pégala en cualquier herramienta que cuente caracteres. Ese número es tu medida actual. Repite a 1280px y a 390px.

Salen tres números, y el ancho suele ser el susto: más de 100 caracteres en un escritorio grande, algo razonable en un portátil, menos de 40 en un móvil. Apunta los tres. Son el punto de partida y sirven para la comprobación final.

Paso 2: limita el texto con la unidad ch

.prose p { max-width: 65ch; }

La unidad ch equivale al ancho del dígito cero en la fuente activa. No es un recuento de caracteres. En la mayoría de tipografías proporcionales el cero es más ancho que la minúscula media, así que una columna de 65ch entra bastantes más de 65 caracteres de texto corrido. Pon el tope, vuelve al paso 1 y cuenta otra vez. Si la línea sale en 80, baja a 58ch o 60ch y repite. Dos vueltas es lo normal, y el número final depende de la tipografía: por eso copiar el valor de otro proyecto casi nunca funciona.

Limita el párrafo, no el contenedor. Un tope de 65ch en el wrapper también estrecha tablas, bloques de código, diagramas e imágenes a sangre, que quieren justo el ancho al que renuncia el párrafo. Aplica el tope a los elementos de texto y deja respirar al resto.

Paso 3: escribe el interlineado como número sin unidad

Usa un número, nunca un valor en píxeles.

body { font-size: 16px; line-height: 1.55; }

Un valor sin unidad se hereda como multiplicador, así que cada hijo lo recalcula sobre su propio cuerpo. Un valor en píxeles se hereda ya calculado: un pie de foto de 13px dentro de un bloque de 16px hereda 24px de interlineado y parece escrito a doble espacio. MDN señala la forma sin unidad como la práctica recomendada por esto mismo, y además escala bien cuando se amplía la página.

Después ajusta el número a la medida, porque las dos cosas son una sola decisión. Una línea larga pide más espacio vertical o el ojo no encuentra el arranque de la siguiente. Una línea corta pide menos o el párrafo se deshilacha en tiras. La franja que usamos:

• de 45 a 55 caracteres por línea: de 1,4 a 1,5
• de 55 a 65 caracteres por línea: de 1,5 a 1,6
• de 65 a 75 caracteres por línea: de 1,6 a 1,7

Por debajo de 1,5 con una medida ancha, el salto de línea del ojo empieza a fallar. El criterio WCAG 1.4.8 de presentación visual pide al menos un interlineado y medio dentro del párrafo, y de ahí sale el suelo de 1,5 para el texto corrido.

Paso 4: los titulares llevan menos interlineado que el texto

Los titulares van más apretados: entre 1,1 y 1,3. El motivo es aritmético. El interlineado es un múltiplo del cuerpo, así que un titular de 40px con valor 1,6 abre 64px entre sus dos líneas, suficiente para que se lean como dos elementos separados en vez de como una frase. A 1,15 el mismo titular se mantiene unido.

Aquí la escala tipográfica se rentabiliza. Si la escala es una serie de escalones, ata un interlineado a cada escalón en lugar de a cada componente. Display 1,1, titulares 1,2, texto 1,55, pies de foto 1,4. Una decisión por escalón, válida en todas partes.

Paso 5: arregla el extremo móvil

En un móvil de 390px el texto a 16px queda en 35-40 caracteres por línea. Para pantallas pequeñas Baymard marca la franja de 30 a 50, así que vamos bien. En móvil el problema es el contrario del escritorio: padding sobre padding baja el recuento por debajo de 30, el texto salta de línea cada cuatro palabras y el margen derecho se vuelve una sierra.

No encojas el texto para meter más caracteres en el móvil. 16px es el suelo. Por debajo, Safari en iOS amplía la ventana cada vez que un campo de formulario recibe el foco, y la página se descuadra por un motivo que nadie atribuye a la tipografía. Reduce el padding horizontal, o baja el cuerpo de los elementos de alrededor y deja el texto en paz.

Paso 6: limpia el borde irregular

Dos propiedades CSS rematan el trabajo, y una tercera opción tentadora es una trampa.

text-wrap: balance iguala el ancho de las líneas en un bloque corto. Úsalo en titulares y en cualquier texto de dos o tres líneas. Chromium lo limita a seis líneas por rendimiento, así que no sirve para el texto corrido. El soporte llegó a Baseline en 2024: Chrome y Edge desde la 114, Firefox desde la 121, Safari desde la 17.5.

text-wrap: pretty es la contraparte para el texto corrido. Retoca las últimas líneas del párrafo para evitar la palabra suelta al final. WebKit publicó su implementación en Safari 26, Chrome y Edge lo tienen desde la 117, y Firefox sigue siendo el hueco. Donde falta, el texto salta de línea como siempre: añadirlo no cuesta nada.

La trampa es text-align: justify. El texto justificado da un borde derecho limpio y, sin partición de palabras ni un motor de salto de línea decente, abre ríos de blanco que bajan por la columna. El criterio WCAG 1.4.8 lo descarta de forma explícita para bloques de texto.

Cómo comprobar que funciona

1. Vuelve a contar en tres anchos. El método del paso 1, en tu breakpoint más ancho, a 1280px y a 390px. Los tres deben caer entre 45 y 75 caracteres, y el de móvil entre 30 y 50.
2. Amplía al 200 por ciento. El texto debe recolocarse sin desplazamiento horizontal. Es el quinto requisito del criterio 1.4.8, y una medida puesta en ch lo pasa sola donde una en píxeles muchas veces no.
3. Mira la separación entre párrafos. El criterio 1.4.8 pide un espacio entre párrafos de al menos vez y media el interlineado. Con 16px y valor 1,55 el interlineado ronda los 25px, así que entre párrafos hacen falta unos 38px.
4. Cambia la fuente. Sustituye la familia del texto por una claramente más ancha o más estrecha y recarga. Si la medida se queda en el mismo recuento de caracteres, el tope en ch está haciendo su trabajo.

Un matiz sobre la norma: el criterio 1.4.8 es de nivel AAA y está redactado como "existe un mecanismo", no como comportamiento obligatorio por defecto. Tómalo como objetivo para las superficies de lectura, no como examen de aprobado en cada pantalla del producto.

Fallos habituales y cómo se arreglan

Los pies de foto parecen a doble espacio. Alguien puso line-height: 24px en un elemento padre. El valor ya calculado en píxeles lo heredan los hijos más pequeños. Convierte todos los interlineados del proyecto a número sin unidad.

La medida desaparece en un diseño a dos columnas. max-width: 65ch en el párrafo es un máximo, no un mínimo. En una columna estrecha el párrafo baja de 45 caracteres y el ritmo se rompe. Define un ancho mínimo de columna, o pasa antes a una sola columna.

Las imágenes y las tablas se han estrechado. El tope acabó en el contenedor en vez de en los elementos de texto. Muévelo a p, li, blockquote y a los niveles de titular que lo necesiten.

Una URL o un token revienta el tope. Las cadenas largas sin espacios ignoran la medida y provocan desplazamiento horizontal. Añade overflow-wrap: break-word al contenedor del texto.

Los números están bien y aun así se lee mal. Antes de tocar la medida otra vez, revisa otras dos variables: el contraste entre texto y fondo y el espacio encima de cada titular. Un titular equidistante del párrafo de arriba y del de abajo se pega al que no toca.

Para seguir

Medida e interlineado son la capa de lectura. Las dos decisiones vecinas son los tamaños, en escala tipográfica para UI de producto, y el espacio alrededor del texto, en alineación óptica en interfaces. Si después de los tres la página sigue plana, el problema suele ser la jerarquía y no la tipografía: jerarquía visual sin color reúne los recursos que funcionan cuando el color de acento no está haciendo nada.