Espaciado y retícula en Material: qué decide la escala

La escala de espaciado responde una pregunta sencilla: cuánto espacio queda entre dos cosas. Lo hace con una sola unidad base. Material Design mide todo el sistema en una escala de 8dp donde space100 vale 8dp (en inglés), y ese único número mantiene padding, gaps y márgenes comparables entre pantallas. Lo que la guía no resuelve es el diseño en sí. Entrega la escala y la retícula, y deja en tus manos la pantalla que necesita más aire por un motivo editorial. Para ese caso, la salida es registrar la excepción en un token propio.

Qué decide la escala de espaciado

La escala cubre tres distancias y nada más: padding dentro de un elemento, gaps entre elementos y márgenes fuera de un elemento (en inglés). El padding aleja el contenido del borde de su contenedor. El gap separa dos elementos que van lado a lado o apilados. El margen mantiene un elemento lejos de su padre o del borde de la pantalla. La guía pone padding y gaps por delante del margen (en inglés), porque un margen en un elemento hijo casi nunca es uniforme y exige más tokens para mantenerse en línea.

La dirección también es parte del sistema. El espaciado puede ser horizontal, vertical o atado a un borde, y la guía nombra esos bordes leading, trailing, top y bottom. Leading y trailing cambian de lado en idiomas de derecha a izquierda (en inglés), así la regla funciona en los dos sentidos sin reescribir nada.

Retícula, margen y canal

Una retícula son columnas, canales (gutters) y márgenes, y la escala aparece primero en el canal. NN/g define la retícula como columnas, canales y márgenes, con el canal separando el contenido de columnas distintas (en inglés). El ancho de columna suele ser porcentual, para seguir a la pantalla, mientras el ancho del canal es un valor fijo que cambia en el breakpoint. NN/g suma una regla que decide si la retícula aguanta: mantener el contenido dentro de las columnas y dejar el canal vacío (en inglés).

La retícula de Material cambia el número de columnas según el breakpoint, y la guía coloca barras y paneles sobre ella, no sobre un mapa fijo de píxeles. El margen es la parte con holgura. Las reglas de margen, en palabras de la guía, traen espacio para que el diseño se sienta más apretado o más suelto (en inglés). La misma página recuerda que una retícula de fotos puede ocupar todo el ancho, mientras un campo de búsqueda conserva un margen más ancho. La escala permite esa elección, pero la decides tú.

Los peldaños de la escala y qué resuelve cada uno

Material define un conjunto lineal de valores y deja el hueco entre ellos vacío a propósito. La lista de tokens va de space0 a space900, con space100 en 8dp como unidad base (en inglés). Los peldaños pequeños resuelven las partes internas de un control, donde 2dp, 4dp, 6dp y 10dp aparecen como unidades anidadas (en inglés) para los pares apretados que un múltiplo de ocho no nombra. El medio cubre el trabajo de todos los días. El ejemplo de la propia guía es un contenedor de búsqueda con 8dp de padding vertical, 8dp de gap horizontal y 24dp de margen horizontal (en inglés). La parte alta, hasta space900 en 72dp, separa bloques grandes entre sí.

La guía también dice que define solo los valores más recomendados y espera que el producto extienda la escala (en inglés) cuando necesita más.

Densidad y lo que le cuesta al área táctil

La densidad gana espacio de pantalla, y lo paga el tamaño de lo que la persona tiene que tocar. La guía fija un piso que no se mueve. El objetivo por defecto debe medir al menos 48x48 píxeles CSS (en inglés), y un componente no debe encogerse por debajo de eso por defecto. La densidad de componente funciona como escala numerada. Arranca en 0, el valor por defecto, y va hacia el negativo a medida que el espacio se reduce. Un peldaño suele cortar 4dp del padding superior e inferior, o de la altura total (en inglés).

Hay dos lugares donde esto pesa más. La guía dice que no conviene subir la densidad en interfaces armadas alrededor de una tarea enfocada, como elegir en un menú (en inglés). Dice lo mismo para componentes que avisan a la persona de un cambio, como snackbars o diálogos (en inglés). La densidad, por otra parte, es opcional: la persona la activa en ajustes, y esos ajustes deben conservar el objetivo completo para poder revertir la elección (en inglés).

Espaciado y token

Un token de espaciado es un nombre que resuelve a un valor, así la decisión se toma una vez y se reutiliza. La guía arma la cadena así: los atributos de componente apuntan a tokens del sistema, que resuelven a valores finales (en inglés). Son los tokens del sistema los que reemplazan al número suelto. Cuando el token correcto no existe, la guía manda crearlo con el patrón de multiplicador, donde space225 vale 18dp, de 8dp por 2,25 (en inglés). Esa es la salida documentada, y es el mismo movimiento para el diseño editorial que necesita más aire que la escala.

La guía también ata el espaciado a la escala del texto. Con el texto al 200%, el mismo espaciado debe conservarse por defecto (en inglés), porque una etiqueta más grande apretada por un gap más chico se lee peor. NN/g llega al mismo punto desde el otro lado y observa que un elemento con más espacio alrededor se lee como un grupo y atrae más atención (en inglés).

El error común de un valor fuera de la escala

El error más común es el número suelto, elegido para una pantalla y luego copiado a las demás. Un padding de 13px o un gap de 15px queda fuera de la escala, así que nunca llega a token, y la pantalla siguiente inventa un valor vecino. NN/g vio el patrón en formularios: cuando el espaciado entre etiqueta y campo está mal, la persona duda sobre qué escribir (en inglés). El ojo lee cercanía como relación, y un valor que la escala no reconoce rompe esa lectura sin avisar.

Qué medir

Tres comprobaciones resuelven casi todo. El área táctil primero, en 48x48 píxeles CSS, porque es el único número con un piso de accesibilidad detrás. La alineación entre bloques después, ya que el ojo nota un bloque fuera de la línea más rápido que un espaciado unos píxeles más chico. El aire en pantalla pequeña va al final, y aquí la guía es clara: la cantidad de aire es una decisión, no un valor por defecto. NN/g muestra el costo sin vueltas: llama optimizar la interfaz para el espacio disponible una estrategia clave de usabilidad (en inglés) y alerta contra meter información en agujeros diminutos (en inglés).

La escala rinde cuando la misma cantidad de espacio significa lo mismo en toda pantalla, y la retícula rinde cuando las columnas cargan el contenido y el canal queda limpio. Ninguna de las dos reemplaza la decisión sobre el diseño que tienes delante. Cuando una pantalla necesita más aire del que la escala permite, nombra la excepción en un token propio en vez de dejar un número suelto en un archivo.

Los peldaños de aquí extienden el post sobre Material Design, el post sobre tipografía en Material, el post sobre tokens y tema de Material y el post sobre productos de datos densos.