Maquetación editorial en la web: 5 recursos del papel que funcionan

La maquetación editorial organiza la página alrededor de un orden de lectura tomado de las revistas y los periódicos: una retícula de columnas fija las alineaciones, la jerarquía tipográfica decide qué se lee primero y la escala de las imágenes marca el tono. En la web de un producto es la alternativa a apilar secciones a todo el ancho hasta que la página se acaba.

Hace falta sobre todo cuando, junto a las páginas comerciales, publicas contenido largo: documentación, changelog, casos de clientes, un blog. El síntoma que lleva a buscarla es una página donde todas las secciones parecen igual de importantes, así que ninguna llega. Una maquetación editorial que funciona da tres o cuatro puntos de entrada y mantiene el hilo del argumento.

Por qué la página de revista sigue ganando a la página de secciones apiladas

Quien maqueta en papel trabaja desde siempre para un lector que no lee. Las analíticas confirmaron después que en la web ese lector es el mismo. Sobre 59.573 vistas de página, Nielsen Norman Group midió que en una visita media hay tiempo de leer como máximo el 28% de las palabras, y que la cifra realista es el 20%. Se llega a la mitad de la información solo en páginas de 111 palabras o menos, y cada 100 palabras extra compran 4,4 segundos de atención. El estudio de eye-tracking de 2006 sobre el barrido en forma de F describió en qué se gasta ese tiempo: dos pasadas horizontales y una bajada vertical por el margen izquierdo.

La doble página de una revista está construida justo para esa persona. Titular, pie de foto, cita destacada y primera línea del texto cuentan la historia cada uno por su cuenta, porque en el quiosco una portada que había que leer entera no vendía. El aparato formal detrás de ese oficio lo ordenó Josef Müller-Brockmann en Grid Systems in Graphic Design (1981), que plantea retículas de columnas, retículas modulares y retículas de base como método de trabajo y no como estilo.

Los cinco recursos que aguantan en pantalla

1. La retícula como regla compartida

En la mayoría de webs de producto la retícula es un contenedor con un ancho máximo: lo que hay dentro se alinea consigo mismo. En el trabajo editorial la retícula es una regla a la que cada elemento se refiere: el titular arranca en la columna uno, el pie de foto va en la columna cinco, la imagen se sale del margen porque alguien lo decidió.

En CSS eso lo hace posible subgrid: los elementos anidados heredan las pistas del padre en vez de inventarse las propias. Llegó a todos los motores (Firefox 71, Safari 16, Chrome y Edge 117) y hoy se puede usar en todos los navegadores principales.

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.5rem, 1fr)
    [text-start] repeat(8, minmax(0, 8ch))
    [text-end] minmax(1.5rem, 1fr) [full-end];
  column-gap: 1.5rem;
}
.article > * { grid-column: text; }
.article > figure.wide { grid-column: full; }
.article > .aside { grid-column: text-end / full-end; }

Una retícula, tres colocaciones, ningún wrapper anidado. Conviene nombrar las líneas en vez de contarlas por mantenimiento: en seis meses el número de columnas ya no le dirá nada a nadie, y grid-column: text seguirá diciendo lo que hace.

2. Un solo elemento dominante por pantalla

Una doble página tiene un único punto focal y todo lo demás lo acompaña. Las páginas de producto suelen tener cuatro compitiendo: titular, etiqueta, ilustración y botón, todos al mismo volumen. Se arregla con contraste de escala, no con color: eliges el elemento que está al menos al triple del cuerpo de texto y dejas el resto dentro de dos pasos desde la base. La mecánica de fondo la escribimos en jerarquía visual sin color y en escala tipográfica para UI de producto.

3. El pie de foto como segunda entrada

En papel los pies de foto se escriben para quien no va a leer el artículo: llevan una afirmación, no la descripción de la imagen. En las webs de producto las imágenes salen casi siempre sin pie, así que a quien barre la página solo le quedan los H2 donde pararse. Ocho a dieciséis palabras, cada una una frase que se sostiene sola, marcadas como <figcaption> dentro de una <figure> para que la tecnología asistiva asocie texto e imagen. Qué debería aparecer en esas fotos lo tratamos en la shot list de fotografía para software.

4. El margen tratado como estructura

El papel tiene un borde de corte, así que el margen es una decisión medida en milímetros y mantenida en toda la publicación. En la web el margen exterior es a menudo lo que le sobra al contenedor después de los paddings. Hay que definirlo como token, mantenerlo en todos los breakpoints en relación fija con la medida de línea y dejar que solo lo rompan elementos declarados. Una imagen a sangre se lee como decisión solo si todos los demás bloques respetan ese mismo borde.

5. Citas destacadas y capitulares como señales de entrada

La cita destacada saca una frase del texto y la coloca entre dos párrafos: da un apoyo a quien barre entre dos titulares. La capitular marca dónde empieza la lectura larga. Son dos señales tipográficas con la misma forma de romperse: más de una por pantalla y dejan de significar "empieza aquí". La cita tiene que repetir texto que ya está en el artículo y nunca introducir una afirmación nueva, porque los buscadores y los rastreadores de IA la leen como cuerpo de texto.

Lo que no se traslada

• La geometría fija de la página. Una doble página es un rectángulo conocido en un tamaño conocido. Una página web es una columna de altura desconocida en un viewport que no controlas, así que cada composición hay que reescribirla como regla y no como posición.
• Las páginas enfrentadas. Sin pliegue central, sin asimetría entre izquierda y derecha, sin composición que se cierre en dos superficies a la vez.
• El texto a varias columnas. El multicol de CSS en una página con scroll lleva al lector al final de la primera columna y otra vez arriba, a la segunda. Sirve para listas cortas, pies de página y hojas de estilo de impresión.
• Distancia de lectura y resolución. Un pie de foto en cuerpo 9 funciona a 35 centímetros sobre papel estucado. El mismo tamaño óptico en pantalla es lo primero que señala una auditoría de accesibilidad, y con la Ley Europea de Accesibilidad ese aviso ya tiene consecuencia legal.
• Las excepciones hechas a mano. Un director de arte recompone cada doble página. Una web de producto genera cientos de páginas desde una sola plantilla, así que cualquier recurso que pida colocación manual se cae en dos releases.

El CSS que sostiene el oficio editorial en 2026

Cuatro propiedades hacen buena parte del trabajo que antes pedía un diseñador metido en el archivo de layout.

• text-wrap. balance en los titulares para igualar la última línea y pretty en el cuerpo de texto para quitar líneas huérfanas. Según MDN y caniuse, pretty está en Chrome y Edge desde la 117 y en Safari desde la 26, mientras Firefox vuelve al ajuste normal sin daño visible.
• text-box-trim y text-box-edge. Quitan el espacio de las métricas de la fuente arriba y abajo de la línea, que es la razón de que un titular nunca parezca centrado en vertical al lado de un icono. MDN documenta la pareja y caniuse da soporte en Chrome y Edge desde la 133 y en Safari desde la 18.2, con Firefox aún fuera en septiembre de 2026. Úsalo como mejora sobre una base de márgenes, no como sustituto.
• shape-outside. El texto que rodea una imagen no rectangular es el único efecto de papel seguro en la web desde hace años: está en todos los motores desde enero de 2020. La función shape() entró en Baseline en febrero de 2026, así que el trazado se escribe en unidades CSS con calc() y custom properties en lugar de sintaxis SVG.
• initial-letter. Capitulares de verdad sin trucos de float, y la única propiedad de esta lista que seguimos poniendo detrás de una condición. MDN registra Safari 17 y Chrome 133, sin Firefox: hace falta un fallback con float o una feature query.

Cómo mantener el oficio accesible

La retícula separa el orden visual del orden del documento, y ahí es donde las maquetaciones editoriales se rompen para quien navega con teclado o con lector de pantalla. El DOM se mantiene en orden de lectura y los desplazamientos se hacen con grid-area, nunca al revés. Un pie de foto que en pantalla aparece encima del titular debe seguir a la imagen en el marcado.

La capitular trae un riesgo concreto: una primera letra ampliada dentro de su propio elemento parte la primera palabra en dos cadenas, y algunos lectores de pantalla la anuncian como letra suelta. La base de conocimiento DAISY sobre publicación accesible recomienda dejar el carácter dentro del texto del párrafo y darle estilo con ::first-letter o initial-letter: la palabra queda entera para la tecnología asistiva y para quien copia el texto.

La medida de línea manda por encima de todo lo demás. Una retícula editorial con líneas de 110 caracteres se lee peor que una sola columna de 70, el cálculo que hicimos en longitud de línea e interlineado.

El orden en que trabajamos

Cuando hay que rehacer así la web de un producto, la secuencia importa más que los recursos. Primero fijamos la medida de línea, porque decide el ancho de columna y con él la retícula. Después la retícula recibe líneas con nombre y se convierte en token, así la colocación deja de ser una decisión página a página. Luego la regla del elemento dominante entra en la librería de componentes como restricción, uno por pantalla. Se escriben los pies de foto de todas las imágenes que ya existen, y ese suele ser el momento en que la mitad resultan decorativas y se caen. Solo después entran los recursos de papel: citas destacadas, imágenes a sangre, capitular en las plantillas de texto largo.

En ese orden la maquetación editorial es un sistema de restricciones y una plantilla la sostiene durante cientos de páginas. En el orden contrario es un adorno encima de una página de secciones apiladas, y la primera actualización de contenido sin dirección de arte la desmonta. Esa es la diferencia real entre una web de producto que se lee como una publicación y otra que copió el aspecto para un lanzamiento.