Visualizador de Escalas de Espaciado – Espacios Consistentes Siempre

Usa el Visualizador de Escalas de Espaciado gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.

Por qué el espaciado debe ser un sistema, no una suposición

Abre cualquier web pulida e inspecciona los huecos: el espacio entre un titular y un párrafo, entre tarjetas de una rejilla, entre un botón y el texto que tiene debajo. Esos huecos no son aleatorios. Provienen de un pequeño conjunto de valores usados una y otra vez, como 8, 16, 24 y 32 píxeles. Cuando el espaciado sigue una escala, la página se siente constante y serena. Cuando cada hueco es una suposición aislada, la página se siente sutilmente desigual, aunque el visitante no sepa decir por qué.

El Visualizador de Escalas de Espaciado de arriba convierte esa idea en algo que puedes ver. Elige una unidad base, decide cuántos pasos quieres y escoge un patrón. Cada paso se muestra como una barra visible con su valor en píxeles, y la herramienta entrega variables CSS que puedes copiar en tu proyecto. En vez de debatir si un hueco debe ser de 13 o 17 píxeles, tu equipo elige un paso de la escala.

Cómo construir una escala de espaciado

Empieza con una unidad base. Cuatro píxeles es la base más habitual en los sistemas de diseño modernos, porque se divide con limpieza en la rejilla de pantalla y escala bien. Ocho píxeles también es popular, sobre todo para interfaces más grandes donde un paso de cuatro píxeles se siente demasiado fino. Introduce tu base y luego elige el patrón. Los múltiplos dan una escalera uniforme: con una base de cuatro, los pasos son 4, 8, 12, 16, 20, 24, 28 y 32. La duplicación da una escalera de crecimiento más rápido: 4, 8, 16, 32, 64, que sirve para composiciones que necesitan diferencias drásticas entre detalles pequeños y secciones grandes.

Los múltiplos sirven para la mayoría de proyectos, porque los pasos están lo bastante cerca para un control fino. La duplicación sirve para páginas de marketing y presentaciones, donde los huecos entre secciones deben empequeñecer a los huecos entre componentes. En cualquier caso, la regla es la misma: usa solo pasos de la escala, nunca un valor arbitrario intermedio. Si un hueco se siente mal, sube o baja un paso completo en vez de ajustar dos píxeles.

Cómo usar la escala en la práctica

Asigna funciones a los pasos. Los pasos pequeños, como el uno y el dos, sirven para huecos dentro de componentes: entre un icono y su etiqueta, o entre una casilla y su texto. Los pasos medios sirven para huecos entre componentes: entre tarjetas, o entre un titular y el párrafo que tiene debajo. Los pasos grandes sirven para huecos entre secciones: entre la sección principal y las características, o entre el artículo y el pie de página. Cuando las funciones son constantes, un visitante aprende el ritmo de la página sin pensar en ello.

Las variables CSS facilitan esto en el código. En vez de escribir valores de relleno a mano, escribe un relleno con una variable, como var(–space-3). Si el diseño necesita después un espaciado general mayor, cambia la unidad base una sola vez y todos los huecos se actualizan juntos. Ese único cambio es la diferencia entre un sistema y una colección de suposiciones.

Errores habituales de espaciado

El error más común es usar demasiados valores distintos. Una página con huecos de 10, 13, 17, 22 y 31 píxeles no tiene ritmo, y ningún desarrollador puede mantenerla. Otro error es un espaciado demasiado ajustado en todas partes, que hace que una página se sienta apretada y difícil de recorrer. El espacio en blanco no es espacio desperdiciado: separa ideas para que el ojo pueda interpretarlas. Un tercer error es un ritmo vertical inconsistente, donde los huecos entre secciones varían de forma aleatoria en vez de seguir la escala.

El espaciado en móvil merece una atención especial. Los objetivos táctiles necesitan al menos 8 píxeles de aire, y los huecos entre secciones que parecen generosos en escritorio pueden sentirse enormes en un móvil. Muchos equipos usan la misma escala pero bajan un paso en pantallas pequeñas, lo que mantiene el ritmo mientras ahorra espacio vertical.

Preguntas frecuentes

¿Qué unidad base debo elegir? Cuatro píxeles para la mayoría de proyectos web y de apps, ocho píxeles para interfaces más simples o grandes. La clave es la constancia, no el número concreto.

¿Cuántos pasos necesito? Ocho pasos cubren la mayoría de proyectos, desde huecos internos diminutos hasta grandes separaciones entre secciones. Menos de cinco resulta limitante, y más de doce se vuelve difícil de recordar.

¿Puedo mezclar múltiplos y duplicación? Es mejor elegir un patrón por proyecto. Mezclar patrones reintroduce la aleatoriedad que la escala existe para eliminar.

Herramientas relacionadas

• Spacing Scale Visualizer (English version)
• Creador de Miniaturas para Vídeos
• Creador de Tableros de Inspiración