Longitud de línea en diseño web: cómo definir el ancho de los textos
Cómo definir la longitud de línea en diseño web para mejorar la legibilidad y cómo aplicarla correctamente con CSS y en WordPress.
En una pantalla pequeña, el espacio disponible limita de forma natural el ancho de los textos. El problema aparece en escritorio, cuando el contenedor crece y los párrafos se extienden con él hasta ocupar una línea excesivamente larga.
Aprovechar todo el ancho disponible puede parecer una decisión lógica. Tenemos espacio, así que lo utilizamos. Pero no es una buena idea. Una imagen, una galería o un listado de productos pueden necesitar un contenedor amplio, pero un texto de lectura continuada funciona mejor dentro de una columna más estrecha.
La longitud de línea forma parte del sistema tipográfico. Debemos decidirla junto con la familia, el tamaño, el peso y el interlineado, y comprobarla con el contenido que finalmente se va a publicar.
En este artículo, vamos a ver qué es la longitud de línea, cómo afecta a la lectura, qué relación mantiene con el tamaño y el interlineado, y cómo podemos controlarla con CSS y WordPress.
El texto no debe ocupar todo el espacio disponible
Muchos diseños parten de un contenedor que establece el ancho máximo de la página. Dentro de ese contenedor colocamos imágenes, secciones, columnas, formularios y textos. Y si todos los elementos heredan ese ancho, los párrafos pueden acabar ocupando mucho más espacio del que necesitan.
Sin embargo, dentro de una página conviven varias longitudes:
- El ancho predeterminado es el tamaño por defecto que respeta el contenedor principal del texto. Controla cuánto debe recorrer el ojo en cada línea.
- El ancho amplio extiende el bloque más allá de los márgenes normales del contenido, pero sin llegar a ocupar toda la pantalla. Permite mostrar imágenes, galerías, tablas o composiciones de rejilla (grids), con una longitud más grande que la del texto de los párrafos.
- El ancho completo hace que el bloque ocupe todo el ancho de la pantalla de lado a lado (de extremo a extremo del navegador o viewport.
Una página puede utilizar un contenedor de 80rem para sus composiciones amplias y limitar los párrafos a una medida mucho menor. Por ejemplo, 46rem.
El espacio que queda a los lados del texto no está desaprovechado. Ese margen ayuda a separar la lectura del resto de la interfaz, refuerza la jerarquía y permite que el usuario avance con mayor comodidad. Pero su función más importante es limitar el ancho de las líneas de texto para que sea más fácil de leer.
Qué es la longitud de línea
La longitud de línea, también llamada ancho de línea, es el espacio horizontal que ocupa cada renglón de texto. Indica cuánto texto recorre el ojo antes de regresar al margen inicial.
En tipografía tradicional se utiliza el término inglés measure. En español prefiero hablar de «longitud de línea» o «ancho de línea», porque describe mejor la decisión que estamos tomando en una interfaz.
Podríamos expresarlo mediante una medida concreta, pero resulta más útil observar cuántos caracteres caben aproximadamente en cada línea, incluidos los espacios.
Esta cantidad no depende únicamente del ancho del contenedor.
Dos tipografías configuradas con el mismo font-size pueden producir líneas muy diferentes. Una fuente con caracteres anchos necesitará más espacio que otra condensada. También influyen el peso, el espaciado entre letras, la proporción de cada carácter y las palabras utilizadas en el idioma del contenido.
Por este motivo, un contenedor de 700px no nos dice por sí solo si el texto se va a leer bien. Tendríamos que conocer también la tipografía, su tamaño y la composición real de los párrafos.
Como referencia inicial, en diseño editorial se suele trabajar con un rango aproximado de 45 a 75 caracteres por línea. También se cita con frecuencia una medida cercana a los 66 caracteres para textos de lectura prolongada. Son puntos de partida, no medidas universales: el resultado debe revisarse con la fuente y el contenido real del proyecto.
Richard Rutter recoge este rango y explica que procede, más que de una ley científica cerrada, de siglos de práctica tipográfica.
Para diseño de interfaces, facilitar al máximo la lectura de los usuarios importa y mucho: una página puede ser técnicamente legible pero si da pereza leerla, habremos perdido al usuario.
Las líneas demasiado largas o demasiado cortas interrumpen la lectura
Los dos extremos obligan al lector a realizar un esfuerzo adicional.
Al leer no recorremos las letras de forma continua. Los ojos avanzan mediante pequeños saltos y fijaciones. Al llegar al final de una línea hacemos un movimiento mayor para localizar el comienzo de la siguiente.
Cuando una línea es muy larga, el ojo recorre una gran distancia horizontal. Al llegar al final, tiene que localizar el comienzo exacto de la siguiente. Cuanto mayor es esa distancia, más fácil resulta repetir una línea, saltarse otra o perder momentáneamente el punto de lectura.
Este problema se hace evidente en monitores grandes. Un párrafo puede parecer ordenado al observar la página completa, pero resultar incómodo cuando intentamos leer varias líneas seguidas.
Las líneas excesivamente cortas también son difíciles de leer. El ojo debe cambiar de renglón constantemente, las frases quedan fragmentadas y el bloque crece mucho en vertical. Además, aumentan las posibilidades de que aparezcan palabras aisladas y cortes poco naturales.
Por tanto, reducir el ancho no mejora indefinidamente la legibilidad. Buscamos una medida que permita avanzar por el texto con continuidad y regresar con facilidad al inicio de la línea siguiente.
Los 80 caracteres son un límite de referencia
Las recomendaciones de accesibilidad establecen un máximo, pero no determinan el ancho óptimo de todos los textos.
El criterio 1.4.8 de WCAG 2.2, de nivel AAA, indica que debe existir un mecanismo para que los bloques de texto no superen los 80 caracteres por línea (40 en escrituras CJK). La explicación del criterio señala que las líneas largas pueden dificultar que algunas personas mantengan su posición y sigan el flujo del texto.
Este criterio a veces se interpreta mal. No significa que toda web que supere 80 caracteres incumpla WCAG AA, ni que debamos convertir 80 en una frontera automática. Nos sirve, eso sí, para entender que el ancho de lectura forma parte de la accesibilidad del texto.
Conviene distinguir tres referencias:
- El límite máximo evita que las líneas alcancen una longitud desproporcionada.
- El rango orientativo ofrece un punto desde el que empezar a diseñar.
- La medida definitiva depende del sistema tipográfico y del contenido real.
Para un artículo o una página con bastante lectura, podemos empezar probando una medida de entre 60 y 70 caracteres. Después debemos observar cómo se componen los párrafos, cuánto espacio ocupa cada palabra y con qué facilidad pasamos de una línea a otra.
Puede que una fuente ancha funcione mejor cerca del extremo inferior del rango. Una tipografía más estrecha puede admitir una columna algo mayor. La cifra ayuda a orientar la decisión, pero siempre hay que hacer la prueba visual.
Cada tipo de texto necesita su propia medida
Una regla adecuada para un artículo puede resultar innecesaria o contraproducente en otro componente.
No leemos del mismo modo un artículo de 2000 palabras, una descripción comercial, una tarjeta de producto o un mensaje de error. La longitud de línea debe responder a la función del contenido.
Artículos y páginas de lectura prolongada
Los textos largos necesitan una columna estable. El lector va a recorrer muchas líneas consecutivas, por lo que cualquier dificultad para localizar el siguiente renglón se repite durante toda la página.
En estos casos conviene limitar expresamente el ancho de lectura, aunque las imágenes, los vídeos o las tablas puedan utilizar un ancho más amplio.
Tampoco conviene forzar tablas o bloques de código a una longitud de línea pensada para prosa. Yo suelo distinguir entre un ancho de lectura y un ancho de composición. El segundo puede ser mucho mayor para permitir grids, imágenes, tablas o bloques a varias columnas. El primero se reserva para los textos que realmente necesitan lectura continua.
Páginas comerciales
Una página de servicios o una landing page suele combinar títulos, párrafos breves, listas, imágenes y llamadas a la acción. Cada bloque puede tener una composición diferente.
Un párrafo de tres líneas no exige la misma regularidad que un artículo extenso, pero tampoco debería estirarse hasta ocupar el ancho completo de una sección solo porque el espacio esté disponible.
Podemos utilizar columnas más estrechas para los textos y reservar el resto del espacio para imágenes, datos, testimonios u otros elementos que apoyen el mensaje.
Entradillas y textos destacados
Las entradillas suelen utilizar un tamaño mayor que el cuerpo. Como consecuencia, caben menos caracteres dentro de la misma anchura.
Una medida más contenida puede ayudar a que el texto conserve su función de apertura y no se convierta en un bloque ancho y pesado. En estos casos también debemos revisar el número de líneas y la relación con el título que aparece encima.
Tarjetas y componentes
En una tarjeta, el ancho viene determinado normalmente por el grid. Puede que no necesitemos establecer otro límite, pero sí debemos comprobar qué ocurre cuando el componente crece o cambia de columna.
Una tarjeta que funciona bien dentro de un grid de tres columnas puede producir líneas demasiado largas cuando ocupa todo el ancho en otro contexto. Si el componente es reutilizable, su diseño debe contemplar esos cambios.
Formularios
Los campos de formulario deben ocupar el ancho máximo del contenedor, independientemente del tipo de dato que esperamos. Un campo para el código postal, aunque solo tenga 5 caracteres, debe tener el mismo ancho que el de la dirección completa, ya que ponemos un único campo por línea aunque el dato que va a introducir el usuario sea corto.
Por eso, debemos limitar el ancho del contenedor del formulario para que no sea excesivo, ya que cuando el usuario escriba en las áreas de texto, también debe poder leer cómodamente lo que ha escrito.
Las instrucciones, los textos de ayuda, las explicaciones sobre datos sensibles y los mensajes de error también tienen que tener un ancho limitado.
Títulos
Los títulos no siguen las mismas reglas que los párrafos. Contienen pocas palabras, utilizan un tamaño mayor y se leen como una unidad.
En ellos debemos comprobar cuántas líneas ocupan, dónde se producen los cortes y si queda una palabra aislada. La propiedad text-wrap, permite mejorar la distribución de esas líneas, pero actúa sobre un ancho que antes hemos tenido que definir.
El tamaño, la longitud de línea y el interlineado funcionan juntos
Cuando modificamos una de estas variables, debemos revisar las otras dos.
Tim Brown plantea el bloque de texto como una relación entre cuatro variables: tipografía, tamaño, longitud de línea e interlineado. Si cambiamos una, las demás dejan de estar exactamente en el mismo equilibrio.
El tamaño de la fuente determina cuántos caracteres caben dentro de un contenedor. Si aumentamos el cuerpo del texto y mantenemos el ancho, las líneas se acortan. Si reducimos el tamaño, caben más palabras y la medida aumenta.
La familia tipográfica produce un efecto parecido. Podemos sustituir una fuente por otra sin cambiar ningún valor CSS y obtener un bloque más alto o más ancho porque las proporciones de los caracteres son diferentes.
El interlineado ayuda al ojo a distinguir un renglón del siguiente. Cuando las líneas son largas, puede necesitar algo más de espacio para facilitar el regreso al margen izquierdo. Cuando son cortas, un interlineado excesivo puede separar tanto los renglones que dejen de percibirse como parte del mismo párrafo.
Por eso no deberíamos decidir estos valores por separado:
- Elegimos una tipografía adecuada para el contenido.
- Definimos un tamaño legible.
- Ajustamos la longitud de línea.
- Revisamos el interlineado con varios párrafos reales.
- Volvemos a comprobar el conjunto en diferentes tamaños de pantalla.
En el artículo sobre clamp() vimos cómo hacer que el tamaño tipográfico se adapte dentro de un rango. Esa fluidez también cambia el número de caracteres que caben en cada línea, de modo que debemos revisar la medida durante todo el recorrido entre el tamaño mínimo y el máximo.
Cómo controlar la longitud de línea con CSS
Las unidades relativas permiten relacionar el ancho del bloque con la tipografía que contiene.
Quizá puedas pensar que es buena idea limitar un texto mediante px:
.texto-lectura {
max-width: 720px;
}Este valor puede funcionar para una fuente y un tamaño concretos. Sin embargo, deja de representar la misma cantidad de texto cuando cambiamos la tipografía, aumentamos su tamaño o el usuario modifica sus preferencias.
Para respetar las preferencias del usuario y facilitar la lectura, nunca usamos píxeles para la tipografía. CSS ofrece unidades más relacionadas con el contenido.
La unidad ch
La unidad ch toma como referencia la medida de avance del carácter «0» de la fuente utilizada. Por tanto, escala cuando cambia el tamaño tipográfico y también responde a las proporciones de la familia.
Podemos utilizarla para establecer un ancho máximo aproximado:
.texto-lectura {
max-inline-size: 65ch;
}Esto no garantiza que cada línea contenga exactamente 65 caracteres. La «i» ocupa menos que la «m», las palabras tienen longitudes diferentes y cada fuente distribuye el espacio a su manera.
ch proporciona una medida vinculada a la tipografía. El resultado seguirá necesitando una comprobación visual.
max-inline-size frente a max-width
La propiedad max-inline-size establece el tamaño máximo de un elemento en el eje de escritura. En un documento escrito horizontalmente se corresponde con max-width; en un modo de escritura vertical actúa sobre el otro eje.
Podemos crear una clase para la columna de lectura:
.texto-lectura {
inline-size: 100%;
max-inline-size: 65ch;
margin-inline: auto;
}Con estas declaraciones, el bloque puede reducirse cuando el viewport no ofrece espacio suficiente, deja de crecer al alcanzar 65ch y se centra dentro de su contenedor.
También podríamos alinearlo a uno de los lados eliminando margin-inline: auto. El ancho de lectura y la posición del bloque son decisiones independientes.
Cuándo utilizar rem
La unidad rem se basa en el tamaño tipográfico del elemento raíz. Resulta adecuada para definir tamaños de texto, espaciados y anchuras generales que deben escalar con las preferencias del usuario.
Por ejemplo, podemos establecer el ancho normal del contenido en 46rem y utilizar 65ch dentro de él para la columna de lectura. El primer valor organiza la página; el segundo se relaciona más directamente con la composición del texto.
No necesitamos aplicar clamp() a todos los anchos
Podríamos intentar hacer fluida la medida con una declaración como esta:
.texto-lectura {
max-inline-size: clamp(45ch, 70%, 75ch);
}Sin embargo, max-inline-size establece un máximo. No garantiza que el bloque alcance el valor mínimo de 45ch cuando el espacio disponible es menor.
Además, el propio contenedor ya obliga al texto a reducirse en pantallas estrechas. En la mayoría de los casos, un máximo expresado en ch ofrece el comportamiento que necesitamos:
.texto-lectura {
inline-size: 100%;
max-inline-size: 65ch;
}Conviene utilizar la función clamp() cuando exista una interpolación real que queramos controlar, no como una capa adicional en cada propiedad.
Cómo definir el ancho de lectura en WordPress
El ancho global del contenido establece una base, pero cada bloque puede necesitar una medida diferente.
En un tema de bloques podemos definir los anchos principales desde theme.json:
{
"version": 3,
"settings": {
"layout": {
"contentSize": "46rem",
"wideSize": "80rem"
}
}
}contentSize establece el ancho máximo predeterminado del contenido. wideSize determina el máximo de los bloques que utilizan la alineación ancha. Los bloques con alineación completa pueden salir de ambos límites.
Esta configuración crea una estructura coherente:
- Los bloques normales utilizan el ancho de contenido.
- Las imágenes, galerías o composiciones que lo necesitan pueden utilizar el ancho amplio.
- Algunos elementos pueden extenderse hasta los bordes de la página.
contentSize no siempre coincide con la columna de lectura
Un ancho de 46rem puede funcionar como contenedor general, pero no controla con exactitud cuántos caracteres aparecen en una línea. El resultado dependerá de la fuente y del tamaño configurados.
Además, dentro del contenido normal puede haber bloques que necesiten más espacio que un párrafo:
- Una tabla.
- Una galería.
- Un grupo de tarjetas.
- Una cita con una composición especial.
- Un formulario con varios campos.
Podemos mantener el ancho general y crear dentro una columna específica para los textos de lectura prolongada.
Utilizar un bloque Grupo
En el editor de bloques, una solución práctica consiste en envolver el contenido textual en un bloque Grupo y aplicarle una clase CSS:
.is-style-reading-width {
inline-size: 100%;
max-inline-size: 65ch;
margin-inline: auto;
}Después podemos añadir is-style-reading-width en el campo de clases CSS adicionales del bloque.
Aplicar el límite al Grupo suele ser más limpio que repetir la misma regla en cada párrafo, encabezado y lista. Todos los elementos comparten la columna y conservan su alineación dentro del conjunto.
También podemos crear una variación de estilo para el bloque Grupo con un nombre reconocible, como «Ancho de lectura» o «Columna de lectura». De esta manera, quien edita la página puede elegirla desde la interfaz sin recordar el nombre de la clase.
No todos los textos necesitan una regla adicional
Una tarjeta, una columna lateral o un formulario pueden tener ya un ancho suficientemente reducido por su propio layout. Añadir otro max-inline-size podría estrechar el contenido demasiado.
La regla debe responder a un problema observable. Primero revisamos cómo se comporta el texto en los distintos contextos y después limitamos aquellos bloques que pueden crecer por encima de una medida cómoda para la lectura.
En móvil, el problema suele ser el contrario
En un teléfono, el viewport ya limita mucho la longitud de línea. Con un tamaño base razonable es habitual quedarse alrededor de cuarenta caracteres por línea. Ahí el error suele aparecer cuando añadimos márgenes laterales demasiado grandes.
Antes de bajar el tamaño del texto, revisaría el padding del contenedor. En una pantalla estrecha, perder varios rem a cada lado puede dejar líneas de dos o tres palabras y convertir el párrafo en una escalera interminable.
En tablet, el viewport empieza a ensancharse, pero todavía es frecuente dejar que el texto ocupe todo el ancho. Es uno de los puntos donde merece la pena comprobar explícitamente que el bloque sigue dentro de un rango cómodo.
Comprueba la medida con contenido real
La longitud correcta se descubre leyendo el texto, no observando un rectángulo vacío en Figma.
El contenido de prueba debería incluir algo más que un párrafo breve de Lorem ipsum. Necesitamos comprobar cómo responde la columna ante las situaciones que aparecerán en la web:
- Párrafos cortos y largos.
- Palabras extensas.
- Negritas y cursivas.
- Enlaces.
- Listas.
- Cifras y fechas.
- Diferentes niveles de encabezado.
- Textos traducidos.
También debemos revisar el diseño con el tamaño mínimo y máximo de la tipografía fluida. Una columna que funciona bien en escritorio puede quedar demasiado estrecha cuando aumenta el cuerpo, y una medida correcta en móvil puede alargarse demasiado al llegar a una pantalla grande.
Podemos realizar una comprobación sencilla:
- Abrimos una página con contenido representativo.
- Elegimos un párrafo de varias líneas.
- Contamos aproximadamente los caracteres de una línea intermedia.
- Leemos varios renglones seguidos.
- Observamos si el ojo encuentra con facilidad el inicio de la siguiente línea.
- Ajustamos el ancho junto con el tamaño y el interlineado.
Por último, debemos aumentar el zoom, cambiar el tamaño de la ventana y comprobar que el contenido se reorganiza sin provocar scroll horizontal. El criterio 1.4.10 (Reflow) de WCAG 2.2 establece como referencia un ancho equivalente a 320 píxeles CSS para el contenido vertical.
Elige un ancho de línea para que facilite la lectura, no para que ocupe todo el espacio disponible
Un contenedor amplio nos permite organizar la composición, pero no determina cuánto debe ocupar cada párrafo. La longitud de línea responde a la tipografía, al tamaño, al interlineado, al contenido y a la forma en la que se va a leer.
Los caracteres por línea proporcionan una referencia útil. Las unidades relativas nos ayudan a trasladarla a CSS. WordPress nos permite diferenciar entre el ancho completo, el ancho amplio y una columna específica de lectura: ancho del contenido.
La decisión final llega al probar el sistema completo. Cuando la medida funciona, el usuario no piensa en el ancho, los saltos de línea ni la distancia que recorre el ojo. Simplemente puede seguir leyendo. Y ese es nuestro objetivo como diseñadores.
Te lo ha contado
Ana Cirujano
Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.
