Artículo de muestra: cómo se lee una columna de texto

Esta pieza no existe para publicarse. Existe para medirse. Cada bloque que vas a encontrar más abajo —párrafos largos, encabezados de dos niveles, una cita, listas con y sin número, código intercalado en la línea, una tabla y una imagen con pie— está aquí porque la plantilla tiene que aguantarlo tarde o temprano, y es mucho más barato descubrir que un estilo no existe ahora que a media escritura del primer post real.

El texto está en español y es prosa técnica de verdad, no relleno. La diferencia importa más de lo que parece. El relleno tiene una distribución de palabras que no se parece a nada que vayas a escribir: palabras cortas, sin términos compuestos, sin números, sin nombres propios. El español corre entre quince y veinte por ciento más largo que el inglés y la escritura técnica arrastra palabras como “desidentificación” o “retrocompatibilidad” que empujan el borde derecho de la columna de una forma que el relleno nunca reproduce. Una plantilla que se ve impecable con relleno puede desarmarse con el primer párrafo real.

La medida no es una decisión de gusto

El ancho del bloque de texto se llama medida, y no lo inventó la web. Viene de la tipografía de imprenta, y su formulación moderna más citada dice que una columna única debe tener entre cuarenta y cinco y setenta y cinco caracteres por línea, con sesenta y seis como el número al que converge casi todo el mundo. La razón no es estética: es mecánica. El ojo no barre la línea de forma continua, la lee a saltos, y al terminar tiene que hacer un salto de retorno hasta el inicio de la siguiente.

Ese retorno es el punto frágil de toda la operación. Con líneas de más de ochenta caracteres el ojo lo falla: se salta una línea entera, o vuelve a caer sobre la que acaba de leer. Cuando eso pasa dos o tres veces en una página, el lector no piensa “esta columna es muy ancha”; piensa que el texto es pesado y se va. Con líneas demasiado cortas pasa lo contrario: hay tantos retornos que el ritmo se rompe y la lectura se vuelve entrecortada.

La medida es de las poquísimas decisiones de una plantilla que puedes defender con un número en una junta. Todo lo demás en esta página es criterio; esto es mecánica del ojo.

La fórmula, en las dos direcciones

La regla de cuarenta y cinco a setenta y cinco caracteres es útil pero no se puede escribir en una herramienta de diseño, porque ahí se escriben píxeles. La traducción es directa: el ancho máximo es igual a los caracteres por línea que buscas, multiplicados por el tamaño de fuente y por un factor. Al revés, para saber qué medida tienes hoy, divides el ancho entre el producto del factor y el tamaño.

El factor es la pieza que casi nadie explica: es el ancho medio de un carácter expresado como fracción del tamaño de fuente. No es una constante universal, porque una geométrica ancha ocupa mucho más por letra que una condensada. Una neo-grotesca ronda el 0.50; una geométrica ancha sube a 0.55 o 0.58; una serif de texto baja a 0.48; una monoespaciada se va hasta 0.60.

Y hay una trampa que se cobra siempre: el ancho máximo normalmente incluye el relleno interno. Si el contenedor mide seiscientos píxeles y tiene veinte de relleno a cada lado, el texto solo mide quinientos sesenta, y la cuenta cambia. Por eso la comprobación real no es la fórmula: es medir el nodo de texto, nunca el contenedor.

El interlineado es lo que más se nota al corregirlo

Si tuvieras que arreglar una sola cosa de una plantilla heredada, sería esta. El valor que traen por defecto casi todas las herramientas de diseño ronda 1.2 o 1.4, y ese número no es de lectura: es de interfaz. Sirve para una etiqueta de botón o para el encabezado de una tabla, donde el texto ocupa una o dos líneas y lo que importa es la compacidad. En un párrafo de nueve líneas produce una masa gris en la que las líneas se pegan y el ojo pierde la pista.

El rango sano para lectura larga va de 1.5 a 1.7. Suena a poca diferencia escrito así, pero a dieciocho píxeles la distancia entre 1.4 y 1.65 son casi cinco píxeles por línea, y en una pieza de dos mil palabras eso son varios centenares de píxeles de aire acumulado. El texto deja de verse como un bloque y empieza a verse como renglones.

El error contrario existe y es menos obvio: pasarse. Un interlineado de 2.0 —que es el que trae más de una plantilla de blog de fábrica— separa tanto las líneas que dejan de leerse como un párrafo. Cada renglón se vuelve una unidad suelta, el ojo pierde la continuidad vertical y el texto se siente aireado pero desarticulado. Demasiado aire hace exactamente el mismo daño que la falta de aire, solo que se ve mejor en una captura.

• Debajo de 1.4, las líneas se pegan y el párrafo se lee como una mancha.

• Entre 1.5 y 1.7 está el rango donde la lectura larga funciona.

• Por encima de 1.8, los renglones se sueltan y se pierde la continuidad.

• El tamaño y el interlineado se mueven juntos: si subes uno, recalcula el otro.

El espaciado entre párrafos va amarrado

El espacio entre un párrafo y el siguiente debería estar entre 0.75 y 1 vez el interlineado. Con dieciocho píxeles y un interlineado de 1.65, eso son entre veinticuatro y veintiocho. El acoplamiento es la parte que se olvida: si dejas el espaciado de párrafo en veinte y subes el interlineado, la separación entre párrafos queda por debajo de la separación entre líneas, y el resultado es que los párrafos dejan de leerse como bloques distintos. Se ven como un solo muro con saltos aleatorios.

Los encabezados son la navegación real de la pieza

El hallazgo de seguimiento ocular que más sirve para diseñar esta página no es el famoso patrón en F, sino uno menos citado: cuando el contenido está bien estructurado, el ojo recorre los encabezados y se salta el cuerpo entero, bajando a leer solo cuando un título le promete lo que anda buscando. La lectura, en la práctica, empieza por el índice implícito que forman los encabezados.

Eso cambia dos cosas a la vez. Cambia cómo escribes un encabezado —tiene que prometer contenido, no titular con ingenio— y cambia cómo lo diseñas. El contraste entre un encabezado de segundo nivel y un párrafo tiene que ser suficiente para verse de reojo, sin leer: alrededor de 1.5 veces el tamaño del cuerpo es el piso, y el peso ayuda tanto como el tamaño.

La parte contraintuitiva es el espacio. Lo que construye las capas visibles no es el aire debajo del encabezado, es el aire encima. Un encabezado pegado al párrafo que lo precede y separado del que introduce se lee como el cierre del bloque anterior, no como la apertura del siguiente. La regla práctica es dar al encabezado el doble de aire arriba que abajo, y esa sola corrección hace que una pieza larga se escanee sin esfuerzo.

1. Escribe el encabezado como una promesa concreta, no como un juego de palabras.

2. Dale al menos 1.5 veces el tamaño del cuerpo y un peso claramente distinto.

3. Ponle el doble de aire arriba que abajo.

4. Al terminar, oculta el cuerpo y lee solo los encabezados: si no se entiende el argumento, el problema no es el diseño, es la estructura del texto.

Lo que no se pone

La tentación de un diseñador en su propia página de blog es hacer que se vea diseñada. Es la trampa entera del ejercicio. Cada gesto de composición que metas —una entrada animada, una retícula asimétrica, una tipografía expresiva en el cuerpo— compite con la lectura, que es lo único que esta pantalla tiene que producir. Esta es la página donde el criterio se demuestra quitando.

Y hay una restricción dura, no estética. Los rastreadores de los modelos de lenguaje leen HTML crudo y no ejecutan JavaScript. Nada del cuerpo puede vivir detrás de un acordeón, de una pestaña o de carga diferida: si un contenido solo aparece al interactuar, para efectos de citación no existe. Lo mismo aplica a poner código en una captura de pantalla en lugar de en un bloque de <pre> real.

La vara más honesta que tienes es el modo lectura del navegador. Abre tu propio post ahí. Si se lee mejor que en tu página, sobra la mitad de lo que le pusiste.

Los números, juntos

Vale la pena tener los rangos en un solo lugar, porque casi todos están acoplados entre sí y moverlos por separado es la forma más rápida de romper una plantilla que ya funcionaba. Esta tabla es la referencia corta; el resto del artículo es la explicación de por qué cada rango es el que es.

Ninguno de estos números es una opinión y ninguno es una ley. Son el rango donde la lectura larga funciona para la mayoría de la gente la mayor parte del tiempo, que en diseño de producto es toda la certeza que uno llega a tener.

Una imagen que sí suma

El dato de que los artículos con imágenes duplican vistas viene de medir piezas de marketing optimizadas para compartirse, no textos técnicos que alguien abrió porque tenía un problema concreto. En una pieza como esta, una foto decorativa no ayuda: interrumpe. Lo que sí suma es un diagrama propio que explique algo que el párrafo no alcanza a explicar, y una imagen necesita pie, altura reservada y texto alternativo, o cobra más de lo que aporta.

Una imagen de prueba, puesta aquí para verificar tres cosas: que el ancho respeta la medida de la columna, que la altura queda reservada antes de cargar, y que el pie se distingue del cuerpo sin gritar.

Con eso quedan cubiertos todos los bloques que la plantilla tiene que resolver antes del primer post. Si alguno se ve mal aquí, se ve mal en todo lo que publiques después.

La comprobación que le gana a la fórmula

Todo lo anterior son rangos defendibles, y los rangos se verifican en dos minutos con el texto que de verdad vas a publicar. El procedimiento es aburrido a propósito: pegas un párrafo tuyo, miras dónde corta una línea completa, y cuentas sus caracteres con espacios incluidos. Si cae entre cuarenta y cinco y setenta y cinco, listo. Si pasa de ochenta, el ojo va a empezar a perder el retorno de línea aunque la fórmula diga que estás bien.

Después la lees en el teléfono, que es donde va a ocurrir la mitad de tus lecturas y donde la medida se resuelve sola porque la pantalla es angosta. Lo que hay que revisar ahí no es el ancho sino el tamaño: un cuerpo que funciona a dieciocho píxeles en escritorio puede quedarse corto en una pantalla que sostienes a treinta centímetros.

Y al final, la prueba que ninguna métrica sustituye: léela entera, de corrido, sin corregir nada. Si llegas al final sin saltarte nada, la plantilla hizo su trabajo. Si te descubres barriendo hacia abajo a media pieza, algo en esta página te está cansando, y vale la pena averiguar qué antes de escribir el primer post de verdad.