Espaciado y ritmo proporcionales al contenedor

El tamaño de letra no es lo único que hace que un componente se vea desproporcionado fuera de su tamaño de diseño. Un padding de 24px es generoso en una tarjeta de 300px y mezquino en una de 900px; un gap fijo convierte una tarjeta grande en una lista de bloques flotando en el vacío. Escalar el espaciado con el contenedor es la mitad menos glamurosa del componente portable y la que más diferencia produce, siempre que sepas distinguir qué se escala y qué debe quedarse quieto.

Un paso base y todo lo demás derivado

La técnica consiste en declarar una sola medida fluida y expresar el resto como múltiplos suyos:

.tarjeta {
  --paso: clamp(0.75rem, 0.5rem + 1.2cqi, 1.75rem);

  padding: var(--paso);
  display: grid;
  gap: var(--paso);
  border-radius: calc(var(--paso) * 0.6);
}

.tarjeta__acciones { gap: calc(var(--paso) * 0.5); margin-block-start: calc(var(--paso) * 0.25); }
.tarjeta__media    { margin-inline: calc(var(--paso) * -1); }  /* sangrado a los bordes */

Dos ventajas concretas. La primera, que el componente se ajusta cambiando un número, lo que hace posible ofrecer variantes de densidad sin duplicar reglas. La segunda, que las proporciones internas se conservan exactamente en todos los tamaños: el radio siempre es seis décimas del padding, el hueco de las acciones siempre la mitad del principal.

Ese sangrado negativo del último ejemplo es un caso donde la técnica brilla: una imagen que llega a los bordes de la tarjeta necesita un margen negativo exactamente igual al padding, y cuando el padding es fluido, la única forma de que sigan cuadrando es derivar uno del otro.

Escala con razón constante

Si prefieres una escala de varios pasos, no repitas clamp() en cada uno. Deriva todos del mismo paso base multiplicando por potencias de una razón:

.componente {
  --paso: clamp(0.75rem, 0.5rem + 1.2cqi, 1.75rem);
  --e-0: calc(var(--paso) * 0.25);
  --e-1: calc(var(--paso) * 0.5);
  --e-2: var(--paso);
  --e-3: calc(var(--paso) * 1.5);
  --e-4: calc(var(--paso) * 2.25);
  --e-5: calc(var(--paso) * 3.375);
}

Los factores 1, 1.5, 2.25 y 3.375 son potencias de 1.5, la misma idea de razón constante que usarías en una escala tipográfica modular. Al derivar todo de --paso, la escala entera es fluida con una sola expresión, y una variante compacta se consigue redefiniendo solo esa.

.componente.compacto { --paso: clamp(0.5rem, 0.4rem + 0.6cqi, 1rem); }

Qué no debe escalar

Aquí está el criterio que separa un componente cuidado de uno donde todo se ha multiplicado por lo mismo.

Los grosores ópticos no escalan. El borde de 1px es 1px en todos los tamaños. Un borde que crece a 3px en tarjetas grandes deja de leerse como borde y empieza a leerse como marco. Lo mismo con el anillo de foco, que además tiene requisitos de contraste y de grosor mínimo.

Los objetivos táctiles no escalan hacia abajo. Un botón debe tener al menos unos 24px de lado según el criterio de tamaño de objetivo de las WCAG 2.2, y 44px si sigues las guías de las plataformas móviles. Ese mínimo es del dedo, no del contenedor.

.tarjeta__boton {
  min-block-size: 2.75rem;                    /* del dedo, en rem */
  padding-inline: calc(var(--paso) * 0.75);   /* del contenedor */
  border: 1px solid;                          /* constante */
}

El texto de lectura no escala con el contenedor más allá de un ajuste mínimo, por lo que ya vimos: manda el usuario. Un componente que reduce el cuerpo de texto en contenedores estrechos está tomando una decisión sobre legibilidad basándose en el dato equivocado.

Ritmo vertical

El eje de bloque necesita un tratamiento aparte por un motivo práctico: el contenedor típico es inline-size, así que no tienes cqb disponible. Escalar los márgenes verticales con cqi funciona y es lo que se hace, pero conviene ser consciente de que estás usando el ancho para dimensionar espacio vertical.

En la práctica es la decisión correcta más veces de lo que parece, porque un contenedor ancho suele implicar más espacio también en vertical y porque el ojo compara el padding vertical con el horizontal. Lo que sí conviene es usar factores distintos:

.seccion {
  --paso: clamp(0.75rem, 0.5rem + 1.2cqi, 1.75rem);
  padding-inline: var(--paso);
  padding-block: calc(var(--paso) * 1.5);   /* mas aire arriba y abajo */
  margin-block: calc(var(--paso) * 2);
}

Y si de verdad necesitas proporción vertical real, el contenedor tiene que ser container-type: size con altura determinada, y entonces cqb está disponible. Es el caso de los paneles de altura fija de un tablero, no el de una tarjeta de contenido.