Espaciado fluido y lo que no debe serlo

La misma recta que dimensiona el texto sirve para dimensionar el espacio, pero con una pendiente muy distinta y por una razón concreta: entre el móvil y el escritorio, el texto necesita crecer un 15% y las canaletas de página un 300%. Hacer las dos cosas con la misma escala es el error que produce interfaces que en móvil respiran demasiado y en escritorio parecen apretadas.

La misma recta, otra pendiente

El texto tiene un rango útil estrecho: por debajo de 15 píxeles cuesta leer y por encima de 22 el cuerpo de texto se vuelve incómodo. Ese techo perceptual es la razón de que las escalas tipográficas fluidas crezcan tan poco.

El espacio no tiene ese límite. Una canaleta lateral de 16 píxeles en un móvil de 360 es correcta, y en un monitor de 1400 esa misma canaleta parece un error de maquetación; ahí quieres 80 o 120. El factor entre los dos extremos es de 5 a 8, frente al 1.15 del texto.

Deriva la recta con la fórmula de siempre para 16px a 360 y 80px a 1240:

B    = 100 x (80 - 16) / 880   = 7.273 vw
A_px = 16 - 7.273 x 3.6        = -10.18 px

Un término constante negativo. No es un error de sintaxis: clamp(1rem, -0.636rem + 7.273vw, 5rem) es válido y produce exactamente la recta que pediste. Lo que significa es que el término en rem ya no acompaña, resta, y el factor de respuesta al ajuste de tamaño de fuente es negativo: cuando el usuario agranda el texto, ese espacio encoge. Es justo lo contrario de lo que hace falta, porque el texto que va dentro acaba de crecer.

Rebajando el rango, 16px a 360 y 48px a 1240, el término vuelve a ser positivo:

:root {
  --canaleta: clamp(1rem, 0.182rem + 3.636vw, 3rem);
}

.contenedor { padding-inline: var(--canaleta); }

El factor de respuesta a 1240 sigue siendo bajo —2.91 / 48 = 0.06— y eso está bien: es espacio de layout, no texto. Que las canaletas no crezcan cuando el usuario agranda la letra es incluso deseable, porque deja más sitio para las líneas. Lo inaceptable no es un factor bajo, es uno negativo.

Espacio ligado al texto frente a espacio de layout

Esta distinción resuelve la mitad de los problemas de esta lección.

El espacio ligado al texto es el que existe porque hay texto: el padding de un botón alrededor de su etiqueta, la separación entre párrafos, el hueco entre un icono y su rótulo, el margin bajo un título. Su tamaño correcto es una proporción del texto al que acompaña.

Ese espacio no necesita ninguna fórmula fluida. Expresado en em o en lh, hereda automáticamente toda la fluidez del tamaño de fuente, con su misma pendiente, su mismo factor de respuesta al zoom y sus mismos topes. Sale gratis y sale exacto.

.boton {
  font-size: var(--t-0);       /* ya es fluido */
  padding: 0.6em 1.1em;        /* fluido por herencia, sin escribir un vw */
}

h2 { margin-block: 1.5lh 0.5lh; }
p  { margin-block-end: 1lh; }

El espacio de layout es el que existe por la geometría de la página: canaletas laterales, separación entre secciones, huecos de una rejilla, anchura de una barra lateral. Ese no tiene relación con ningún texto y es el que sí necesita su propia recta con vw.

La regla, entonces: em y lh para el espacio interno de los componentes, clamp() con vw solo para el espacio de la página. Si en la hoja de estilos aparecen decenas de expresiones fluidas de espaciado, es casi seguro que muchas deberían ser em.

Una escala de espacio con pares

Igual que la tipografía, el espacio se organiza mejor como escala que como valores sueltos. Y aquí hay una técnica que merece la pena: además de los pasos, definir pares que van de un paso al siguiente.

:root {
  /* pasos: de 4-5, 8-10, 12-15, 16-20, 24-30, 32-40 y 48-60 px */
  --sp-3xs:  clamp(0.25rem, 0.224rem + 0.114vw, 0.313rem);
  --sp-2xs:  clamp(0.5rem,  0.449rem + 0.227vw, 0.625rem);
  --sp-xs:   clamp(0.75rem, 0.673rem + 0.341vw, 0.938rem);
  --sp-s:    clamp(1rem,    0.898rem + 0.455vw, 1.25rem);
  --sp-m:    clamp(1.5rem,  1.347rem + 0.682vw, 1.875rem);
  --sp-l:    clamp(2rem,    1.795rem + 0.909vw, 2.5rem);
  --sp-xl:   clamp(3rem,    2.693rem + 1.364vw, 3.75rem);

  /* pares: empiezan en un paso y acaban en el siguiente */
  --sp-s-m:  clamp(1rem,    0.642rem + 1.591vw, 1.875rem);
  --sp-m-l:  clamp(1.5rem,  1.091rem + 1.818vw, 2.5rem);
  --sp-l-xl: clamp(2rem,    1.284rem + 3.182vw, 3.75rem);
}

La diferencia es de intención. Un paso crece poco: es el mismo espacio, ajustado. Un par crece mucho: es un espacio que en móvil debe ser el pequeño y en escritorio el grande, y el clamp se encarga de la transición. Los pares son los que usas para las separaciones de página y de sección; los pasos, para todo lo demás.

Tener las dos familias evita el error de usar una pendiente agresiva donde querías estabilidad, porque el nombre ya te dice cuál es cuál.

Lo que no debe ser fluido

Cuatro categorías, y todas por el mismo motivo: son medidas cuyo valor correcto no depende del tamaño de la pantalla.

Grosores de borde y separadores. Un borde es una convención visual de un píxel; a 1.37px se rasteriza con antialiasing y se ve borroso en lugar de fino. Mantenlos en px.

Radios pequeños. Un radio de 4px que crece a 6px no comunica nada y en cambio hace que el mismo componente se vea distinto en dos páginas. Los radios grandes, decorativos, sí pueden ser fluidos o proporcionales.

Anillos de foco y sus desplazamientos. El indicador de foco tiene requisitos de tamaño mínimo por accesibilidad y no debe depender del viewport. Fijo, siempre, y con contraste garantizado.

Áreas táctiles mínimas. El mínimo recomendado para un objetivo táctil no se negocia con el ancho de la pantalla: si algo tiene que medir al menos 44 píxeles de lado, el min-block-size es un valor fijo, y lo fluido puede ser el padding por encima de ese suelo.