La retícula 8pt es el sistema de espaciado que usan Material Design y las guías de Apple. La idea es simple: cada margen, cada padding y cada tamaño de tu interfaz es múltiplo de 8.
Lo que casi nadie te cuenta es la segunda mitad. Puedes tener la retícula perfecta en Figma y que el desarrollador la destroce al maquetar, porque nadie le pasó la escala en un formato que pueda usar. Ahí es donde se pierde el trabajo.
Así que aquí tienes las dos partes: cómo montar la retícula en el diseño y cómo llevarla al CSS con variables para que sobreviva a la implementación.
Qué es la retícula 8pt y por qué 8
Un punto (pt) es una unidad abstracta que depende de la densidad de la pantalla. A escala @1x, 1pt equivale a 1px. En una pantalla Retina @2x, ese mismo punto son 2px, y en una @3x son 3px.
Ahí está la razón de elegir el 8. Los factores de escala que hay que soportar son @0.75x, @1x, @1.5x, @2x y @3x. Multiplica 8 por cualquiera de ellos y siempre te da un número entero: 6, 8, 12, 16, 24. Prueba con 7 y te salen 5,25 y 10,5. Eso son medios píxeles, y un medio píxel se traduce en bordes borrosos.
¿Y por qué no 6 o 10? Es una cuestión de equilibrio práctico. Con base 10 la escala queda monótona y se te acaban las opciones intermedias. Con base 6 tienes tanta granularidad que acabas dudando entre 18 y 24 en cada decisión, que es justo lo que la retícula viene a evitar.
No es una convención inventada por nadie en un blog. Material Design 3 especifica que todos los componentes se alinean a una retícula base de 8dp, y reserva la de 4dp para iconografía y texto. Las Human Interface Guidelines de Apple siguen la misma lógica.
La escala completa, de 4 a 96
Esta es la escala que uso. El 4 y el 12 son medios pasos: existen, pero solo dentro de componentes pequeños, nunca para separar bloques de la página.
| Token | px | rem | Para qué |
|---|---|---|---|
| space-1 | 4 | 0.25 | Medio paso. Icono y su etiqueta |
| space-2 | 8 | 0.5 | Padding interno de un chip o badge |
| space-3 | 12 | 0.75 | Medio paso. Padding vertical de botón |
| space-4 | 16 | 1 | El más usado. Padding de tarjeta |
| space-6 | 24 | 1.5 | Separación entre elementos de una lista |
| space-8 | 32 | 2 | Separación entre bloques relacionados |
| space-12 | 48 | 3 | Separación entre secciones en móvil |
| space-16 | 64 | 4 | Separación entre secciones en escritorio |
| space-24 | 96 | 6 | Respiración de una hero section |
El número del token es el multiplicador sobre 4px. Es la misma lógica que usa Tailwind, así que si tu proyecto lleva Tailwind, la equivalencia es directa: p-4 son 16px y gap-8 son 32px.
Si solo te quedas con un número, que sea el 16. Es el valor más usado en cualquier sistema de diseño y el que resuelve la mayoría de decisiones de padding.
Cómo llevar la retícula al CSS
Aquí es donde la mayoría de artículos sobre la retícula 8pt se paran. Y es una lástima, porque un sistema de espaciado que vive solo en Figma se descompone en cuanto alguien maqueta.
Declara la escala una vez como variables CSS y a partir de ahí nadie vuelve a escribir un número suelto.
:root {
/* Escala 8pt en rem, sobre base de 16px */
--space-1: 0.25rem; /* 4px medio paso */
--space-2: 0.5rem; /* 8px base */
--space-3: 0.75rem; /* 12px medio paso */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */
}
.tarjeta {
padding: var(--space-4);
gap: var(--space-2);
margin-block-end: var(--space-8);
}
.seccion {
padding-block: var(--space-12);
}
@media (min-width: 48rem) {
.seccion {
padding-block: var(--space-24);
}
}Por qué rem y no px
Este detalle marca la diferencia entre una web correcta y una accesible. Si escribes padding: 16px, ese valor es fijo. Cuando alguien con problemas de visión sube el tamaño de fuente en su navegador, el texto crece pero el espacio no. El resultado es una interfaz apelmazada, con las letras chocando contra los bordes.
Con 1rem el espacio escala junto al texto. La retícula se mantiene proporcional y la persona lee sin agobio. Cuesta lo mismo escribirlo bien.
Una excepción concreta: los bordes. Un border: 1px se queda en píxel, no lo pases a la escala. La retícula gobierna el espacio, no el grosor de una línea.
Tip: si quieres ver retículas de 8pt bien resueltas antes de montar la tuya, en Envato Elements hay kits de UI y sistemas de diseño para Figma con la escala ya definida. Abrir uno y desmontarlo enseña más que diez artículos.
Cómo configurar la retícula 8pt en Figma
Tres ajustes y dejas de pelearte con la herramienta.
- Cambia el nudge. Figma mueve los elementos de 10 en 10 al usar Mayús + flecha. Ve a Preferencias y ponlo en 8. Es el ajuste que más tiempo ahorra de todo el artículo y casi nadie lo toca.
- Añade un Layout Grid de tipo Grid con tamaño 8 al frame. Te da la cuadrícula visual de fondo para comprobar alineaciones de un vistazo.
- Crea variables de espaciado. En el panel de variables, define una colección de números con la escala de la tabla anterior. A partir de ahí aplicas tokens, no cifras, y cambiar el sistema entero es cuestión de un valor.
El paso 3 es el que de verdad conecta diseño y código. Si tus variables de Figma se llaman igual que tus variables CSS, la conversación con desarrollo deja de ser sobre píxeles y pasa a ser sobre nombres.
En la comunidad de Figma tienes el archivo Spacings 8pt grid con la escala montada, y el plugin 8pt grid para auditar lo que ya tengas hecho.
Tipografía: manda el interlineado, no el tamaño
Este es el malentendido más común con la retícula 8pt. Mucha gente intenta forzar el tamaño de fuente a múltiplos de 8 y acaba con jerarquías rarísimas.
No es el font-size lo que tiene que caer en la retícula: es el line-height. Una fuente de 18px con interlineado de 24px encaja perfecto. Una de 16px con interlineado de 24px también. El tamaño puede ser el que pida la jerarquía.
| Estilo | Tamaño | Interlineado |
|---|---|---|
| Texto pequeño | 14px | 20px |
| Cuerpo | 16px | 24px |
| Subtítulo | 20px | 28px |
| Título | 30px | 40px |
| Título grande | 44px | 56px |
Los interlineados van en múltiplos de 4, que es lo que recomienda Material Design para texto. Así la línea base cae siempre sobre la retícula aunque el tamaño de letra sea impar.
Cuándo romper la retícula
La retícula es una herramienta, no una religión. Estos son los casos en los que yo me la salto sin remordimiento.
- Compensación óptica. Un icono de flecha dentro de un botón puede necesitar 1px de ajuste para parecer centrado aunque matemáticamente ya lo esté. Manda el ojo.
- Bordes y líneas. 1px es 1px. No lo metas en la escala.
- Contenido ajeno. Un logo de cliente o un embed de terceros vienen con las medidas que vienen. Ajústalo al múltiplo más cercano y sigue.
- Tipografía de marca. Si el manual dice que el titular va a 42px, va a 42px. Ajusta el interlineado, no el tamaño.
Hay quien trabaja con retícula de 4pt porque le da más margen con la tipografía, y quien usa 12pt en proyectos editoriales. Las dos son decisiones válidas. Lo que no funciona es que diseño use una lógica y desarrollo otra distinta: ahí es donde aparecen los descuadres que nadie sabe explicar.
Preguntas frecuentes
¿Retícula, cuadrícula, grid o regla de 8pt?
Son la misma cosa. En español lo habitual es «retícula de 8pt» o «cuadrícula de 8 puntos»; en inglés, «8pt grid». Si buscas información, usa «retícula 8pt»: es el término con el que la vas a encontrar.
¿La retícula 8pt sirve para web o solo para apps?
Para las dos. Nació del problema de las densidades de pantalla en móvil, pero el beneficio en web es el mismo: decisiones más rápidas y una interfaz coherente. En web tienes además la ventaja de poder expresarla en rem.
¿Qué diferencia hay entre retícula de 8pt y retícula de columnas?
La de columnas organiza el ancho de la página en franjas verticales, normalmente 12. La de 8pt gobierna el espacio entre elementos, en las dos direcciones. Se usan juntas, no son alternativas.
¿Puedo usar 4pt en lugar de 8pt?
Sí, y de hecho la mayoría de sistemas serios usan 8 como base con 4 disponible para ajustes dentro de componentes. Lo importante es que el paso pequeño sea la excepción y no la norma, o pierdes el efecto de tener sistema.
¿Cómo compruebo si un diseño respeta la retícula?
En Figma, con el plugin de auditoría. En una web ya publicada, abre las herramientas de desarrollador, inspecciona un par de elementos y mira los valores de padding y margin. Si ves 13px, 27px o 35px sueltos, no hay sistema detrás.
¿Tailwind ya trae la retícula 8pt?
Tailwind usa una escala con base de 4px, así que los valores pares te dan la retícula de 8 directamente. Usando solo clases pares (p-2, p-4, p-6, p-8) ya estás trabajando en 8pt sin configurar nada.
Sigue por aquí
- Diseño web modular: el sistema de espaciado es la primera pieza de una web escalable.
- Hero sections inmersivas: donde más se nota una retícula bien aplicada.
- Microinteracciones con código: más CSS listo para copiar.
- Todo lo de Figma: trucos y recursos para la herramienta.
- Las mejores tipografías para tu web: el complemento natural de la escala de espaciado.
Monta la escala una vez, guárdala como plantilla y reutilízala en cada proyecto. Es de esas cosas que cuestan una tarde y te ahorran meses. Si acabas usándola, cuéntame qué base elegiste.
