¿Como usar clamp() o min()/max() para evitar tamaños de texto ilegibles en extremos?

Usar unidades de viewport como vw directamente para font-size (ej. font-size: 5vw;) puede hacer que el texto escale fluidamente, pero a menudo resulta en tamaños de texto demasiado pequeños en pantallas muy estrechas o excesivamente grandes en pantallas muy anchas, afectando la legibilidad.

Las funciones CSS min(), max(), y especialmente clamp(), son herramientas perfectas para solucionar esto estableciendo límites.

Así es como puedes usarlas:

1. max(valor1, valor2, ...):
   Esta función devuelve el mayor de los valores que le pases. Para tipografía, puedes usarla para establecer un tamaño mínimo que no quieres que se reduzca, aunque el valor de viewport sea menor.
   h1 {
/* El tamaño será 4vw, pero nunca menor de 24px. */
font-size: max(24px, 4vw);
}
   En este caso, si 4vw calcula un valor inferior a 24px (en pantallas muy pequeñas), el font-size se quedará en 24px. Si 4vw es mayor, se usará 4vw.
2. min(valor1, valor2, ...):
   Esta función devuelve el menor de los valores que le pases. Para tipografía, puedes usarla para establecer un tamaño máximo que no quieres que se exceda, aunque el valor de viewport sea mayor.
   h1 {
/* El tamaño será 8vw, pero nunca mayor de 48px. */
font-size: min(48px, 8vw);
}
   Aquí, si 8vw calcula un valor superior a 48px (en pantallas muy grandes), el font-size se limitará a 48px. Si 8vw es menor, se usará 8vw.
3. clamp(MIN, VAL, MAX):
   Esta función es la más completa y a menudo la más recomendada para la tipografía fluida. Permite «sujetar» un valor entre un límite inferior (MIN) y un límite superior (MAX).
   • MIN: El valor mínimo absoluto que puede tomar la propiedad.
   • VAL: El valor preferido o ideal, que normalmente es el que escala (ej. una unidad vw).
   • MAX: El valor máximo absoluto que puede tomar la propiedad.
   p {
/* El tamaño de fuente ideal es 2.5vw, pero no será menor de 16px ni mayor de 22px. */
font-size: clamp(16px, 2.5vw, 22px);
}
h2 {
font-size: clamp(1.5rem, 1rem + 3vw, 3rem); /* Combinando rem y vw */
}
   Con clamp(), el font-size intentará ser el valor VAL. Si VAL es menor que MIN, se usará MIN. Si VAL es mayor que MAX, se usará MAX. Esto asegura que el texto escale suavemente entre los límites definidos, manteniendo la legibilidad en todos los dispositivos.