Sistema de espaciado de 8 puntos: ritmo y consistencia en interfaces

Cuando heredamos el diseño de una web para rehacerla, una de las primeras cosas que hacemos en el estudio es medir espacios. Abrimos el archivo, seleccionamos capas al azar y anotamos las distancias. Casi siempre sale una lista parecida: 7, 10, 13, 15, 18, 20, 22, 25, 30, 35 píxeles. Cada número tuvo su momento y su razón, pero juntos producen esa sensación difícil de explicar de que la página no termina de estar ordenada, aunque nadie sabría decir por qué.

Un sistema de espaciado resuelve justo eso. En lugar de decidir cada distancia a ojo, se decide una vez una escala corta de valores y se diseña solo con ellos. El más extendido usa múltiplos de 8 píxeles (o puntos, en el vocabulario de iOS). Parece una restricción y en la práctica es una liberación: se acaban las dudas entre 18 y 20, el diseño se vuelve más rápido y desarrollo deja de traducir números raros.

Esta guía explica cómo funciona el sistema de 8 puntos, qué escala usar, cómo repartir los espacios dentro y fuera de los componentes y cómo llevarlo a Figma y a CSS sin que se convierta en una camisa de fuerza.

01Qué es el sistema de 8 puntos y por qué funciona

El sistema de 8 puntos es una convención: todos los espacios (márgenes, rellenos, separaciones) y las dimensiones de los componentes (altura de botones, campos, barras) son múltiplos de 8. Para los ajustes finos se admite el medio paso, 4, y por eso muchos equipos lo llaman sistema de 4 y 8.

Funciona por tres razones.

Encaja con las pantallas. Los dispositivos trabajan con densidades de 1x, 1,5x, 2x y 3x. Un espacio de 8 unidades se convierte en 8, 12, 16 o 24 píxeles físicos, siempre enteros. Con valores impares o con 5 aparecen medios píxeles, y el navegador o el sistema operativo los redondean de forma distinta según el caso, lo que produce bordes borrosos o separaciones que bailan un píxel.

Reduce decisiones. Entre 0 y 64 píxeles hay 65 valores posibles. Con una escala de 8 puntos hay unos diez. Diseñar con menos opciones es más rápido y las pantallas se parecen entre sí, que es exactamente lo que queremos en un producto.

Habla el idioma de desarrollo. Material Design trabaja en múltiplos de 8 dp con un medio paso de 4; las guías de Apple usan 8 pt como referencia habitual de márgenes; y Tailwind CSS define su unidad de espaciado por defecto en 0,25 rem, es decir, 4 px. Cuando el diseño usa la misma escala que el código, el paso de Figma al navegador se vuelve casi literal.

Clave: el valor del sistema de 8 puntos no está en el número 8, sino en que todas las distancias salen de la misma escala corta. Lo que se repite se percibe como orden.

02La escala: qué valores usar

Una escala lineal (8, 16, 24, 32, 40, 48…) tiene demasiados pasos casi iguales en la parte alta: la diferencia entre 88 y 96 apenas se percibe. Por eso la mayoría de sistemas usan una escala que crece más deprisa a medida que sube. Esta es la que solemos usar como punto de partida en el estudio:

Diez valores cubren prácticamente cualquier pantalla. Si en un proyecto echas en falta uno intermedio de forma recurrente (por ejemplo 40 px), se añade a la escala con su nombre; lo que conviene evitar es usarlo suelto en una pantalla sin que exista en el sistema.

Fíjate en que los nombres no llevan el valor («space-16») sino una posición. Así, si mañana decides que la escala sea un poco más generosa, cambias los valores y todos los usos se actualizan sin renombrar nada. Lo desarrollamos más en design tokens explicados.

03Las reglas de reparto: dentro, fuera y entre

Tener la escala es la mitad del trabajo. La otra mitad es saber qué valor poner en cada sitio. Tres reglas resuelven la mayoría de casos.

Regla 1: el espacio interno es menor o igual que el externo

Es la traducción práctica del principio de proximidad de la Gestalt: percibimos como un grupo lo que está cerca. El relleno de una tarjeta (espacio interno) debe ser menor o igual que la separación entre tarjetas (espacio externo). Si una tarjeta tiene 24 px de relleno y la siguiente está a 16 px, el ojo no sabe dónde acaba un grupo y empieza otro.

Regla 2: cuanto más relacionados, más cerca

Dentro de un bloque, la etiqueta va pegada a su campo (4 u 8 px), el campo se separa del siguiente campo (16 o 24 px) y el grupo de campos se separa del botón final (32 px). Tres niveles de relación, tres pasos de la escala. La jerarquía del contenido se lee en los espacios antes incluso que en los tamaños de letra.

Regla 3: un salto de escala, una diferencia visible

Cuando quieras que dos separaciones se perciban distintas, sáltate al menos un paso. Entre 16 y 24 la diferencia se nota; entre 24 y 32 también. Si dos espacios contiguos son 16 y 20, se lee como un descuido, no como una intención.

04Alturas de componentes y tipografía

El sistema no se queda en los espacios. Las dimensiones de los componentes también salen de la escala, y eso hace que todo encaje al alinearse en una fila.

• →Botones y campos: 32 px (compacto, para tablas o herramientas densas), 40 px (estándar en escritorio) y 48 px (cómodo, recomendable en móvil). WCAG 2.2 pide como mínimo 24×24 px para los objetivos táctiles y Apple recomienda 44×44 pt, así que en móvil 48 px es una elección segura.
• →Barras de navegación: 56 o 64 px de alto en móvil, 64 a 80 px en escritorio.
• →Iconos: 16, 20 y 24 px son los tamaños habituales. El de 20 rompe la regla y no pasa nada: se coloca dentro de una caja de 24 o con un relleno que sí cuadra.
• →Avatares y miniaturas: 24, 32, 40, 48, 64 px.

En tipografía, lo práctico es que los interlineados sean múltiplos de 4. Así cada línea de texto ocupa una altura que encaja con la escala y los bloques de texto quedan alineados con el resto.

Hay quien lleva esto al extremo y alinea todo a una retícula de línea base de 4 px. En webs con mucho texto editorial puede merecer la pena; en la mayoría de interfaces basta con que los interlineados estén en la escala y los espacios entre bloques también.

05Cómo llevarlo a Figma

En Figma, el sistema de 8 puntos se apoya en tres herramientas.

1. 01Nudge de 8 px. En las preferencias de Figma (Nudge amount) cambia el desplazamiento grande a 8. Así, al mover un objeto con Mayúsculas y las flechas, saltará en pasos de la escala.
2. 02Variables de número. Crea una colección «Spacing» con una variable por cada valor de la escala (space-1, space-2…). Después, en el auto layout, asigna el relleno y la separación entre elementos a esas variables en lugar de escribir números. Si el valor cambia, cambia en todos los componentes.
3. 03Auto layout en todo. Los componentes construidos con auto layout calculan solos sus dimensiones a partir del relleno y el contenido. Un botón con 12 px de relleno vertical y un texto de 24 px de interlineado mide exactamente 48 px, sin que nadie lo dibuje a mano.

Si quieres profundizar en variables, modos y componentes, lo contamos paso a paso en Figma a fondo: variables, modos y auto layout.

06Cómo llevarlo a CSS

En código, la escala se define una sola vez como propiedades personalizadas y se usa en todas partes. Trabajar en rem hace que los espacios crezcan si la persona ha aumentado el tamaño de letra de su navegador, algo que agradecen especialmente quienes tienen baja visión.

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  /* Separación entre secciones: de 64px en móvil a 96px en escritorio */
  --space-section: clamp(var(--space-8), 4rem + 3vw, var(--space-9));
}
.card {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.card-list {
  display: grid;
  gap: var(--space-6);
}
.section {
  padding-block: var(--space-section);
}

Dos detalles que facilitan la vida. El primero: usar gap en contenedores flex y grid en lugar de márgenes en cada hijo, porque el espacio pertenece al contenedor y desaparecen los márgenes que sobran al final de una lista. El segundo: los espacios grandes entre secciones se pueden hacer fluidos con clamp(), siempre con los extremos anclados en valores de la escala, para que el ritmo se mantenga en cualquier ancho. Para el reparto horizontal en columnas, la escala se combina con la retícula, que explicamos en retícula y grid en diseño web.

Si trabajas con Tailwind CSS, ya tienes la escala hecha: p-2 son 8 px, p-4 16 px, gap-6 24 px. Lo que funciona es acotar en la documentación del proyecto qué clases se usan y cuáles no, para que nadie escriba p-5 (20 px) por costumbre.

07Ejemplo resuelto: una tarjeta de servicio

Vamos a aplicar todo a una tarjeta típica: icono, título, descripción de dos líneas y un enlace «Saber más», en una rejilla de tres tarjetas.

1. 01Relleno interno: 24 px (space-5) en los cuatro lados. En móvil, si la tarjeta ocupa todo el ancho, se puede bajar a 16 px.
2. 02Icono: 24 px dentro de una caja de 48 px con fondo suave.
3. 03Del icono al título: 16 px (space-4). Están relacionados, pero son elementos distintos.
4. 04Del título a la descripción: 8 px (space-2). Título y texto forman una unidad de lectura.
5. 05De la descripción al enlace: 16 px (space-4). El enlace es una acción, no parte del texto.
6. 06Entre tarjetas: 32 px (space-6). Mayor que cualquier espacio interno, así cada tarjeta se lee como un bloque.
7. 07Título: 18 px con 28 px de interlineado. Descripción: 16 px con 24 px.

Resultado: cinco valores de espacio (8, 16, 24, 32, 48), tres niveles de relación claros y una tarjeta que se puede replicar en cualquier sección sin pensar. Cuando un cliente nos pide «más aire», sabemos exactamente qué tocar: subimos un paso el relleno y la separación entre tarjetas, y el conjunto respira sin perder su lógica. Sobre el valor del vacío como recurso de diseño, en espacio en blanco en diseño web hay más ideas.

08Cuándo salirse de la escala

La escala es una herramienta al servicio del ojo, y el ojo a veces pide otra cosa. Estas excepciones son habituales y sanas:

• →Ajustes ópticos. Un icono de play dentro de un círculo parece descentrado aunque esté centrado matemáticamente; se desplaza 1 o 2 px. Un texto en mayúsculas dentro de un botón a veces necesita 1 px menos arriba para parecer centrado.
• →Bordes y líneas. 1 px, 1,5 px o 2 px, según el peso que se busque.
• →Contenido editorial. En una página de lectura larga, el ritmo lo marca la tipografía más que la escala de componentes.
• →Elementos de marca. Un logotipo, una ilustración o un gesto gráfico tienen sus propias proporciones y no tienen por qué medir múltiplos de 8.

Lo que funciona es que cada excepción sea consciente y, si se repite, se incorpore al sistema con nombre propio.

Un sistema de espaciado es de esas decisiones invisibles que hacen que una interfaz se sienta cuidada en cada pantalla, desde la primera hasta la número cien. En SIMA lo definimos al principio de cada proyecto de diseño web y experiencia digital, junto con la tipografía y el color, y lo llevamos tal cual al código. Si tu producto ha crecido a base de números sueltos y quieres ponerle orden, escríbenos y lo revisamos juntos.