¿Qué es la rejilla de 8 puntos?
La rejilla de 8 puntos es un método de espaciado en el que cada tamaño y espacio de una interfaz —márgenes, padding, huecos, alturas de componentes— es un múltiplo de 8 píxeles. En lugar de elegir cada distancia por separado, eliges de un menú corto: 8, 16, 24, 32, 40… Es una de las convenciones de espaciado más adoptadas del diseño digital, popularizada por Material Design de Google y hoy una suposición por defecto en muchos sistemas de diseño.
Este artículo explica por qué el 8 en concreto, dónde ayuda la rejilla y dónde se convierte en dogma, y cómo se generaliza hasta formar un sistema de espaciado en condiciones.
¿Por qué exactamente 8?
Tres razones prácticas:
- Divisibilidad. El 8 se divide por la mitad limpiamente dos veces (8 → 4 → 2), así que los diseños anidados y los elementos centrados siguen cayendo en píxeles enteros.
- La aritmética de la densidad de pantalla. Los dispositivos renderizan con factores de escala de 1×, 1,5×, 2× y 3×. Los múltiplos de 8 siguen siendo números enteros en todos ellos (8 × 1,5 = 12), mientras que los valores impares producen medios píxeles y bordes borrosos a 1,5×.
- Coordinación. Cuando cada diseñador y desarrollador de un equipo elige de los mismos ocho valores, más o menos, las pantallas diseñadas por distintas personas en distintos trimestres siguen pareciéndose entre sí. Eso —y no la perfección al píxel— es la verdadera recompensa.
Una rejilla de 10 puntos te daría la razón 3 y perdería las razones 1 y 2. En esencia, ese es todo el argumento a favor del 8.
¿A veces 8px es demasiado tosco?
Sí, dentro de los componentes. El padding de un icono, el hueco entre una etiqueta y su campo, el espacio dentro de un chip o una insignia: a esa escala el salto de 8 a 16 es demasiado grande. La respuesta habitual es el medio paso de 4 puntos: se permiten 4px para el espaciado interno de grano fino, mientras que los múltiplos de 8 se ocupan del espaciado a nivel de layout entre componentes y secciones. La tipografía suele funcionar también en múltiplos de 4.
Por eso muchos sistemas maduros son en realidad “rejillas de 4pt en las que el layout se ciñe a los 8” — una distinción que conviene dejar explícita en tu propia documentación.
¿Todo tiene que ajustarse a la rejilla?
No, y aquí es donde los equipos convierten una convención útil en una regla dañina. Debe ajustarse: el espaciado entre elementos, el padding dentro de los contenedores, las cajas de contorno de los iconos, las alturas fijas de los componentes. No debe ajustarse:
- Bordes y separadores de 1px — son líneas dibujadas, no espacios.
- Correcciones ópticas — un icono de reproducción desplazado 2px a la derecha para parecer centrado está bien; la rejilla no es motivo para deshacer ese ajuste.
- Líneas base de texto en mitad de un párrafo — de eso se encarga el interlineado (ver más abajo).
La rejilla es un reductor de decisiones, no una ley física. Si un valor necesita saltársela por una razón visible, sáltatela y sigue adelante.
¿Es lo mismo la rejilla de 8pt que una rejilla de línea base?
No — responden a preguntas distintas. La rejilla de 8pt cuantiza el espacio (cuánto se separan las cosas); una rejilla de línea base cuantiza el ritmo del texto (sobre qué líneas invisibles se asienta el texto). Combinan bien cuando la unidad de la línea base se deriva de tu tipografía: una convención habitual es la mitad del tamaño del cuerpo. El texto de cuerpo a 16px da una línea base de 8px — y entonces el ritmo de tu texto y tu rejilla de espaciado comparten el mismo cuanto de 8px.
De una rejilla de 8 puntos a una escala de espaciado de verdad
Algo que suele quedar sin examinar: los múltiplos de 8 todavía no son un sistema. 8, 16, 24, 32, 40, 48… es un menú lineal con más de 20 opciones — y los pasos lineales están mal en ambos extremos. Los huecos pequeños necesitan distinciones finas (8 frente a 12 importa); los grandes no (72 frente a 80 apenas se nota). Lo que de verdad quieres es un conjunto corto y no lineal de pasos: denso abajo, disperso arriba.
Eso es lo que produce una escala de espaciado modular. Fija una base de 16px con razón 2 y dos notas por intervalo, y la escala genera 8, 11, 16, 23, 32, 45, 64… — amigable con el 8 abajo, acelerando arriba, cada paso derivado de una fórmula en lugar de una reunión.
Míralo en vivo: abre esta escala de espaciado en Scale Composer — los mismos tres números que fijan la escala tipográfica generan los pasos de espaciado y la línea base de 8px.
El conjunto finito de pasos se mapea entonces directamente sobre design tokens
de espaciado (space-1 … space-8, o xs–3xl) que sobreviven al viaje desde el
archivo de diseño hasta el CSS de producción.
Pruébalo contra un layout real
Las decisiones de espaciado parecen abstractas hasta que entran las columnas en escena: abre la vista de rejilla con la misma escala cargada y ve recorriendo los medianiles y los márgenes por la escala con las teclas de flecha — 4 columnas en móvil, 8 en tablet, 12 en escritorio. Cuando un medianil pasa de un paso de la escala al siguiente, puedes ver lo que la rejilla de 8 puntos siempre intentó darte: cada distancia de la página explicada por el mismo pequeño conjunto de números.