¿Qué es una escala de espaciado?

Una escala de espaciado es un conjunto corto y ordenado de distancias permitidas — los únicos valores que un diseño usa para huecos, relleno y márgenes. En lugar de elegir cualquier número, eliges un paso de un menú de unos ocho: 8, 11, 16, 23, 32, 45, 64. Las escalas bien construidas son no lineales — densas en el extremo pequeño, dispersas en el extremo grande — porque eso coincide con cómo las personas perciben el espacio.

Este artículo cubre por qué los pasos no deberían estar espaciados de forma uniforme, cómo tres números generan una escala completa, cuántos pasos suelen necesitar los productos y cómo llamarlos. Es la pieza que convierte las convenciones de rejilla del hub más amplio de espaciado en un sistema completo.

¿Por qué los pasos no deberían estar espaciados de forma uniforme?

El menú obvio es lineal — el 8, 16, 24, 32, 40, 48, 56, 64 de la rejilla de 8 puntos. Falla en ambos extremos. En el extremo pequeño es demasiado tosco: el salto de 8 a 16 duplica la distancia, sin nada en medio para el espaciado ajustado dentro de componentes compactos — el hueco que los medios pasos de 4pt existen para llenar. En el extremo grande es demasiado fino: 56 y 64 son prácticamente indistinguibles como huecos de sección, así que el menú gasta cuatro opciones — 40, 48, 56, 64 — en distinciones que pocos lectores registrarán. Las opciones que no añaden rango expresivo igualmente invitan a la inconsistencia.

El motivo de fondo es perceptual. La diferencia entre 8px y 12px es obvia — un hueco es una vez y media el otro. La diferencia entre 72px y 80px apenas se ve, aunque son los mismos 8 píxeles. El ojo lee proporciones, no cantidades absolutas. La investigación sobre percepción describe este patrón en términos generales como la ley de Weber–Fechner — tendemos a notar los cambios en proporción al estímulo que modifican. Es una observación sobre la percepción más que una regla de diseño, pero explica por qué una escala que se siente uniformemente escalonada es aquella en la que cada paso crece por una razón, no por un incremento fijo.

¿Cómo se genera una escala de espaciado?

A partir de tres números y una fórmula:

size = base × ratio^(i/notes)

• Base ancla la escala — comúnmente el tamaño del texto de cuerpo, para que el espaciado y la tipografía crezcan desde la misma raíz.
• Razón determina cuán rápido crecen los pasos — una razón de 2 significa que la escala se duplica en cada intervalo.
• Notas subdividen cada intervalo. El término se toma prestado de la música, donde una octava se divide en notas: dos notas por cada duplicación colocan un paso extra entre 16 y 32.

Con base 16, razón 2 y dos notas:

Cada paso es aproximadamente un 41% más grande que el anterior (2^(1/2) ≈ 1,414). Compáralo con el menú lineal: en el extremo pequeño la escala ofrece 8, 11 y 16 donde el lineal ofrecía solo 8 y 16; en el extremo grande salta 32 → 45 → 64 en dos movimientos donde el lineal gastaba cuatro. Densa donde las distinciones finas son visibles, dispersa donde no lo son — la forma perceptual, producida por la aritmética.

Míralo recalcularse en vivo: abre esta escala en Scale Composer — arrastra la razón y cada paso se mueve en conjunto; añade una nota y aparecen los valores intermedios. Los mismos tres números impulsan la escala tipográfica y la línea base (la mitad de la base), así que el espaciado y la tipografía permanecen relacionados por construcción.

¿Cuántos pasos necesita una escala de espaciado?

Un número entre 6 y 10 cubre muchos productos. Una manera útil de repartirlos: uno o dos micropasos para el interior de los componentes (huecos de iconos, relleno de chips), tres o cuatro pasos intermedios para el espacio entre elementos y componentes, y dos o tres pasos grandes para secciones y regiones de página. Menos de seis obliga a hacer concesiones en uno u otro extremo; muchos más de diez y el menú deja de ser corto — la fatiga de decisión que la escala pretendía eliminar vuelve a colarse. Los productos con mucha densidad de datos se sitúan en la parte alta de ese rango (más notas por intervalo); los sitios con mucho contenido se sitúan cómodamente en la parte baja.

¿Cómo deberían llamarse los pasos?

Dos convenciones dominan en la práctica: numérica (space-1 a space-7) y tallas de camiseta (xs a 3xl). Los números mantienen el orden evidente y se extienden sin dolor; los nombres de tallas son más fáciles de recordar pero no ofrecen un nombre natural entre md y lg si más adelante se inserta un paso. Cualquiera funciona — lo que duele es cambiar después de que los nombres se hayan extendido por componentes y hojas de estilo. La cuestión del nombrado se vuelve concreta en el momento en que la escala se exporta como tokens de espaciado, y merece su propio tratamiento allí.

Haz que la misma escala sea fluida

Una escala fija responde a «qué distancias están permitidas» — pero el mismo diseño también tiene que funcionar a 360px y a 1440px. Abre esta escala en modo fluido: la exportación pasa de pasos fijos en píxeles a expresiones CSS clamp() que se deslizan entre un mínimo y un máximo, y cada paso comparte la misma pendiente de viewport — así la escala conserva sus proporciones internas mientras los tamaños absolutos se adaptan a la pantalla. El menú se mantiene corto; solo aprende a respirar.