Generador de escala tipográfica con clamp() fluido

Una escala modular es un conjunto de tamaños de fuente en el que cada tamaño es el anterior multiplicado por la misma proporción. En lugar de elegir a ojo 14, 18, 22 y 31, eliges una base y una proporción, y cada titular, pie y etiqueta recibe un tamaño relacionado con los demás. La idea viene de la música, donde los intervalos entre notas son proporciones de frecuencia, y la popularizó en la web Tim Brown con el artículo «More Meaningful Typography» (A List Apart, 2011).

Los pasos negativos dan pies de foto y letra pequeña; los positivos, titulares. Proporciones habituales y dónde encajan:

• 1,067 segunda menor, 1,125 segunda mayor: muy contenidas; paneles, aplicaciones con muchos datos, pantallas pequeñas.
• 1,2 tercera menor, 1,25 tercera mayor: la elección más común para interfaces de producto y documentación.
• 1,333 cuarta justa, 1,414 cuarta aumentada: jerarquía clara para páginas de marketing y blogs.
• 1,5 quinta justa, 1,6 sexta menor, 1,618 proporción áurea: muy expresivas; usa pocos pasos o los titulares serán enormes en el paso 4.

No hace falta redondear: los navegadores dibujan tamaños con decimales y la coherencia entre pasos importa más que los números enteros.

Una única escala rara vez sirve a la vez para un móvil de 360 px y un escritorio de 1440 px: los titulares que quedan bien en escritorio se desbordan en móvil. La solución clásica era un conjunto de media queries que saltan de un tamaño a otro. La tipografía fluida, en cambio, hace crecer cada tamaño de forma lineal con el ancho de la pantalla entre dos puntos y lo fija fuera de ellos, y CSS lo expresa en una sola declaración:

Este generador permite definir por separado la base y la proporción de cada extremo, el enfoque de Utopia (utopia.fyi). Una proporción menor en móvil y mayor en escritorio mantiene casi constante el texto de lectura mientras los titulares ganan presencia en pantallas grandes. Todos los valores se escriben en rem, así que la escala respeta el tamaño de letra que el usuario tenga configurado.

Tipografía fluida y accesibilidad

El criterio WCAG 1.4.4 exige que el texto pueda ampliarse al 200 % sin pérdida de contenido. El zoom del navegador agranda los valores en rem, pero no en vw, así que un tamaño que depende mucho del ancho de pantalla puede no duplicarse al hacer zoom. Dos reglas mantienen segura la tipografía fluida:

• Incluye siempre rem en el valor preferido: nunca escribas solo 5vw. El generador siempre devuelve rem + vw.
• Mantén el máximo en 2,5 veces el mínimo como mucho. Como demostró Maxwell Barvian (Smashing Magazine, 2023), si el tamaño mayor de un clamp() no supera 2,5 veces el menor, el texto siempre puede llegar al 200 % de zoom. Los pasos que incumplen esta regla se señalan sobre la vista previa.

• Empieza por el texto de lectura. 16 px es el valor por defecto del navegador y un buen mínimo para leer; los textos largos suelen usar 17–18 px en escritorio. Las etiquetas de interfaz y las celdas de tabla pueden usar el paso −1.
• Limita el número de pasos. La mayoría de productos necesita 2 pasos bajo la base y 4–5 por encima. Más tamaños no aclaran la jerarquía: la complican.
• Reduce el interlineado a medida que crece el tamaño. Alrededor de 1,5 para el texto de lectura y 1,1–1,2 para titulares grandes; la exportación a Tailwind incluye un interlineado sugerido por paso.
• Usa proporciones menores en pantallas pequeñas. 1,2 en móvil y 1,25–1,333 en escritorio es una combinación segura para interfaces de producto.
• Los textos breves de interfaz también deben leerse bien. Tooltips, pistas de onboarding y elementos de checklist suelen ir a 12–13 px para caber en una burbuja pequeña. Mantenlos en el paso −1 o mayor y acorta el texto; te ayudará la calculadora de tiempo de lectura de tooltips.
• Comprueba el contraste en el tamaño más pequeño. Los pesos finos y los tamaños pequeños necesitan más contraste; prueba las parejas en el comprobador de contraste de color.

1. Brown T. More Meaningful Typography. A List Apart, 2011 — escalas modulares para la web.
2. Bringhurst R. The Elements of Typographic Style. Hartley & Marks — la escala tipográfica clásica y los intervalos musicales.
3. Utopia (utopia.fyi), J. Gilyead y T. Hill — escalas fluidas con proporciones distintas por ancho de pantalla.
4. Barvian M. Addressing Accessibility Concerns With Using Fluid Type. Smashing Magazine, 2023 — la regla de 2,5× para el zoom al 200 %.
5. W3C. WCAG 2.2, criterio 1.4.4 Cambio de tamaño del texto.
6. W3C. CSS Values and Units Module Level 4 — clamp(), rem y vw.