Verificar la escala y cuándo no usarla

Una escala fluida sustituye cinco reglas explícitas por una expresión, y esa compresión tiene un precio que nadie menciona: ya no puedes leer del CSS cuánto mide el título a 900 píxeles. Hay que evaluarlo. Esta lección es el método para hacerlo rápido, y la lista de situaciones donde la respuesta correcta es no comprimir.

Las rodillas del clamp

La función que define un clamp() con vw es continua pero no derivable en dos puntos: los anchos donde el valor preferido cruza el mínimo y el máximo. Antes de la primera rodilla el tamaño es constante, entre las dos crece linealmente, después vuelve a ser constante.

Los dos anchos de rodilla salen de despejar:

V_inferior = 100 x (MIN_px - A_px) / B
V_superior = 100 x (MAX_px - A_px) / B

Con la escala de las lecciones anteriores —A_px = 13.909, B = 1.136, mínimo 18px, máximo 28px— las rodillas caen exactamente en 360 y 1240, que es lo que garantiza la derivación correcta. Si te salen en otros anchos, los topes no coinciden con los extremos de la recta.

En tipografía el cambio de pendiente en la rodilla es imperceptible porque los tamaños varían poco. Donde sí se ve es en dos sitios: en letter-spacing, donde el ojo detecta el momento en que el texto deja de apretarse, y en cualquier propiedad con mucho rango, como una altura o un padding de sección. Si necesitas que la transición sea suave en las rodillas, la solución no es más clamp() sino partir el rango en dos tramos con pendientes que casen, o aceptar la rodilla y colocarla donde nadie redimensiona.

Evaluar sin abrir el navegador

La aritmética es de cabeza si la ordenas: el valor preferido en píxeles es A_px + B·V/100, y como 1vw es V/100, basta multiplicar B por el ancho en cientos de píxeles.

clamp(1.125rem, 0.869rem + 1.136vw, 1.75rem)   con la raiz a 16px

a 360 px :  13.91 + 1.136 x 3.6  = 18.0  -> igual al minimo
a 600 px :  13.91 + 1.136 x 6.0  = 20.7
a 900 px :  13.91 + 1.136 x 9.0  = 24.1
a 1240 px:  13.91 + 1.136 x 12.4 = 28.0  -> igual al maximo
a 1900 px:  13.91 + 1.136 x 19.0 = 35.5  -> recortado a 28

Cinco números en veinte segundos, y con eso ya sabes si la escala hace lo que dices que hace. En la consola del navegador, la comprobación equivalente es una línea:

getComputedStyle(document.querySelector('h1')).fontSize

Y para ver la curva entera sin redimensionar a mano, CSS.registerProperty no hace falta: basta con document.documentElement.style.zoom o, mejor, el modo de diseño adaptable con anchos concretos escritos a mano en lugar de arrastrando el borde.

El método de comprobación

Cuatro puntos, y en este orden.

El ancho mínimo real, no el de diseño. Los 360 píxeles del diseño no son el mínimo: hay dispositivos en 320, y con el zoom de página al 200% un portátil de 1280 se convierte en un viewport de 640 con el layout de tableta. Comprueba en 320 y verifica que el tope inferior está aguantando.

El ancho máximo real. Los monitores de 3440 existen. Verifica que el tope superior recorta y que el resultado sigue siendo una composición y no un cartel.

El punto medio. Es donde está la mayoría del tráfico y el único punto que la fórmula no garantiza. Si el tamaño intermedio no te gusta, el problema son los dos extremos, no la recta.

El doble de tamaño de fuente. El procedimiento de accesibilidad completo, con el factor de respuesta calculado en el ancho donde la interpolación todavía está activa.

Si los cuatro pasan, la escala está bien. Si falla el tercero, replantea los puntos de anclaje. Si falla el cuarto, baja la pendiente.

Cuándo una escala fluida es el error

Interfaces densas de datos. Una tabla, un panel de control, un editor. Aquí el usuario quiere previsibilidad y densidad constante, no que el tamaño de letra cambie porque ha movido la ventana. Además, en estas interfaces la variable relevante no suele ser el ancho del viewport sino la preferencia de densidad del usuario, que es un ajuste explícito y no una función del hardware.

Componentes que viven en contenedores de tamaños dispares. Una tarjeta que aparece a ancho completo y también en una barra lateral no debe dimensionarse por el viewport, porque el viewport no ha cambiado entre los dos casos. Ahí la respuesta son unidades de contenedor, y la fórmula es la misma con cqi en lugar de vw.

Cuando el diseño de verdad cambia y no solo escala. Si a partir de cierto ancho el título pasa a ir en dos columnas, con otro peso y otra alineación, no hay ninguna recta que exprese eso. Dos reglas con dos valores fijos y una consulta en medio son más honestas, más fáciles de leer y más fáciles de ajustar.

Propiedades que ya son relativas. line-height sin unidad, letter-spacing en em, max-inline-size en ch y cualquier padding en em ya escalan con el texto. Meterles un vw es duplicar la fluidez y descuadrar la proporción que tenías bien.