Generador de Escala Tipográfica
Crea una escala tipográfica modular a partir de un tamaño base y una proporción — vista previa en vivo, tabla px/rem y variables CSS listas para copiar.
602 visitas
Por qué una escala modular
En lugar de elegir los tamaños de los títulos a ojo, una escala modular multiplica un tamaño base por una proporción fija en cada paso: una base de 16 px con una proporción de 1,25 (tercera mayor) da 20, 25, 31,3, 39,1, 48,8... Los tamaños se relacionan como intervalos musicales, y toda la jerarquía se mantiene coherente — cambia la base o la proporción y todo se reafina junto.
Proporciones habituales: 1,125 (segunda mayor — interfaces densas), 1,25 (tercera mayor — la opción segura por defecto), 1,333 (cuarta justa — editorial), 1,618 (proporción áurea — dramática, necesita pocos niveles). Las variables CSS generadas se pegan directamente en tu hoja de estilos; los valores rem asumen una raíz de 16 px.
Preguntas Frecuentes
¿Qué proporción debería elegir?
El trabajo de producto/UI suele situarse entre 1,125 y 1,25 (los títulos no son mucho más grandes que el cuerpo de texto); las páginas de marketing y editoriales soportan bien 1,333-1,618. Si el h1 "grita", baja la proporción un escalón en vez de ajustar un tamaño a mano.
¿Por qué la escala baja por debajo de la base?
Los pasos negativos (base ÷ proporción) dan pies de foto y letra pequeña que pertenecen al mismo sistema — 12,8 px en una escala 16/1,25 en lugar de un 13 arbitrario.
¿Debo usar px o rem?
rem en el CSS: los usuarios que aumentan el tamaño de fuente del navegador obtienen una escala proporcionalmente más grande. La columna px sirve para maquetas en herramientas de diseño.
Herramientas Similares
Reportar un Problema
Generador de Escala Tipográfica