Qué es la tipografía fluida
La tipografía responsive clásica elige unos pocos tamaños fijos y los intercambia con media queries: 16px en el móvil, 18px en la tableta, 20px en el escritorio. La tipografía fluida sustituye esos escalones por una función continua del ancho del viewport. Con CSS clamp() la regla completa cabe en una línea y el navegador calcula el tamaño adecuado para cada ancho entre tus dos extremos.
La fórmula detrás de clamp()
Un tamaño fluido es una recta que pasa por dos puntos: (viewport mínimo, tamaño mínimo) y (viewport máximo, tamaño máximo). La pendiente es (tamaño máximo − tamaño mínimo) ÷ (viewport máximo − viewport mínimo); multiplícala por 100 para obtener el coeficiente en vw. La intersección es tamaño mínimo − pendiente × viewport mínimo. El resultado es clamp(tamaño mínimo, intersección + pendiente·100vw, tamaño máximo). El generador de arriba hace exactamente esto y redondea al número de decimales que elijas.
Cómo elegir buenos tamaños
El texto del cuerpo rara vez necesita cambiar mucho: de 16 a 18 o de 16 a 20 píxeles cubre la mayoría de los diseños de lectura. Los títulos son los que más ganan con el tamaño fluido, porque un titular de 48px que luce genial en un portátil ocupa media pantalla en un móvil. Empieza por tu título más grande y ve bajando, con una proporción entre mínimo y máximo menor cuanto más pequeño sea el texto.
Elige el rango de viewport a partir de tu maquetación, no de listas de dispositivos. El mínimo suele ser 320 o 360 px. El máximo es el ancho en el que tu contenedor alcanza su max-width; a partir de ahí la longitud de línea ya no crece, así que el tamaño de fuente tampoco debería hacerlo.
Lista de comprobación de accesibilidad
Mantén el mínimo, el máximo y la intersección en rem para que las preferencias de fuente del usuario sigan aplicándose. Comprueba el criterio WCAG 1.4.4 con un zoom al 200 %: si el máximo supera unas 2,5 veces el mínimo, el zoom puede no ampliar lo suficiente el texto, y la herramienta te avisa. Usa un interlineado relativo (por ejemplo 1.5) para que escale con la fuente y prueba tus palabras más largas en la pantalla más estrecha.