Cómo funciona esta calculadora de clamp()
Eliges dos puntos: el tamaño que quieres en la pantalla más estrecha y el que quieres en la más ancha. La calculadora traza una línea recta entre ambos y la convierte en una única expresión CSS clamp() con tres partes: un mínimo, un valor preferido y un máximo. Por debajo del viewport mínimo el valor se queda en el mínimo, por encima del máximo se queda en el máximo y, entre ambos, escala con suavidad sin una sola media query.
La pendiente indica cuántos píxeles crece el valor por cada píxel de ancho de viewport; se escribe en unidades vw, donde 1vw es el 1 % del ancho del viewport. La intersección es el punto donde esa línea cortaría una pantalla de ancho cero. Juntas forman el argumento central, por ejemplo 0.8333rem + 0.8333vw.
Por qué el resultado usa rem
Incluir una parte en rem dentro del valor preferido mantiene el texto fluido conectado con el tamaño de fuente que el lector ha configurado en su navegador. Un tamaño construido solo con vw ignora esa preferencia y puede debilitar el zoom. Por eso rem es la salida predeterminada; px está disponible si tus tokens de diseño están en píxeles, y el campo de fuente raíz cubre los proyectos que cambian el tamaño de fuente del elemento html.
Vista previa, breakpoints y accesibilidad
Arrastra el control de viewport de 320 a 1920 px para ver el texto al tamaño con el que se mostraría en ese ancho. La tabla recoge los tamaños calculados en 320 y 375 px para móviles, 768 y 1024 px para tabletas, y 1280, 1440 y 1920 px para escritorio, para que compruebes que los títulos no quedan apretados en el móvil ni desproporcionados en monitores anchos.
El criterio de conformidad 1.4.4 de las WCAG exige que el texto pueda ampliarse al 200 % sin perder contenido. El zoom del navegador también reduce el viewport medido en píxeles CSS, de modo que una tipografía fluida muy agresiva puede crecer menos de lo esperado. Una regla práctica muy extendida es que el máximo no supere 2,5 veces el mínimo, y la calculadora te avisa cuando lo sobrepasas.
Compartir y exportar
Cada ajuste se guarda en la URL de la página, así que puedes añadir el resultado a marcadores o enviárselo a un compañero. Copia el valor clamp() sin más, una propiedad personalizada CSS para tu :root o una clase arbitraria de Tailwind. ¿Necesitas un conjunto completo de tamaños? Cambia al modo escala tipográfica para exportar una escala modular como variables CSS.