Longitud de línea: la regla de los 45–75 caracteres
Haz un pequeño experimento antes de leer cualquier regla. Maximiza el navegador en un monitor grande y abre una página que deje que el texto ocupe todo el ancho de la ventana: un sitio de documentación antiguo o un README en crudo suelen servir. Lee cuatro o cinco líneas y observa qué ocurre al final de cada una: tu ojo hace un largo viaje diagonal de vuelta al borde izquierdo y, al llegar, duda —a veces releyendo la línea que acaba de terminar, a veces aterrizando dos líneas más abajo—. No hay nada malo en el tipo de letra. Las líneas son simplemente demasiado largas para que el viaje de retorno aterrice de forma fiable.
La regla: el texto corrido se lee mejor con 45–75 caracteres por línea, contando los espacios, y alrededor de 66 caracteres es el punto ideal clásico. Los números provienen de la tradición tipográfica de la imprenta —The Elements of Typographic Style de Robert Bringhurst es la cita habitual para el ideal de 66 caracteres— y hacen de la longitud de línea una de las decisiones más medibles y menos dependientes del gusto en tipografía. Este artículo forma parte de nuestra guía de tipografía; cubre por qué existe la regla, cómo alcanzar el rango en CSS y qué texto queda exento.
¿Por qué la longitud de línea afecta a la legibilidad?
La lectura no se desliza por la línea: el ojo salta entre puntos de fijación, varios caracteres por salto. El salto que importa aquí es el más grande: el barrido de retorno, el viaje diagonal desde el final de una línea hasta el inicio de la siguiente. Ese viaje tiene un objetivo pequeño —un interlineado hacia abajo, todo el ancho de columna hacia atrás— y su tasa de error crece con la distancia recorrida. En las líneas largas el barrido se queda corto y el ojo relee la línea que acaba de dejar (el efecto de duplicación del experimento de arriba), o se pasa de largo y salta una línea. Esto es un hallazgo consistente en la investigación sobre lectura, no una preferencia de diseñador: cuanto más larga la línea, más a menudo falla el viaje de vuelta.
Las líneas cortas fallan de la manera opuesta. Una línea de 30–35 caracteres solo contiene cuatro o cinco palabras, así que las expresiones que van juntas se parten entre saltos de línea, y el ojo dedica gran parte de su tiempo a dar la vuelta en lugar de avanzar. La comprensión sobrevive, pero el ritmo se vuelve entrecortado y leer se siente como un esfuerzo.
La banda de 45–75 es simplemente el rango donde ambos modos de fallo se mantienen raros: líneas lo bastante largas para llevar una expresión completa, lo bastante cortas para que el barrido de vuelta siga siendo preciso.
¿Cómo se controlan los caracteres por línea?
La longitud de línea es un cociente: caracteres por línea = ancho de columna ÷
ancho medio de carácter. Rara vez controlas el segundo término —pertenece al
tipo de letra y al tamaño de la fuente—, así que la palanca de trabajo es el
primero: el ancho de la columna de texto, que en CSS significa max-width en el
contenedor del texto.
La unidad más directa para la tarea es ch. Un ch equivale al ancho del
dígito 0 en la fuente y el tamaño actuales, que en la mayoría de los tipos de
texto proporcionales se acerca al ancho medio de carácter. Eso convierte esto en
una implementación de una sola línea de la regla:
article p {
max-width: 65ch;
}No es exacto —el 0 suele ser un poco más ancho que el carácter medio real, así
que 65ch a menudo contiene más cerca de 70 caracteres—, pero deja la columna
dentro de la banda y se reescala automáticamente cuando cambia el tamaño de la
fuente, cosa que un valor en píxeles no hace.
La palanca estructural es el propio sistema de columnas. Las columnas de texto de una rejilla de maquetación son, entre otras cosas, un presupuesto de longitud de línea: elige los tramos de columna de modo que el texto corrido caiga dentro de la banda en tu breakpoint más ancho, y cada breakpoint más estrecho heredará un recuento seguro.
¿Por qué el diseño responsive complica la longitud de línea?
Porque las pantallas crecieron más rápido que la lectura. A 16px, un carácter medio ocupa aproximadamente 8px de ancho, así que un párrafo que abarque una ventana de 1440px alcanza unos 180 caracteres por línea: más del doble del techo de la banda. Esto, más que cualquier preferencia estética, es la razón de que existan los contenedores con max-width y las rejillas de columnas: una imagen hero a sangre completa puede abarcar la ventana, pero los párrafos necesitan una valla. En pantallas grandes, el ancho sin restringir es el fallo por defecto, no un caso extremo.
Juzgar el recuento contra una columna real supera a estimarlo desde la ventana. La vista de tipografía del Scale Composer lleva una superposición de columna de solo lectura que refleja el breakpoint más grande de los ajustes de la rejilla: abre el espécimen de texto corrido con la superposición activada y lee tu propio tamaño de cuerpo contra anchos de columna reales; el momento en que una línea rebasa la banda cómoda es visible directamente en el texto corrido.
¿La regla se aplica a todo tipo de texto?
No: protege la lectura continua, y buena parte del texto de interfaz no lo es:
| Texto | Rango | Por qué |
|---|---|---|
| Texto corrido, una sola columna | 45–75 caracteres | el barrido de retorno debe aterrizar de forma fiable, línea tras línea |
| Texto corrido, varias columnas | 45–60 caracteres | con una columna vecina compitiendo por la zona de aterrizaje, las líneas más cortas mantienen al ojo en su propia columna |
| Pies de foto, etiquetas de UI, botones | exento | normalmente una sola línea: sin barrido de retorno, nada que proteger |
| Titulares | exento | unas pocas palabras se captan como una forma, no se escanean linealmente |
Las excepciones importan tanto como la regla: forzar un mínimo de 45 caracteres sobre la etiqueta de un botón de tres palabras resuelve un problema que la etiqueta no tiene.
¿Qué aspecto tiene el mismo párrafo a 40, 66 y 120 caracteres?
Toma un párrafo de 70 palabras —unos 420 caracteres con espacios— compuesto a 16px, donde el carácter medio mide aproximadamente 8px de ancho:
- A ~40 caracteres (una columna de 320px) el párrafo ocupa unas once líneas. Casi ninguna frase sobrevive intacta en una línea; las expresiones se rompen a media idea, el borde derecho irregular es profundo y el ojo da la vuelta cada cuatro o cinco palabras. El texto se lee en fragmentos.
- A ~66 caracteres (una columna de 530px) ocupa unas siete líneas. La mayoría de las líneas llevan una expresión completa, el barrido de retorno de ~500px aterriza de forma fiable y el párrafo se lee en expresiones en lugar de en fragmentos. Este es el ajuste que la regla protege.
- A ~120 caracteres (una columna de 960px) ocupa unas cuatro líneas, y cada barrido de retorno recorre ahora casi mil píxeles. Aquí es donde aparecen las líneas duplicadas y saltadas del experimento inicial, y donde los lectores empiezan discretamente a escanear en lugar de leer.
El mismo párrafo, el mismo tipo de letra, el mismo tamaño. Solo la columna decide cuál de las tres experiencias tiene el lector.
Comprueba tus propias columnas
La banda solo se convierte en convicción contra tu propia maquetación. Empieza por el extremo roto: carga un espécimen cuyas líneas rebasen holgadamente la banda, siente cómo se degrada el barrido de retorno en un texto que puedes editar, y luego estrecha el contenedor hasta que el recuento baje a través de 75 y se asiente cerca de 66 —abre el espécimen demasiado ancho y devuélvelo a la banda.