Las cinco decisiones de espaciado que arreglan casi cualquier interfaz

Cuando una interfaz se siente mal y no puedes decir por qué, la respuesta suele ser el espaciado. No la paleta, no la tipografía – los espacios. El espaciado es el sistema invisible que le dice al ojo qué va junto, qué está separado y qué importa más, y falla en silencio: ningún linter por defecto marca un espacio de 13px, ningún revisor escribe “el ritmo está roto”. Después de años auditando mis propias interfaces y las de otras personas, casi toda corrección de espaciado que hago es una de las mismas cinco decisiones. {.answer-block}

TL;DR

• Adopta una escala y rechaza todo lo que quede fuera. 4, 8, 16, 24, 32, 48, 64. Un espacio de 13px no es una decisión de diseño; es deriva.
• El espacio entre grupos debe superar al espacio dentro de los grupos. Esta sola regla Gestalt reemplaza la mayoría de los bordes y las cajas.
• Dale a cada contenedor un único valor de padding, derivado de su rol (componente 16, tarjeta 24, sección 32-48) en lugar de calcular cada borde a ojo.
• Deja que el espacio en blanco haga la jerarquía antes de recurrir a los separadores. Los bordes son el aspecto que toma el espaciado cuando se rinde.
• Arregla el ritmo vertical en el nivel del texto – line-height 1.5 como mínimo, menos espacio después de los títulos que antes de ellos – o nada de lo que esté por encima podrá rescatar la página.

1. Adopta una escala y luego rechaza todo lo que quede fuera

La elección de valores es la mitad menor de la primera decisión; la mitad mayor es aceptar que existe un conjunto de valores. El mío parte de una base de 4px: 4, 8, 16, 24, 32, 48, 64 – siete valores, un token para cada uno. (Las superficies densas, como las tablas de datos y las barras de herramientas, a veces justifican un 12; si la tuya lo hace, conviértelo en token. El crimen es el valor sin nombre, no el octavo token.)

Los números concretos importan menos que el rechazo. Los valores arbitrarios (13px, 7px, 22px) rompen el ritmo de una forma que el ojo registra como descuido sin poder nombrarla. La regla que me impongo: cada valor de espaciado sale de la escala o lleva una razón documentada. En la práctica, las excepciones documentadas casi nunca sobreviven a la revisión, porque “en su momento se veía bien” es exactamente la deriva que la escala existe para evitar.

Una escala también reduce decisiones. Sin ella, cada espacio es un juicio nuevo tomado a la velocidad de la implementación; con ella, casi todos los espacios tienen exactamente un token plausible, y la revisión de diseño discute los casos interesantes en lugar de la aritmética.

2. Espacio entre grupos > espacio dentro de los grupos

Si te llevas una sola frase de este artículo: el espacio entre grupos debe ser visiblemente mayor que el espacio dentro de ellos. Es la proximidad de la Gestalt cumpliendo una función estructural – el ojo lee la distancia relativa como relación, de forma automática y previa a las palabras.

Un formulario donde la etiqueta queda a 8px de su campo, y los campos quedan a 24px entre sí, no necesita cajas, ni separadores, ni tintes de fondo: la agrupación es evidente por sí sola. Aplana esas distancias a unos 16px uniformes y el mismo formulario se convierte en una bruma de filas equidistantes que el usuario tiene que analizar conscientemente. Los mismos tres campos, dos veces:

grouped (8 within / 24 between)     flattened (16 everywhere)

Name                                Name
[______________]
                                    [______________]

Email                               Email
[______________]
                                    [______________]

Phone                               Phone
[______________]
                                    [______________]

A la izquierda, cada etiqueta pertenece sin ambigüedad a su campo. A la derecha, cada etiqueta interior flota a la misma distancia de dos campos – la proximidad ha dejado de votar, y quien lee deduce la pertenencia por el orden de lectura y no por la vista.

El modo de fallo es casi siempre una compresión en el nivel equivocado: alguien aprieta el espacio entre grupos para que quepa más por encima del pliegue, la proporción se derrumba y entonces – al sentir que la agrupación se disuelve – añade bordes para restaurarla. Lo que nos lleva a la cuarta decisión. Pero antes:

3. Un padding por contenedor, derivado del rol

Los contenedores acumulan padding asimétrico igual que las cocinas acumulan cajones de trastos – un empujoncito aquí para que quepa un botón, un ajuste allá por un icono, hasta que una tarjeta tiene 18px arriba, 14px a la izquierda y nadie recuerda por qué. La solución es una derivación permanente: el padding de un contenedor viene de su rol, no de su contenido.

• Componentes (botones, campos, chips): 16px
• Tarjetas y contenido agrupado: 24px
• Secciones: 32-48px
• Regiones a nivel de página y hero: 48-64px

Cuando el contenido no cabe en el padding de su rol, es el contenido el que no corresponde al contenedor – divídelo, acórtalo o promueve el contenedor un nivel. Ajustar el padding para rescatar a un hijo incómodo rompe el ritmo de todos sus hermanos, y la asimetría se lee como un error incluso para quienes nunca la mencionarán.

4. Espacio en blanco antes que bordes

La mayoría de los separadores son disculpas. El borde debajo de cada fila de una lista, la caja alrededor de cada sección de formulario, la línea fina entre cada tarjeta – cada uno es espaciado que se rindió. Las fronteras sí crean grupos (el principio de región común de la Gestalt es real), pero son el remedio fuerte: visualmente ruidoso, aditivo y acumulativo. Cada borde es una línea más que el ojo debe procesar.

Mi orden de trabajo: probar primero la proporción de proximidad (decisión dos). Si los grupos siguen sin separarse, probar un cambio de fondo antes que un trazo – un tinte crea una región sin añadir una línea, agrupación por región común en su versión más discreta, y le gana a un borde siempre que un grupo necesite cohesión pero no un filo; el rayado tipo cebra en las tablas es esta regla en su forma más conocida. Recurre a los bordes cuando las regiones necesiten de verdad filos duros – tablas, regiones editables, tarjetas anidadas – y entonces comprométete con ellos. Una interfaz que alterna agrupación por espacio en blanco aquí y agrupación por bordes allá se lee como dos design systems peleando.

La prueba que aplico en la revisión: borrar todos los bordes que no marquen un filo duro autorizado – tablas, campos editables – y mirar lo que queda. Toda agrupación que sobreviva era real; todo lo que se disuelva era deuda de espaciado que los bordes estaban cubriendo.

5. Arregla el ritmo vertical en el nivel del texto

Los sistemas de espaciado mueren desde abajo. Si el texto del cuerpo va con line-height 1.2, ninguna cantidad de espaciado entre secciones rescata la página – los propios párrafos se leen apretados, y todo lo construido sobre ellos hereda esa tensión. El mínimo: cuerpo de 16px, line-height 1.5 (hasta 1.75 en formato largo) y una medida de unos 65ch. La parte del line-height es la parte empírica: las guías de accesibilidad nombran 1.5 por algo, y el interlineado apretado es el asesino de ritmo más común en la web. El tope de 65ch es práctica más que ley: las líneas largas pueden salir bien en una prueba aislada, pero el salto de retorno a la siguiente línea se vuelve más difícil de acertar, y quien lee se topa con el muro de texto mucho antes que con el argumento.

Por encima del párrafo, la regla que organiza todo lo demás: un título se sitúa más cerca del contenido que introduce que del contenido al que sigue. Más espacio antes que después – normalmente el doble. Un título que flota a la misma distancia entre dos secciones no pertenece a ninguna; la asimetría es lo que lo ata a su propio contenido. El mismo título, dos veces:

bound (before wide / after tight)   floating (equal both sides)

...end of previous section.         ...end of previous section.


Shipping address                    Shipping address
[Street___________]
[City_____________]
                                    [Street___________]
                                    [City_____________]

A la izquierda, el título posee visiblemente sus campos. A la derecha, queda suspendido entre secciones, y quien lee se lo asigna por convención en vez de por la vista. Esta es otra vez la decisión dos, operando dentro de la columna de texto, y ese es justamente el punto: el ritmo vertical no es una disciplina aparte, es la regla de proximidad aplicada a la escala más pequeña.

La auditoría

Las cinco decisiones se condensan en una lista de revisión que aplico a cualquier pantalla:

1. ¿Está cada espacio en la escala? (Inspecciona los raros – siempre son accidentes.)
2. ¿Es cada espacio entre grupos mayor que los espacios dentro de esos grupos?
3. ¿Lleva cada contenedor un único padding derivado de su rol?
4. ¿Podría eliminarse algún borde después de arreglar el espaciado que hay detrás?
5. ¿Sostiene la columna de texto su propio ritmo – line-height de 1.5 o más, títulos atados a su contenido?

La mayoría de las pantallas falla en dos o tres de estos puntos, y arreglarlos cambia la sensación más que cualquier cambio de paleta o de tipografía. En mis propias apps de iOS la primera pregunta se verifica de forma mecánica: antes de que un commit salga, la barrera de revisión busca en el diff los números de padding en crudo, y todo lo que no sea un token del kit necesita una razón con nombre para sobrevivir. El espaciado es donde se esconde el oficio, precisamente porque nadie puede señalarlo.

Preguntas frecuentes

¿Qué escala de espaciado debería usar un design system?

Una escala con base de 4px – 4, 8, 16, 24, 32, 48, 64 – cubre casi todas las necesidades de una interfaz. Los valores exactos importan menos que la exclusividad: cada espacio sale de la escala o lleva una justificación documentada. Los valores arbitrarios (7px, 13px, 22px) rompen el ritmo visual de formas que los usuarios sienten pero no saben nombrar.

¿Cómo se agrupan elementos de interfaz sin bordes?

Con la proporción de proximidad: el espacio entre grupos debe superar visiblemente al espacio dentro de ellos. Un espacio de 8px entre la etiqueta y su campo, con 24px antes de la etiqueta siguiente, agrupa un formulario sin una sola caja. Reserva los bordes para regiones que necesitan filos duros – tablas, áreas editables – y prefiere un cambio de fondo como paso intermedio.

¿Cuánto padding deberían tener las tarjetas y los botones?

Derívalo del rol del contenedor: ~16px para componentes (botones, campos), 24px para tarjetas, 32-48px para secciones y más para regiones hero. Un valor por contenedor – si el contenido no cabe en el padding del rol, cambia el contenido o promueve el contenedor en vez de ajustar los bordes a mano.

¿Qué es el ritmo vertical en tipografía?

El patrón de espaciado constante a lo largo de una columna de texto: cuerpo de 16px como mínimo con line-height de 1.5-1.75, unos 65 caracteres por línea y títulos colocados más cerca del contenido que introducen que de aquel al que siguen. Todo lo mayor hereda de este nivel – si los párrafos están apretados, ningún espaciado entre secciones arregla la página.