Escala de tipografía responsiva con CSS clamp(), sin media queries
Una escala modular fluida que se redimensiona entre dos viewports con una sola declaración clamp() por encabezado. Elige base + ratio, copia CSS + config Tailwind.
Dos formas en que la mayoría de los equipos manejan tipografía responsiva son malas. La primera es fijar el body en 16px y olvidarse — la tipografía se ve minúscula en un monitor 4K y apretada en un móvil. La segunda es apilar cinco media queries por encabezado — el archivo CSS se duplica, y los gaps entre breakpoints parecen una escalera.
La forma correcta en 2025 es CSS clamp(). Una declaración por encabezado. Resize fluido entre dos viewports. Sin media queries. El truco es calcular slope e intercept correctamente para que la tipografía golpee exactamente tu mínimo en el viewport más pequeño y exactamente tu máximo en el más grande.
Qué te da
- Siete niveles de tipografía — body, h6, h5, h4, h3, h2, h1 — generados desde un tamaño base y una ratio de escala
- Dos formatos de salida — CSS custom properties + clases utilitarias, y config
fontSizede Tailwind - Ocho ratios pre-hechos desde segunda menor (1.067, silenciosa) hasta dorada (1.618, teatral)
- Vista previa live en cualquier viewport — redimensiona el browser y mira la escala deslizarse
La fórmula clamp()
Para un encabezado que debe ser 20px a 360px de viewport y 32px a 1400px, quieres:
font-size: clamp(20px, slope·vw + intercept, 32px);Donde slope = (32 − 20) / (1400 − 360) = 0,01154, expresado como 1.154vw. E intercept = 20 − 0,01154 × 360 = 15,85px. Por tanto:
font-size: clamp(20px, 1.154vw + 15.85px, 32px);Hacer esa aritmética siete veces por proyecto es molesto. Esta herramienta lo hace por ti, en todos los niveles de encabezado, para cualquier tamaño base y ratio.
Elegir una ratio
Los ratios no son intercambiables. Un 1,125 (segunda mayor) se siente editorial — periódicos de lectura larga, posts de journal, cualquier cosa donde quieres desaparecer. Un 1,333 (cuarta perfecta) se siente confiado — sitios de marketing, páginas de producto, decks. Un 1,618 (dorado) se siente teatral — páginas hero, museos, moda. Elige el ratio que combine con el espacio donde vas a poner la tipografía, no el que suene más prestigioso.
Si no sabes cuál elegir, empieza en 1,25 (tercera mayor). Funciona para casi todo y no señala nada en particular.
Por qué tiene clases utilitarias
CSS custom properties solas dejan la conversación de line-height sin terminar. Horneamos line-heights emparejados en las clases utilitarias — 1,05 para h1, subiendo hasta 1,55 para body. Los encabezados deben respirar menos que los párrafos. Los defaults de la herramienta están afinados para sans-serif en el ratio default; querrás ajustarlos para serif o para escalas inusualmente apretadas.
Úsala
Archivo HTML único. Abrir en GitHub →. Ábrelo en un browser. Desliza los controles. Copia la salida. Pega en tu design system.