El valor clamp() para 14–16px
Con un rango de viewport de 320px a 1280px, el resultado es clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem). El tamaño crece 0,21px por cada 100px de ancho de viewport: llega a unos 14,9px en una tableta de 768px y a 15,5px a 1024px, y se estabiliza en 16px a partir de 1280px.
El valor preferido combina una parte fija en rem con una parte en vw. La parte en rem mantiene el texto ligado al tamaño de fuente del navegador del lector; la parte en vw aporta el crecimiento. Cambia los campos de viewport de arriba si el contenedor de tu diseño deja de crecer antes o después.
Cuándo usar de 14px a 16px
Un rango de 14 a 16px es ideal para texto secundario: pies de foto, ayudas de formularios, celdas de tablas, notas al pie y menús densos. El cambio es sutil, así que el texto gana algo de comodidad en escritorio sin ocupar más espacio en el móvil. Combínalo con un cuerpo de 16–18px para mantener una jerarquía clara.
El máximo es 1,14× el mínimo, dentro de la pauta de 2,5× que se suele aplicar al criterio WCAG 1.4.4 Cambio de tamaño del texto, así que el zoom del navegador sigue ampliando este tamaño de forma predecible.
De dónde salen los números
Pendiente = (16 − 14) ÷ (1280 − 320) = 0,0021, es decir, 0,2083vw. Intersección = 14 − pendiente × 320 = 13,33px, o 0,8333rem con una fuente raíz de 16px. Estos dos números forman el argumento central de clamp(); el primero y el último son tu mínimo y tu máximo convertidos a rem.
Cómo usarlo en tu proyecto
Pega el valor en una declaración font-size, guárdalo en una propiedad personalizada como --fluid-size o usa la clase de Tailwind text-[clamp(0.875rem,0.8333rem_+_0.2083vw,1rem)]. Si necesitas un conjunto completo de tamaños relacionados, el generador de escala tipográfica crea pasos alrededor de un tamaño base con el mismo rango de viewport.