Escala Tipográfica
Genera una escala tipográfica modular para tu diseño. Elige el tamaño base y la proporción para crear tamaños de encabezado perfectamente proporcionados.
¿Qué es una escala tipográfica modular?
Una escala tipográfica modular es un conjunto de tamaños de fuente que siguen una proporción matemática constante, como Tercera Mayor (1,25x) o Cuarta Perfecta (1,333x). Cada nivel de h1 a h6 es proporcionalmente mayor que el anterior, creando una tipografía armoniosa y equilibrada.
Cómo elegir la proporción correcta
Las proporciones pequeñas como Minor Second (1,067) crean escalas compactas para interfaces densas. Las grandes como Perfect Fourth (1,333) o Proporción Áurea (1,618) crean contrastes dramáticos para sitios editoriales. Major Third (1,25) es una opción segura para la mayoría de tamaños de pantalla.
Usar el CSS generado
El panel CSS genera propiedades personalizadas en :root (ej. --text-h1) y selectores directos para cada nivel de encabezado. Pégalos en tu hoja de estilos. Usa rem para un tamaño accesible que escale con las preferencias del navegador, o px para tamaños fijos.
Escala tipográfica y accesibilidad
Usar rem en lugar de px hace que tu tipografía escale con el tamaño de fuente del sistema del usuario, un aspecto importante de la accesibilidad. WCAG recomienda que el texto pueda ampliarse hasta un 200%. Una escala modular con rem cumple este requisito automáticamente.