Usa el Calculadora de clamp() CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
El problema del texto fluido
El texto que se ve bien en un ordenador a menudo se ve mal en un telefono, y las soluciones habituales son torpes. Un tamano de fuente fijo es demasiado grande en pantallas pequenas y demasiado pequeno en las grandes. Las media queries lo arreglan saltando entre tamanos en puntos de corte, pero los saltos se ven: el texto crece de golpe cuando la ventana cruza un limite. El texto fluido lo resuelve escalando suave, creciendo un poco con cada pixel extra de ancho de pantalla, sin saltos en ningun sitio.
La funcion CSS clamp() es la herramienta para esto. Toma tres valores: un minimo, un valor preferido y un maximo. El navegador usa el valor preferido cuando cae entre el minimo y el maximo, y lo limita a los extremos en caso contrario. Para texto fluido, el valor preferido mezcla una unidad de ventana con una unidad fija, como 1.6667vw + 10.6666px, asi que el tamano crece con la pantalla pero nunca escapa del rango que pusiste.
Como usar la herramienta
Escribe tu tamano de fuente minimo y maximo, y luego los anchos de pantalla donde esos tamanos deben aplicarse. La herramienta calcula la pendiente y la interseccion y te da la linea clamp(). El control de vista previa simula distintos anchos de pantalla para que veas el tamano crecer y confirmes que se detiene justo en tu minimo y tu maximo. Copia la linea en tu hoja de estilos como valor de font-size.
Un punto de partida sensato es 16 pixeles en una pantalla de 320 pixeles creciendo hasta 32 pixeles en 1280 pixeles. Eso da texto de cuerpo legible en un telefono y titulares con confianza en un ordenador, con crecimiento suave en medio.
Las matematicas, explicadas en simple
La formula tiene dos partes. La pendiente mide cuanto crece el tamano: resta el tamano minimo del maximo, divide por el rango de pantalla, y multiplica por 100 para expresarlo en unidades de ancho de ventana. La interseccion es la parte fija: el tamano minimo menos la contribucion de la pendiente en la pantalla minima. Juntas describen una linea recta que pasa justo por tus dos puntos.
Aqui tienes un ejemplo resuelto. Minimo 16 pixeles en 320, maximo 24 en 1280. La pendiente es (24 – 16) / (1280 – 320) x 100, que es 0.8333 unidades de ventana. La interseccion es 16 – 0.8333 x 320 / 100, que es 13.3334 pixeles. El resultado, clamp(16px, 0.8333vw + 13.3334px, 24px), da justo 16 en 320, justo 24 en 1280, y una linea suave entre ambos. La herramienta hace esta cuenta por ti, pero conocerla te permite comprobar cualquier valor que te den.
Por que clamp supera a las media queries aqui
Las media queries siguen siendo correctas para cambios de diseno, como pasar de una columna a tres. Para tamanos de fuente, sin embargo, los valores fluidos tienen tres ventajas. Primera, no hay saltos: el texto crece de forma continua, asi que ningun ancho de ventana muestra un cambio brusco de tamano. Segunda, hay menos codigo: una linea reemplaza tres o cuatro reglas de puntos de corte. Tercera, cada tamano de pantalla recibe un tamano adecuado, no solo los pocos anchos para los que escribiste puntos de corte.
Elegir tu rango
La pantalla minima debe ser la pantalla mas pequena que soportes, normalmente 320 pixeles para telefonos antiguos. La pantalla maxima debe ser donde el crecimiento deja de verse mejor, a menudo 1200 a 1440 pixeles para disenos de ordenador. Mas alla, el texto que sigue creciendo se hace mas dificil de leer, porque las lineas se alargan demasiado y los titulares dominan la pagina.
Para los tamanos en si, respeta la legibilidad. El texto de cuerpo rara vez necesita bajar de 15 o 16 pixeles, y subir de 20 para texto de cuerpo suele perjudicar la longitud de linea. Los titulares pueden tener un rango mucho mas amplio: un titular principal puede ir de 28 pixeles en un telefono a 64 en un ordenador. La clave es que el rango coincida con el trabajo del elemento: el texto de cuerpo se mantiene tranquilo, los titulares ganan dramatismo.
Unidades mas alla de los pixeles
La calculadora trabaja en pixeles porque los pixeles son la unidad mas facil de razonar, pero clamp() acepta cualquier unidad. Muchos equipos prefieren unidades rem para que el texto respete el tamano de fuente por defecto del navegador del usuario, lo cual es una ventaja de accesibilidad: un usuario que pone su tamano por defecto mas grande recibe texto mas grande en todas partes. Para convertir, divide tus valores en pixeles por 16: 16 pixeles es 1rem, 24 pixeles es 1.5rem, y las mismas cuentas de pendiente sirven para los valores rem.
Errores comunes
El error mas comun es un valor preferido que nunca se aplica de verdad: si tu pendiente es demasiado empinada o demasiado suave, el tamano se queda en el minimo o el maximo en la mayoria de anchos y solo se mueve en una banda estrecha. Comprueba la vista previa en varios anchos, no solo en los extremos. Otro error es olvidar las unidades en el termino central: 0.8333vw + 13.3334px necesita ambas unidades, y si falta una toda la declaracion queda invalidada.