Diseño Web

El ancho de línea mal puesto aleja al lector de tu blog

El ancho de línea decide si el lector termina tu artículo o cierra la pestaña: el límite técnico está entre 50 y 80 caracteres por línea.

El ancho de línea mal puesto aleja al lector de tu blog

El ancho de línea de un artículo jurídico decide si el lector llega al final o abandona a los pocos párrafos. Muchos temas de WordPress estiran el texto hasta ocupar todo el ancho de la pantalla, sin ningún límite de caracteres por línea, y el resultado es un bloque que cansa la vista antes de aportar nada.

Para el blog de un despacho, donde el artículo tiene que leerse entero para generar confianza y posicionar en Google, ese detalle de maquetación pesa más de lo que parece. No es una cuestión de gusto tipográfico: hay una cifra concreta que marca la diferencia entre un texto que se lee y otro que se abandona.

El ancho de línea óptimo de un artículo web está entre 50 y 75 caracteres por línea, con 80 como máximo según el criterio 1.4.8 de las WCAG del W3C. Por encima de esa cifra el ojo tarda más en localizar el inicio de la siguiente línea y el lector abandona antes de terminar el párrafo.

Cuántos caracteres soporta una línea legible

Una línea de texto no se mide en píxeles de ancho, sino en caracteres por línea: cuántas letras, espacios y signos entran de margen a margen antes de saltar de renglón. Es la medida que de verdad importa para la lectura, porque el mismo ancho en píxeles da líneas distintas según el tamaño y la familia de la fuente.

En un despacho de abogados el problema suele venir de la plantilla, no del redactor. Muchos temas de WordPress fijan el contenedor del artículo al 100% del ancho disponible, así que en un monitor de escritorio una sola línea puede superar los 120 o 130 caracteres. El lector no sabe por qué le cuesta seguir el texto: simplemente deja de hacerlo.

La medida tipográfica es la anchura de una columna de texto, expresada en caracteres por línea y no en píxeles: a partir de cierta medida el ojo pierde la fila y tiene que buscarla al empezar el siguiente renglón.

El límite de 80 caracteres según el W3C

El límite no es una opinión de diseño: lo fija el criterio 1.4.8 (Presentación visual) de las WCAG 2.2 del W3C, el estándar internacional de accesibilidad web. Dice literalmente que el ancho de un bloque de texto no debe superar los 80 caracteres por línea (40 si es texto en chino, japonés o coreano), y que el interlineado debe ser de al menos 1,5 veces el tamaño de la fuente. Por debajo de esa cifra, cualquier persona con baja visión o dificultades de lectura puede seguir el artículo sin perder la línea.

Qué pasa cuando una plantilla ignora el límite

La mayoría de temas de WordPress para despachos de abogados no fijan ningún máximo: el texto ocupa el mismo ancho que la imagen de portada o la tabla, que sí necesitan más espacio. El resultado, en una pantalla de escritorio de 1920 píxeles, es un párrafo de 140 o 150 caracteres por línea, muy por encima del límite técnico. En el móvil el problema se invierte: el ancho se reduce solo hasta el del dispositivo, no hasta el de una columna legible, así que el único síntoma visible suele ser un tiempo de permanencia bajo en Search Console sin que nadie sepa por qué.

Interlineado y espaciado del ancho de línea

El ancho de línea no funciona solo: va unido al interlineado, el espacio vertical entre renglones. Una columna ancha con interlineado estrecho es la peor combinación posible, porque el ojo necesita más distancia vertical para encontrar el principio del siguiente renglón cuanto más larga es la línea anterior.

Las mismas WCAG 2.2 fijan el mínimo en 1,5 veces el tamaño de la fuente para el interlineado dentro de un párrafo, y 1,5 veces esa cifra para el espacio entre párrafos. En la práctica, con una fuente de 16 píxeles el interlineado no debería bajar de 24 píxeles. La mayoría de los temas de blog ya cumplen esta parte por defecto: el problema casi nunca es el interlineado suelto, sino el ancho de línea sin límite que lo acompaña. Corregir solo uno de los dos no arregla la lectura: hay que ajustar ambos a la vez.

Por qué el lector abandona un párrafo ancho

El Baymard Institute documentó en sus pruebas de usuario que, ante un bloque de texto con líneas demasiado largas, una parte de los lectores vuelve atrás de inmediato y otra intenta seguir leyendo pero abandona antes de terminar: la línea ancha se percibe como un muro de texto, no como un artículo. En el blog de un despacho ese abandono se traduce en menos tiempo de permanencia, una señal que Google sí mide para decidir qué posiciona.

El caso del blog a una sola columna ancha

Es el patrón más común en despachos de abogados: un tema sin barra lateral, pensado para que el artículo se vea «limpio», donde el texto ocupa todo el ancho del contenedor principal. Sin una sidebar que lo reparta, nada obliga a la plantilla a limitar el bloque de texto, y en un monitor normal esa columna puede llegar a 1.100 o 1.200 píxeles de ancho. Con una fuente de 16 píxeles eso son más de 140 caracteres por línea, casi el doble del límite de las WCAG. La solución no es volver a meter una barra lateral que no aporta nada: basta con fijar un ancho máximo al propio bloque de texto, aunque el resto de la página siga ocupando toda la pantalla.

Cómo fijar el ancho de línea en tu web

Arreglar esto no exige rehacer el diseño ni tocar la plantilla completa: basta con limitar el ancho del contenedor donde vive el texto del artículo. La referencia práctica que usan los equipos de desarrollo web es un ancho máximo de 70ch (70 caracteres de la fuente del sitio), o bien entre 650 y 750 píxeles para una fuente de cuerpo de 16 a 18 píxeles.

  • En temas clásicos de WordPress, el ancho máximo se añade al contenedor del artículo desde el CSS adicional del personalizador.
  • En Elementor, la sección que envuelve el texto tiene su propio ajuste de ancho, independiente del resto de la página.
  • En los temas de bloques, el ajuste se llama «ancho de contenido» y se configura una vez para toda la plantilla.
  • El cambio se aplica una sola vez a la plantilla del artículo: no hay que repetirlo pieza a pieza.

Qué cambia en el móvil y en plantillas antiguas

Conviene revisar el ajuste también en el tema responsive, porque el ancho que exige Google en móvil no es el mismo límite de caracteres que en escritorio: el dispositivo ya recorta el ancho físico, así que el margen de error es menor cuanto más pequeña es la pantalla. Si la plantilla es antigua y no ofrece ningún control de ancho de contenido, puede ser el momento de revisar cuándo conviene renovar la web completa en lugar de ir parcheando una plantilla que ya no da más de sí.

Preguntas frecuentes sobre el ancho de línea

¿Cuántos caracteres debe tener una línea de texto?

Entre 50 y 75 caracteres por línea, incluidos los espacios, con 80 como límite máximo según el criterio 1.4.8 de las WCAG 2.2. Por debajo de 50 el texto se corta demasiado y obliga a saltar de línea cada pocas palabras; por encima de 80 el ojo pierde el renglón al volver al margen izquierdo.

¿El ancho de línea afecta al SEO?

De forma indirecta, sí: un texto incómodo de leer reduce el tiempo de permanencia y aumenta el porcentaje de rebote, dos señales que Google asocia con contenido que no responde a la búsqueda. El efecto no viene de ningún factor de posicionamiento ligado al ancho de línea en sí, sino del comportamiento del lector ante un párrafo demasiado ancho.

¿Cómo se limita el ancho de línea en WordPress?

Fijando un ancho máximo al contenedor del texto del artículo, no al de toda la página: en Elementor se ajusta por sección, en los temas de bloques por los estilos globales y en temas clásicos con un par de líneas de CSS adicional en el personalizador. El cambio se hace una vez y afecta a todos los artículos.

¿El ancho de línea cambia en el móvil?

El dispositivo ya limita el ancho físico de la pantalla, así que el riesgo de superar el límite de caracteres es menor que en escritorio. Conviene revisarlo igualmente: algunas plantillas fuerzan un tamaño de fuente pequeño en móvil para que «entre» más texto por línea, lo que vuelve a disparar el número de caracteres por renglón.

Fuente: W3C – Web Content Accessibility Guidelines (WCAG) 2.2

De la idea a la acción

¿Tu despacho necesita decisiones más claras?

Cuéntanos dónde quieres llegar. Pondremos estrategia, tecnología y medición al servicio de ese objetivo.

Hablemos
El ancho de línea mal puesto aleja al lector de tu blog | IQLex