Herramientas de color

Generador de CSS Clamp (Tipografía Fluida)

Type-scale que crece con el viewport. Elige tamaños mínimo y máximo de fuente, anchos mínimo y máximo de pantalla — recibe una regla clamp() lista con slider de previsualización en vivo.

Unidad de salida

rem px

Fuente raíz (px)

Fuente mín. (px)

Fuente máx. (px)

Viewport mín. (px)

Viewport máx. (px)

Salida

Vista del viewport: 800px → Fuente calculada: 18.0px

El veloz murciélago hindú comía feliz cardillo y kiwi

Escala en lote (tamaños px separados por coma)

Escala en lote (custom properties CSS)

¿Qué es la tipografía fluida?

La tipografía fluida es una técnica CSS donde el texto escala suavemente entre un tamaño mínimo y máximo conforme cambia el ancho del viewport — en vez de saltar en breakpoints de media queries. Los navegadores modernos lo soportan nativamente vía clamp(MIN, FÓRMULA, MAX), que evalúa la fórmula y aprisiona el resultado entre el piso y el techo. La fórmula es típicamente una mezcla de offset fijo y término relativo al viewport (vw), así el valor sigue al ancho de pantalla dentro del rango definido.

Cómo usar este generador

Elige el tamaño de fuente mínimo y máximo para los anchos menor y mayor. Luego elige el rango de viewport — típicamente un mínimo de móvil (320–375 px) y un máximo de escritorio (1200–1440 px). La caja de salida muestra la declaración clamp() exacta para pegar en tu CSS. Arrastra el slider de previsualización para ver lo que la regla produce en cualquier ancho sin redimensionar el navegador. Para una escala completa (h1, h2, h3, body, small), suelta valores px separados por coma en la caja de batch y recibe un conjunto de custom properties de una vez.

Las matemáticas detrás de clamp()

Dados (minVw, minFont) y (maxVw, maxFont) como dos puntos, la función lineal que pasa por ambos es fuente = pendiente · vw + intercepto donde pendiente = (maxFont − minFont) / (maxVw − minVw) y intercepto = minFont − pendiente · minVw. Convertir la pendiente a unidades vw la multiplica por 100, y el intercepto se vuelve rem dividiendo entre tu tamaño de fuente raíz (así el zoom de accesibilidad sigue funcionando). El término del medio del clamp() es entonces {intercepto}rem + {pendiente*100}vw.

Preguntas frecuentes

¿Por qué usar rem en vez de px en la salida?

Los navegadores escalan valores rem cuando el usuario cambia el tamaño de fuente por defecto en la configuración del navegador, pero no escalan px absolutos. Usar rem en el piso, techo e intercepto del clamp() preserva las preferencias de accesibilidad y respeta WCAG 1.4.4 Resize Text. El término vw no necesita conversión — ya es relativo al viewport.

¿Qué rango de viewport debo usar?

Una elección común es 320 px (móvil pequeño) a 1280 px (laptop típica). Si soportas pantallas ultra-wide, sube el extremo superior a 1920 px para que el texto no siga creciendo más allá de tu intención de diseño. Si tu dispositivo mínimo es tablet, sube el extremo inferior a 600 px. Cuanto más estrecho el rango, más empinada la pendiente, así la fuente crece más rápido dentro de él.

¿clamp() funciona en todas partes?

Sí — clamp(), min() y max() han sido soportados en cada navegador grande desde inicios de 2020 (Chrome 79, Safari 13.4, Firefox 75). Para navegadores pre-2020, harías fallback con una declaración font-size regular fuera de la regla, que se sobrescribe en cualquier parte moderna.

¿Puedo usar clamp() para algo más que font-size?

Por supuesto. Padding, gap, margin, width, border-radius — cualquier cosa que tome un valor de longitud funciona igual. El espaciado fluido es uno de los usos de mayor palanca: una sección hero con padding clamp(2rem, 5vw, 6rem) se siente apropiada de móvil a ultra-wide sin una sola media query.

¿Cómo construyo una escala tipográfica completa?

Define un tamaño base (16 px) y una razón (1,25 tercera menor; 1,333 cuarta perfecta; 1,618 áurea) — multiplica repetidamente para obtener una secuencia (16 → 20 → 25 → 31 → 39 → 49 → 61). Pega esos valores en la caja de batch y la herramienta emite un clamp() fluido por nivel como custom property, listo para meter en :root.

¿Qué es la advertencia slope-intercept que muestran algunas herramientas?

Algunos generadores avisan cuando el coeficiente vw excede un umbral como 5 vw, porque con esa pendiente un zoom pequeño o una pantalla amplia hacen que el texto salte inesperadamente. Esta herramienta no impone un límite — pero si tu salida luce como clamp(1rem, 0,5rem + 8vw, 5rem), considera ampliar el rango de viewport para que la pendiente baje a menos de 4–5 vw.

Generador de CSS Clamp (Tipografía Fluida)