Type Scale Generator
Genera escalas tipográficas modulares con variables CSS y config Tailwind.
① Establece tamaño base y ratio ② Haz clic en Generar Escala ③ Copia variables CSS o tokens
¿Qué es una escala tipográfica modular?
Una escala tipográfica modular es una secuencia de tamaños de fuente donde cada paso es el anterior multiplicado por un ratio fijo. Los ratios comunes incluyen la Cuarta Perfecta (1.333), la Tercera Mayor (1.250) y la Proporción Áurea (1.618). Usar una escala garantiza armonía visual entre títulos, cuerpo de texto y leyendas.
Preguntas frecuentes
Una escala tipográfica modular es un conjunto de tamaños de fuente derivados multiplicando un tamaño base por un ratio constante. En lugar de elegir tamaños arbitrariamente, obtienes valores matemáticamente relacionados que crean armonía visual.
Cada paso n relativo a la base usa la fórmula: tamaño = base × ratio^n. Para n=0 el tamaño base, n=1 base × ratio, pasos negativos base × ratio^(-1).
Minor Second y Major Second para escalas sutiles. Minor y Major Third para contraste moderado. Perfect Fourth (1.333) es una elección clásica. Perfect Fifth y Golden Ratio para tipografía display dramática.
Copia el output CSS Variables y pégalo dentro de :root { }. Luego usa las variables: font-size: var(--text-xl).
Copia el Config Tailwind y pégalo en theme.fontSize en tailwind.config.js. Usa clases como text-xl con tus valores personalizados.
rem para tamaños de fuente — respeta las preferencias del navegador del usuario. em para tamaños relativos al componente padre. px solo para elementos decorativos fijos.
Jerarquía visual clara guía a los lectores. WCAG 1.4.4 requiere que el texto sea redimensionable al 200% — las escalas rem lo garantizan.