Espaciado fluido: una sola pendiente para todo

Una escala de espaciado fluido es un sistema de espaciado cuyos valores se deslizan con el viewport al mismo ritmo que la tipografía a la que rodean: los márgenes, los medianiles y el relleno escalan en la misma proporción que el texto, de modo que la relación entre un titular y el espacio a su alrededor es la misma en cada ancho de pantalla. La tipografía fluida sobre un espaciado fijo es medio sistema: el texto se desliza mientras su contenedor permanece quieto, y la composición cambia de forma en silencio a medida que la pantalla se ensancha.

Esta guía forma parte de nuestra guía de tipografía fluida y cubre la mitad del espaciado: por qué el espaciado tiene que deslizarse cuando lo hace la tipografía, cómo el compartir una sola pendiente mantiene bloqueadas las proporciones, y el detalle de redondeo que permite que los valores deslizantes permanezcan en una rejilla.

¿Por qué la tipografía fluida necesita espaciado fluido?

Tomemos una configuración fluida habitual: el tamaño de fuente raíz se desliza de 16px en un viewport de 360px a 18px en 1280px. Cada tamaño basado en rem crece un 12,5% a lo largo de ese rango: un token de titular de 2.375rem se renderiza a 38px en el extremo estrecho y a 42,75px en el extremo ancho.

Ahora dale a ese titular un margen fijo de 24px por debajo. A 360px la proporción titular-margen es 38 / 24 ≈ 1,58. A 1280px es 42,75 / 24 ≈ 1,78. Nada se rompió y nada dio un salto, pero la proporción entre el texto y el espacio que lo rodea derivó un 12,5%, todo el crecimiento de la tipografía. El diseño ancho queda, de forma medible, más apretado alrededor de sus titulares que el estrecho, de una manera que nadie decidió.

Una analogía útil: es como ampliar el motivo de una fotografía sin ampliar el marco que lo rodea. Cada parte está bien por sí sola; lo que cambió es la relación entre ellas. Y la relación es lo que el ojo realmente lee: el texto y el espacio a su alrededor se registran como una sola composición, no como dos valores independientes, y la proporción entre ellos es la mayor parte de lo que significa estar «bien espaciado». Cuando la mitad de la composición escala y la otra mitad no, el diseño a 1280px no es el diseño que se aprobó a 360px; es uno ligeramente distinto.

¿Cómo mantiene constantes las proporciones una pendiente compartida?

El principio: el espaciado se desliza sobre la misma pendiente que la tipografía. Si la tipografía crece un 12,5% entre los viewports 360 y 1280, cada distancia compositiva crece un 12,5% a lo largo de exactamente el mismo rango. Cualquier proporción entre un tamaño de texto y un valor de espaciado es entonces una constante: la deriva desaparece por construcción.

Así es como el modo fluido de Scale Composer exporta el espaciado, y el mecanismo es casi decepcionantemente simple: un único clamp sobre el tamaño de fuente raíz lleva el deslizamiento, y los tokens de espaciado son simples valores rem que lo acompañan, exactamente igual que los tamaños de fuente. Un paso de espaciado de 1.5rem se renderiza a 24px mientras la raíz está en 16 y a 27px cuando llega a 18: el máximo del paso es 1,125× su mínimo porque el máximo de la raíz es 1,125× su mínimo. No existe un segundo clamp en ninguna parte: «una sola pendiente» no es una disciplina que sigan los valores de espaciado, sino un hecho estructural: solo hay una expresión deslizante en toda la hoja de estilos, y todo lo que está en rem la hereda.

La deriva, en paralelo: el mismo titular, margen fijo frente a margen fluido:

Abre la exportación de espaciado fluido en Scale Composer: el panel de CSS escribe cada token de espaciado como un valor rem con su rango de píxeles fluido en un comentario final, de modo que puedes leer el deslizamiento compartido directamente en la exportación.

¿Por qué redondear el espaciado fluido a pasos de medio rem?

Esta es la tensión que la versión ingenua ignora: los sistemas de espaciado obtienen su valor de la cuantización. Una escala de espaciado es un conjunto pequeño de distancias permitidas —una rejilla— y «cada hueco es uno de un puñado de valores» es buena parte de lo que mantiene coherente una interfaz grande. El espaciado fluido en bruto en CSS destruye eso: en un viewport de 700px, un valor que se desliza de 16 a 18px pasa por ≈16,74px, una distancia que no está en ninguna rejilla, y distinta de nuevo a 701px.

La exportación de Scale Composer resuelve esto con la función round() de CSS (consulta round() en MDN), que ajusta un valor calculado al múltiplo más cercano de un paso que tú eliges. Cada token de espaciado se envuelve en ella:

--space-md: round(nearest, calc(1rem * var(--spacing-density)), 0.5rem);  /* 16→18px (fluido) */

La variable de densidad tiene un valor por defecto de 1; ponla a 0.75 o 1.25 y cada valor de espaciado se aprieta o se relaja por ese factor antes de redondear.

El envoltorio round(…, 0.5rem) ajusta el resultado al medio rem más cercano, y la sutileza que hace que esto funcione es que el propio rem se está deslizando. Bajo el clamp de la raíz, 0.5rem es 8px en el extremo estrecho y 9px en el extremo ancho, así que un valor puede estar cuantizado en unidades de rejilla y ser fluido en píxeles al mismo tiempo: la rejilla se desliza bajo los valores que se ajustan a ella. Como tanto el token como el paso de redondeo son cantidades en rem, su proporción nunca cambia con el viewport: el token de arriba es 2 × 0.5rem en cada ancho, renderizándose a 16px en el extremo estrecho y a 18px en el extremo ancho, sin saltos de medio paso en ningún punto intermedio. Esa es la tensión deslizamiento-frente-a-rejilla resuelta: fluido en píxeles, estable en la rejilla.

¿Qué debería quedar fijo?

No todo debería acompañar la pendiente. La distinción útil es entre distancias compositivas y constantes ópticas:

• Los bordes se quedan en px. Una línea fina de 1px es una constante óptica: se lee como «una línea» en cada viewport, y 1,125px no aporta más que desenfoque.
• Los radios suelen quedar fijos. Una esquina de 6px se lee como la misma forma a 360px y a 1280px; escalarla cambia la geometría percibida de un componente más de lo que preserva composición alguna.
• Los iconos suelen quedar fijos, o avanzan por pasos junto con los tamaños de tipografía a los que acompañan, en lugar de deslizarse de forma independiente.

La pregunta que marca la división: ¿participa este valor en la proporción entre texto y espacio? Los márgenes, el relleno, los medianiles y los huecos sí lo hacen: se deslizan. Las líneas finas y los pequeños detalles geométricos no: se mantienen. (Cómo se eligen los propios pasos de espaciado es territorio del sistema de espaciado; el modo fluido cambia cómo se renderizan los pasos, no qué pasos existen.)

Lee la pendiente en tu propia exportación

La forma más rápida de interiorizar la pendiente compartida es cambiar un número y ver cómo todo lo sigue: abre la exportación del mismo sistema y busca --spacing-density: cada token de espaciado se multiplica por él antes de redondear, así que ponerlo a 0.75 en tu hoja de estilos aprieta toda la capa de espaciado por un factor mientras cada clamp mantiene su pendiente. La densidad y la fluidez resultan ser mandos independientes: uno escala la rejilla, el otro la hace respirar.