Sistemas de espaciado y la rejilla de 8pt: la guía práctica
Un sistema de espaciado es un menú corto y ordenado de distancias permitidas: en lugar de elegir cada margen y cada hueco de forma individual, eliges entre seis y diez valores que todo el equipo comparte. La rejilla de 8 puntos es la versión más conocida de la idea; una escala de espaciado es su forma más potente y no lineal. Este hub reúne nuestras guías sobre ambas; la vía más rápida es ver una escala de espaciado generada en vivo.
Por qué funciona el espaciado cuantizado
El valor no está en un misticismo de píxeles: está en la economía de decisiones y en la coherencia. Cuando cada distancia sale de un mismo menú corto, las pantallas construidas por personas distintas en meses distintos siguen pareciendo emparentadas, y “¿este hueco debería ser 12 o 14?” deja de ser una discusión. El ojo también lo agradece: menos relaciones de espaciado distintas significan menos ruido visual que reconciliar.
¿Qué es la rejilla de 8 puntos? desglosa el menú más conocido y por qué sobrevivió el 8 en concreto: se divide de forma limpia y cae en píxeles enteros en los escalados de densidad habituales. Cuando los componentes necesitan distancias internas más finas —relleno de iconos, huecos entre etiquetas—, entra en juego una capa de medios pasos; Rejilla de 4pt frente a 8pt cubre cuándo se aplica cada capa y cómo conviven las dos sin convertirse en “vale cualquier múltiplo de 4”.
La rejilla es el caso particular; la escala es la idea
Los múltiplos de 8 forman un menú lineal, y los pasos lineales fallan en ambos extremos: los huecos pequeños necesitan distinciones finas, los grandes no. Una escala de espaciado trazada a partir de una fórmula (la misma progresión de base y ratio que puede impulsar una escala tipográfica) te da pasos no lineales: 8, 11, 16, 23, 32, 45, 64. Densa donde importa la precisión, dispersa donde no, con cada paso justificado por una sola regla.
Cuántos pasos debería contener ese menú es una decisión aparte — ¿Cuántos pasos de espaciado necesita un sistema? defiende que de seis a diez, y ¿Qué es una escala de espaciado? construye la versión no lineal desde cero. La fórmula compartida es también aquello sobre lo que está construido Scale Composer: una sola base y ratio generan a la vez los tamaños de tipografía, los pasos de espaciado y las dimensiones de la rejilla, de modo que cambiar un número reajusta los tres a la vez.
El ritmo del texto también es espaciado
La mitad de las distancias verticales de una página viven dentro del texto: interlineados, huecos entre párrafos, márgenes de los encabezados. Derivar una unidad de línea base equivalente a la mitad del tamaño del cuerpo (8px sobre un cuerpo de 16px) pone el ritmo del texto y el espaciado de maquetación sobre el mismo cuanto, que es la forma práctica de conseguir esa sensación de que “todo se alinea” sin pelearse con la mecánica de las cajas de línea de CSS. Rejilla de línea base frente a rejilla de 8pt traza la línea entre los dos tipos de ritmo, y Espaciado vertical entre bloques de texto aplica el cuanto compartido a los huecos entre párrafos y a los márgenes de los encabezados: las distancias que más probablemente deriven cuando se ajustan elemento por elemento.
Donde el espaciado se encuentra con el resto del sistema
Los pasos solo gobiernan algo una vez que tienen nombre y se han enviado. Tokens de espaciado cubre el nombrado y el número de pasos, y el hub de design tokens cubre cómo esos nombres viajan desde un único archivo fuente hasta CSS, Tailwind y Figma. En la maquetación, la misma escala fija las distancias entre columnas: Medianiles y huecos lo conecta con el sistema de columnas descrito en el hub de rejilla de maquetación. Dos guías cubren el suelo ergonómico que ninguna escala puede rebajar: Áreas táctiles sobre por qué importan los 44px, y Modos de densidad sobre cómo servir interfaces compactas y espaciosas a partir del mismo conjunto de tokens.
Guías de este hub
- ¿Cuántos pasos de espaciado necesita un sistema?
¿Cuántos valores de espaciado necesita un sistema? De seis a diez, repartidos por zona —micro, medio, macro— y una auditoría que muestra por qué tu CSS probablemente tiene cuarenta.
- ¿Qué es la rejilla de 8 puntos?
La rejilla de 8 puntos convierte cada espacio y tamaño de una interfaz en un múltiplo de 8px. Descubre por qué funciona el 8, cuándo usar medios pasos de 4pt y cómo crece hasta convertirse en una escala de espaciado.
- ¿Qué es una escala de espaciado?
Una escala de espaciado es un conjunto corto y ordenado de distancias permitidas. Aprende por qué las buenas escalas son no lineales, cómo tres números generan una y cuántos pasos necesitas.
- Compacto, cómodo, espacioso: modos de densidad
Los modos de densidad de UI — compacto, cómodo, espacioso — son una misma disposición resuelta contra distintos pasos de espaciado. Cómo funciona la reasignación de alias, con cálculos de fila de tabla.
- Escalas de radio de borde
Una escala de radio de borde es un menú corto de valores de esquina compartido por cada componente —más la regla de esquina anidada (interior = exterior menos hueco) que la mayoría de las guías omite.
- Espaciado vertical entre bloques de texto
¿Cuánto espaciado entre párrafos y encabezados? Múltiplos de línea base, márgenes de encabezado asimétricos, listas más apretadas: una pila de texto trabajada a partir de una sola escala.
- Mantener sincronizado el espaciado de Figma y el código
Los tokens de espaciado de Figma se desvían del código cuando cada lado mantiene su propia lista. Exporta una sola escala como Figma Variables y CSS para que diseño y código lean una única fuente.
- Margen vs Padding: reglas del sistema
Margen vs padding: el padding es el espacio dentro del borde, el margen fuera, y la regla del sistema que importa más: los componentes poseen el padding, los layouts poseen los huecos.
- Medianiles y huecos: el espaciado entre columnas
Un medianil de rejilla es el espacio entre columnas — gap en CSS. Qué anchura deben tener los medianiles, cómo se relacionan con los márgenes y las columnas, con las cuentas de cada breakpoint resueltas.
- Objetivos táctiles: por qué 44px importa
El tamaño del objetivo táctil explicado: Apple dice 44pt, Material 48dp, WCAG 2.2 exige 24px. Descubre cómo el relleno convierte un icono de 24px en un objetivo de 48px, y por qué cuentan los espacios.
- Rejilla de 4pt vs 8pt: cuándo usar cada una
La rejilla de 4pt vs 8pt es una cuestión de capas, no de elección: múltiplos de 8px para el espaciado de layout, múltiplos de 4px para el espaciado interior fino y la tipografía. Aprende dónde encaja cada uno.
- Rejilla de línea base vs rejilla de 8pt: la diferencia
Una rejilla de línea base cuantiza el ritmo del texto; una rejilla de 8pt cuantiza el espacio. Aprende en qué se diferencian, cómo comparten un mismo cuanto de 8px y qué resiste en la web.
- Tamaños de iconos en la rejilla (16, 20, 24)
Los tamaños de icono estándar —16, 20, 24, 32— son cajas delimitadoras sobre la rejilla de 4px. Aprende por qué iconos de igual tamaño pueden verse distintos y cómo emparejar iconos con texto.
- Tokens de espaciado: nomenclatura y pasos
Los tokens de espaciado convierten una escala de espaciado en un vocabulario compartido. Compara la nomenclatura numérica y por talla de camiseta, añade alias semánticos y exporta a CSS, Tailwind y Figma.
Pruébalo con columnas reales
El espaciado se vuelve concreto cuando entra la maquetación: abre la vista de rejilla —4 columnas en móvil, 8 en tablet, 12 en escritorio— y recorre los medianiles y los márgenes por la escala con las teclas de flecha. Ver un medianil moverse paso a paso muestra para qué sirve un sistema de espaciado más rápido que cualquier definición.