Texto que escala sin media queries
Un título de 16 px en el móvil y 32 px en el escritorio antes pedía dos o tres puntos de corte. Con clamp() basta una línea: el tamaño crece suavemente con la pantalla entre un suelo y un techo. Lo difícil es el valor central, una mezcla de un tamaño fijo y un porcentaje del ancho de pantalla. Este generador lo calcula a partir de los dos tamaños que te importan.
Obtén un valor clamp() en cuatro pasos
- Introduce el tamaño más pequeño y el más grande, por ejemplo 16 y 32.
- Introduce los anchos de pantalla en los que se aplica cada uno, por ejemplo 320 y 1280 píxeles.
- Elige px o rem y, si tu sitio cambia el tamaño de fuente raíz, los píxeles de 1rem. Elige la propiedad CSS para obtener una declaración lista.
- Copia el valor o la declaración. La tabla y el control deslizante muestran el tamaño en cualquier ancho intermedio.
Qué hacen las tres partes de clamp()
El resultado se parece a clamp(1rem, 0.6667rem + 1.6667vw, 2rem). El primer valor es el tamaño más pequeño que puede tomar la propiedad, el último el más grande y el del medio la recta que los une. La herramienta calcula la pendiente como la diferencia de tamaño dividida entre la diferencia de ancho, y la parte fija a partir de dónde esa recta cruza un ancho de pantalla de cero. Si el tamaño debe reducirse en pantallas grandes, la herramienta pone primero el valor menor, porque clamp() siempre espera el mínimo primero.
Usar rem mantiene el zoom
Los tamaños en rem siguen el tamaño de fuente que el visitante ha elegido en el navegador, los valores en px no. Un tamaño solo en vw ignora por completo el zoom, lo que puede suspender las pruebas de accesibilidad. Combinar una parte en rem con la parte en vw, como hace esta herramienta con tamaños en rem, mantiene el texto ampliable. Prueba tu diseño al 200 % de zoom y no dejes que el tamaño más grande supere unas dos veces y media el más pequeño.
Nada sale de tu navegador
Los valores se calculan en la propia página. El generador no hace peticiones de red ni guarda nada.