Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
La longitud de línea — la medida, en términos tradicionales — es el ancho de una columna de texto contado en caracteres. La edición de 2005 recomendaba 55–65 caracteres por línea, aproximadamente diez a doce palabras, y advertía que la lectura en pantalla era más fatigosa que la impresa, por lo que líneas más cortas y párrafos más pequeños eran más seguros. De todo lo contenido en la investigación original, esta recomendación es la que mejor ha resistido. El consenso tipográfico sobre la medida cómoda ha permanecido estable durante más de un siglo de práctica impresa y ha sido reafirmado repetidamente para las pantallas. Lo que cambió no es el número sino la maquinaria a su alrededor: la web tiene ahora unidades que expresan la medida directamente, estándares que la acotan y viewports que el original no podría haber imaginado.
Qué cambió desde 2005
En 2005, restringir la longitud de línea significaba anchos fijos en píxeles estimados a partir de un carácter promedio. El CSS moderno expresa la medida en los términos del propio texto: la unidad ch equivale al ancho de avance del glifo del cero en la fuente actual, lo que la convierte en un sustituto útil del ancho promedio de carácter. Una sola declaración — max-width: 65ch — codifica la recomendación central de este capítulo, y se adapta automáticamente cuando cambia la fuente, el tamaño o la preferencia del usuario. Es la línea de CSS adyacente a la accesibilidad más útil que un diseñador puede escribir. Nótese que ch es una aproximación: una columna de 65ch suele producir algo más de 65 caracteres reales en texto proporcional, ya que el cero es más ancho que el promedio. Trátela como un objetivo, no como una garantía, y compruebe párrafos reales.
Los estándares ahora delimitan el rango. El Criterio de Éxito 1.4.8 Presentación Visual de las WCAG (Nivel AAA) especifica que debe existir un mecanismo para que los bloques de texto no superen los 80 caracteres de ancho (40 para escrituras CJK). Ochenta es un techo, no un objetivo — el criterio define dónde el daño a la facilidad de lectura se convierte en un problema de accesibilidad, mientras que la zona de 55–65 sigue siendo donde la comodidad alcanza su máximo. Una columna que tope alrededor de 65–70ch satisface tanto la pauta como el viejo consenso del oficio.
La otra restricción nueva corre en dirección opuesta. El Criterio de Éxito 1.4.10 Reflujo (Nivel AA, WCAG 2.1 y 2.2) exige que el contenido refluya a un viewport de 320 píxeles CSS de ancho — equivalente a una página de escritorio ampliada al 400% — sin desplazamiento bidimensional. En 2005 el riesgo eran las líneas demasiado largas; en 2026 un riesgo igual son las maquetaciones que se niegan a acortarse. Las columnas de ancho fijo, las maquetaciones lado a lado que nunca se apilan y los elementos con anchos mínimos rígidos fuerzan desplazamiento horizontal a 320px, lo que es a la vez un fallo de conformidad y una barrera genuina: leer texto que exige desplazarse lateralmente en cada línea está entre las experiencias más castigadoras que reportan los usuarios con baja visión. A 320px con texto de lectura de 16px, las líneas rondan los 30–40 caracteres. Eso está por debajo de la zona de comodidad, y no pasa nada — las líneas cortas ralentizan la lectura ligeramente pero no la rompen, mientras que el desplazamiento horizontal la rompe por completo. Diseñe la medida como un máximo, nunca como un mínimo.
Por qué funciona el rango
La estabilidad de la recomendación de 55–65 refleja la mecánica de la lectura. Las líneas largas alargan el barrido de retorno — el salto del ojo de vuelta al inicio de la línea siguiente — y aumentan los errores de doblado, en los que el lector aterriza en la línea equivocada; exigen interlineado adicional para compensar. Las líneas muy cortas introducen demasiado pocas palabras en la previsión de cada fijación, fuerzan cambios de línea constantes y trocean las frases contra su estructura gramatical. La investigación sobre legibilidad complica el panorama de un modo interesante: algunos estudios en pantalla han encontrado que las líneas más largas pueden producir velocidades de lectura mayores, presumiblemente al reducir el número de costosos barridos de retorno — y sin embargo los lectores prefieren y califican sistemáticamente las líneas moderadas como más cómodas, y la comodidad determina si la gente sigue leyendo. Para la lectura sostenida, la preferencia y la menor fatiga abogan por la medida moderada, y eso es lo que este capítulo sigue recomendando.
La interdependencia con el interlineado, tratada en el capítulo anterior, merece repetirse como una sola regla: si la medida debe ser larga, añada interlineado. Una línea de 75 caracteres con line-height 1.6 sigue siendo legible; la misma línea a 1.3 invita al doblado.
La medida adaptable en la práctica
El patrón moderno combina tres ingredientes. Una columna de contenido con max-width en torno a 60–70ch establece la medida ideal en pantallas grandes. Un padding horizontal fluido permite a la columna respirar hasta los viewports estrechos sin inducir nunca desplazamiento horizontal. Y si hay tipografía fluida en juego — tamaños de fuente que escalan con el viewport mediante clamp() — recuerde que la medida se cuenta en caracteres, no en píxeles: como ch sigue al tamaño de fuente, un max-width basado en ch crece con el texto y mantiene el número de caracteres aproximadamente constante, que es precisamente el comportamiento deseado.
Una rectificación respecto al texto original: la edición de 2005 aconsejaba evitar la partición de palabras en el texto de lectura. Con composición en bandera derecha y medidas generosas, la partición es en efecto innecesaria. Pero en las medidas estrechas que exige el reflujo, las palabras largas en texto sin particiones crean banderas abiertas de par en par o directamente desbordan. Activar hyphens: auto (con el atributo lang correcto establecido, ya que la partición se basa en diccionarios) es ahora buena práctica para el texto de lectura que debe sobrevivir en columnas estrechas. Acompáñelo con text-wrap: pretty donde tenga soporte para mejores decisiones de corte.
Por último, el consejo del original sobre la longitud de los párrafos sigue vigente y ha ganado dientes: los párrafos más cortos ayudan a la orientación en la que confían por igual los lectores de pantalla, quienes hojean y los lectores con dificultades de atención o memoria. Las WCAG 1.4.12 esperan además que el contenido tolere un espaciado entre párrafos aumentado por el usuario, así que evite maquetaciones que asuman que los párrafos encajan en una altura exacta.
En CSS
article {
max-width: 65ch; /* 45–75 characters; ~65 is the sweet spot */
margin-inline: auto;
padding-inline: 1rem; /* fluid gutter at every width */
}
/* Test at a 320px viewport: no horizontal scrolling (WCAG 1.4.10) */Recomendaciones
- Apunte a 55–65 caracteres por línea en el texto de lectura; trate 80 como el límite exterior según WCAG 1.4.8.
- Implemente la medida con max-width en unidades ch (aproximadamente 60–70ch) en la columna de contenido.
- Asegúrese de que el contenido refluye en un viewport de 320px sin desplazamiento horizontal (WCAG 1.4.10); nunca establezca una medida mínima.
- Aumente el interlineado cuando la medida sea larga; los dos ajustes son una sola decisión.
- Active hyphens: auto con un atributo lang correcto para que las columnas estrechas corten con limpieza, y añada text-wrap: pretty donde tenga soporte.
- Con tipografía fluida, mantenga la medida en unidades relativas al carácter para que la longitud de línea permanezca estable al escalar el tamaño de fuente.
- Mantenga los párrafos cortos; verifique que las maquetaciones toleran un espaciado entre párrafos aumentado según WCAG 1.4.12.