Editorial Craft Bible
Retícula compositiva y jerarquía visual
Inicio Composición y layout visual Retícula compositiva y jerarquía visual
Composición y layout visual

Retícula compositiva y jerarquía visual

12 reglas Josef Muller-Brockmann, Grid Systems in Graphic DesignMuller-Brockmann, Grid Systems · Karl Gerstner, Designing ProgrammesMuller-Brockmann, Grid Systems · Emil Ruder, TypographieMuller-Brockmann, Grid Systems · Bringhurst, Elements of Typographic Style
33

Retícula compositiva y jerarquía visual

12 reglas
357

Define la retícula antes de maquetar

Fija el número de columnas, el ancho de gutter y los márgenes de página en la fase de estructura, antes de que aterrice un solo bloque de contenido. Improvisar la retícula página por página es justo lo que produce la deriva, donde nada alinea a lo largo del documento. Decide columnas, gutter en mm y márgenes una vez, y luego vacía el contenido en ese esqueleto.

fase de estructura: columnas + gutter + margen (fijos)
fase de maqueta: el contenido fluye en la retícula
Correcto
Columnas fijadas primero; cada bloque encaja en un carril.
Evitar
Sin retícula: cada bloque arranca en un borde distinto.
Josef Muller-Brockmann, Grid Systems in Graphic Design
358

Elige el número de columnas por función

Ajusta la retícula al trabajo: 1 columna para libros y ensayos de lectura continua, 2-3 para folletos, 4-6 para catálogos y anuncios con jerarquía compleja, y 12 columnas para máxima flexibilidad en documentos híbridos de texto e imagen. Una retícula de doce columnas se divide limpiamente en mitades, tercios y cuartos, por eso es el default editorial para maquetas mixtas.

Correcto
1 col · libro
3 col · folleto
6 col · catálogo
El número de columnas sigue la función del documento.
Evitar
6 col para un ensayo de texto corrido
Retícula de 6 col en prosa corrida pelea con la lectura.
Muller-Brockmann, Grid Systems · Karl Gerstner, Designing Programmes
359

Ocupa columnas enteras, nunca media

Un elemento debe abarcar 1, 2, 3 o el total de columnas, nunca columna y media. Respetar los quiebres del grid es justo lo que produce orden; un bloque que termina a mitad de carril se lee como un error aunque el observador no sepa nombrar por qué. Encaja cada borde en un límite de columna o en un gutter, y deja que imágenes y texto compartan los mismos carriles.

Correcto
Imagen abarca 2 columnas, texto abarca 2: quiebres limpios.
Evitar
El bloque termina en 2.5 columnas; el borde flota fuera del grid.
Muller-Brockmann, Grid Systems · Emil Ruder, Typographie
360

Ancla cada bloque a una retícula de línea base

Fija una retícula de línea base ligada al interlineado del cuerpo (para texto 11/14pt la base cae cada 14pt), y alinea el borde superior o inferior de cada bloque, imágenes, encabezados y cajas, a esa línea. Esto es lo que hace que el texto de columnas contiguas caiga en el mismo ritmo y que los spreads registren. Sin ella, cada columna se desfasa una fracción y la página se lee sutilmente despareja.

Correcto
Ambas columnas caen en las mismas líneas base.
Evitar
La columna derecha se desfasa de la base; las líneas no registran.
Muller-Brockmann, Grid Systems · Bringhurst, Elements of Typographic Style
361

Construye 3 o 4 niveles de jerarquía, no más

Por página usa como máximo cuatro niveles visuales: nivel 1 (titular o imagen dominante), nivel 2 (subtítulos y apoyo), nivel 3 (cuerpo), nivel 4 (pies y créditos). Más de cuatro niveles diluye el sistema y el lector ya no distingue qué manda sobre qué. Cada nivel debe ser inequívocamente distinto de sus vecinos en tamaño, peso o espacio.

Correcto
1
2
3
4
Cuatro niveles claros; cada paso manda visiblemente sobre el siguiente.
Evitar
Seis niveles casi iguales: nada lidera, todo se aplana.
Muller-Brockmann, Grid Systems · Massimo Vignelli, The Vignelli Canon
362

Dimensiona por peso editorial, no por lo que quepa

El tamaño de un elemento debe ser proporcional a su importancia editorial, no a cuánto espacio sobra por casualidad. Si dos notas tienen igual peso editorial, ocupan la misma área de grid, para que el lector lea igual tamaño como igual rango. Resiste encoger o estirar un bloque solo para tapar un hueco; corrige la asignación de grid en su lugar.

Correcto
Dos notas de igual peso reciben igual área de grid.
Evitar
Notas de igual peso dimensionadas por lo que sobró: rango falso.
Vignelli, The Vignelli Canon · Muller-Brockmann, Grid Systems
363

Deja una columna de aire en spreads densos

Reserva al menos una columna vacía por spread en documentos densos de texto. La retícula no exige llenar cada celda; exige orden en las que usas. Un carril intencionalmente vacío da descanso al ojo, aloja pull-quotes o notas al margen, y señala que el blanco es estructura deliberada y no un hueco que no supiste llenar.

Correcto
Cuarto carril reservado como respiro / notas al margen.
Evitar
Cada celda saturada: sin descanso, muro de gris.
Muller-Brockmann, Grid Systems · Emil Ruder, Typographie
364

Rompe la retícula a propósito, una vez por spread

La retícula se rompe a propósito para crear énfasis: una imagen a sangre que se sale de las columnas, un titular que invade el margen. Pero hazlo solo una vez por spread. Una ruptura repetida en cada página deja de ser sorpresa y se lee como una retícula nueva y más descuidada. La excepción saca su fuerza de la regla que viola.

Correcto
Una imagen sangra fuera del grid para enfatizar. Solo una.
Evitar
Todo sangra: la ruptura pierde todo efecto.
Muller-Brockmann, Grid Systems · Vignelli, The Vignelli Canon
365

Documenta la retícula en una plantilla maestra

Registra la retícula base del proyecto, columnas, gutter en mm y márgenes, en una plantilla maestra reutilizable (una página maestra en InDesign, un set de tokens de layout en CSS). Toda pieza de la misma familia editorial deriva de ella, así portadas, interiores y anuncios comparten una estructura. Redibujar la retícula por pieza garantiza que la familia se separe.

master.grid = { columnas: 12, gutter: 4mm, margen: 18/22/16/24mm }
portada, spread, anuncio → todos heredan master.grid
Vignelli, The Vignelli Canon · Muller-Brockmann, Grid Systems
366

Registra los elementos a través del pliegue

Revisa la alineación entre la página par (izquierda) e impar (derecha) de un spread: todo elemento que cruza el pliegue, una banda de ancho completo, un titular, una foto, debe caer en la misma línea de grid en ambas páginas. Cuando izquierda y derecha se sientan en líneas base distintas, el ojo capta el escalón en el pliegue y el spread se lee como dos mitades desparejas, no como una superficie.

Correcto
La banda registra a través del pliegue en una línea de grid.
Evitar
La banda salta un escalón en el pliegue: dos mitades desparejas.
Muller-Brockmann, Grid Systems · Bringhurst, Elements of Typographic Style
367

Ancla logo y CTA a una celda fija en la campaña

En anuncios de una sola página, usa el grid para colocar el logo y el CTA en la misma celda a lo largo de toda una campaña. La imagen y el titular pueden cambiar de pieza a pieza, pero el lector aprende dónde buscar la marca y la acción, así el reconocimiento se construye por repetición estructural. Mover el ancla cada vez tira esa familiaridad acumulada.

Correcto
Logo arriba-izq, CTA banda inferior: fijos toda la campaña.
Evitar
Logo y CTA saltan por todos lados: no se construye reconocimiento.
Vignelli, The Vignelli Canon · Muller-Brockmann, Grid Systems
368

Verifica la jerarquía con la prueba de entrecerrar

Desenfoca la vista, o entrecierra los ojos, sobre la página impresa y confirma que se distinguen bloques claros de jerarquía y no un campo uniforme de gris. Si todo se funde en un tono parejo, la jerarquía está fallando por más que los tamaños se vean bien de cerca. Una página sana muestra una masa dominante, secundaria y de apoyo aun cuando el texto sea ilegible.

Correcto
Desenfocado, la masa dominante sigue liderando con claridad.
Evitar
Desenfocado, es un gris uniforme: sin jerarquía.
Vignelli, The Vignelli Canon · Muller-Brockmann, Grid Systems