ContraformaLos fundamentos del diseño, explicados

La retícula y los sistemas de rejilla

La retícula es la estructura invisible de márgenes, columnas y módulos sobre la que se compone una página, y es lo primero que decide el diseñador, antes de colocar el primer elemento.

Término

La retícula (grid)

Categoría

Estructura de composición

No confundir con

La maquetación, que es lo que se hace sobre ella

Dónde se decide

Antes de colocar el primer elemento, y casi nunca después

Lámina: una retícula de doce columnas con sus medianiles y su margen.
La estructura no se ve en la pieza terminada. Se ve cuando falta.

Las cinco partes de una retícula

Una retícula se compone de cinco partes, y basta con nombrarlas para poder describir cualquier sistema de rejilla, impreso o en pantalla. Ninguna de las cinco se ve en la pieza terminada, que es exactamente lo que se espera de ellas.

ParteQué esQué la determina
MárgenesEl aire entre la mancha de contenido y el borde del formatoEl formato, la encuadernación y la forma de sostener la pieza
ColumnasLas franjas verticales donde cae el textoLa medida de línea que se busca
MedianilEl espacio entre dos columnas contiguasEl cuerpo del texto: nunca menor que el interlineado
MódulosLas divisiones horizontales que cruzan las columnasEl tipo de contenido que hay que colocar
Línea baseLa pauta horizontal a la que se alinean todas las líneas de textoEl interlineado del texto corrido

Las cinco partes se deciden en cadena y no en paralelo. Primero el formato, después la medida de línea que se quiere, después el número de columnas que esa medida permite, y sólo entonces el medianil y los módulos. Invertir el orden, empezando por decidir que la retícula tendrá doce columnas porque es lo habitual, produce columnas cuya medida no sirve para leer.

De dónde viene la retícula que se enseña

La retícula tal como se enseña en las escuelas tiene dos libros de referencia y quince años de distancia entre ellos. Karl Gerstner publica Designing Programmes en 1964 y plantea la retícula como un programa: un conjunto de reglas que genera variantes previsibles, no una plantilla donde encajar el contenido. Josef Müller-Brockmann publica en 1981 Grid Systems in Graphic Design, en alemán Rastersysteme für die visuelle Gestaltung, y fija el vocabulario de columnas, módulos y campos con el que se sigue trabajando.

El antecedente está en Die neue Typographie, de Jan Tschichold, publicada en 1928, que defiende la composición asimétrica frente a la centrada heredada del libro clásico. Tschichold se retracta después de su propio radicalismo y vuelve a la tipografía clásica, un episodio que conviene recordar cada vez que un sistema de rejilla se presenta como la única manera correcta de organizar una página.

Cómo se decide el número de columnas

El número de columnas se deduce de la medida de línea y no al revés. Robert Bringhurst, en The Elements of Typographic Style, de 1992, recomienda entre 45 y 75 caracteres por línea y señala 66 como cifra ideal para una sola columna. Con ese rango a la vista, el cálculo es directo: si el ancho disponible de la mancha admite dos columnas de 55 caracteres o una de 110, sólo una de las dos opciones está dentro del rango.

El medianil se decide después y tiene una regla de oficio sencilla: nunca debe ser menor que el interlineado del texto, porque si lo es, el ojo salta de una columna a la de al lado en lugar de bajar de línea. El interlineado del texto corrido suele ir del 120 % al 145 % del cuerpo y se mide de línea de base a línea de base.

La línea base y las unidades con las que se mide

La línea base es la parte de la retícula que más se abandona y la que más se nota cuando falta. Alinear todas las líneas de texto de una doble página a una misma pauta horizontal hace que las columnas de distinta longitud sigan leyéndose como un conjunto, y hace que el texto del reverso de una hoja impresa no interfiera al trasluz.

Las unidades de esa pauta vienen de la tipografía y conviene tenerlas claras porque los programas mezclan sistemas. El punto tipográfico PostScript, el que usan los programas actuales, equivale a 1/72 de pulgada, es decir 0.3528 mm. Una pica son 12 puntos, o sea 1/6 de pulgada. El punto Didot histórico y el punto pica anglosajón no medían lo mismo, de modo que una medida tomada de un manual antiguo no se puede trasladar sin convertir.

La retícula en pantalla: la que se reordena

En pantalla la retícula deja de tener un ancho fijo y pasa a ser un conjunto de reglas de reordenamiento. Ethan Marcotte publica el artículo Responsive Web Design en A List Apart en 2010, y a partir de ahí la maquetación de una página web se plantea como una retícula que cambia el número de columnas según el ancho disponible. La consecuencia práctica es que no se diseña una página: se diseñan los dos o tres estados en los que la retícula se reorganiza, y se decide qué elemento cae debajo de cuál en cada uno.

El resto no cambia. Los márgenes siguen existiendo aunque en una computadora o en un celular se llamen de otra manera, el medianil sigue sin poder ser menor que el interlineado y la medida de línea sigue teniendo el mismo rango. Una columna de texto de 110 caracteres no es más legible en pantalla que en papel.

Cuándo se rompe la retícula

Romper la retícula es una decisión de énfasis y funciona sólo si el sistema estaba establecido. Un elemento que se sale de la columna llama la atención porque todos los demás la respetan; si tres elementos se salen, no hay sistema y por lo tanto no hay ruptura, sólo desorden. La comprobación es contar: en una doble página, una sola excepción se lee como intención y a partir de la tercera se lee como falta de retícula.