Generador de Escala Tipográfica
Sobre esta herramienta
Genera una escala tipográfica completa (los tamaños de fuente para títulos, subtítulos y texto de un sistema de diseño) a partir de un tamaño base y una proporción matemática, como la proporción áurea (1.618), la cuarta justa (1.333) o la tercera menor (1.2), entre otras. Cada tamaño de la escala se calcula multiplicando el anterior por la proporción elegida, produciendo una jerarquía visual que se siente consistente y armónica en toda la interfaz, en vez de tamaños elegidos al azar. Muestra los valores en píxeles y en rem junto con una vista previa en vivo de cada tamaño, lista para usar en las variables de tu hoja de estilos.
Preguntas frecuentes
¿Qué proporciones puedo elegir?
Proporciones comunes como la áurea (1.618), la cuarta justa (1.333), la tercera menor (1.2), entre otras.
¿Cómo se calcula cada tamaño de la escala?
Cada tamaño se calcula multiplicando el anterior por la proporción elegida, produciendo una jerarquía matemáticamente consistente.
¿Muestra los valores en rem, no solo en píxeles?
Sí, muestra los valores tanto en píxeles como en rem.
¿Puedo ver una vista previa de los tamaños antes de usarlos?
Sí, hay una vista previa en vivo de cada tamaño de la escala.
¿Por qué usar una escala matemática en vez de elegir tamaños a mano?
Produce una jerarquía visual que se siente consistente y armónica en toda la interfaz, en vez de tamaños elegidos al azar.
Herramientas relacionadas
Generador de Degradados
Crea degradados CSS personalizados y copia el código
LocalGenerador de Sombras CSS (box-shadow)
Crea sombras CSS personalizadas y copia el código box-shadow
LocalGenerador de Botones CSS
Diseña botones CSS personalizados y copia el código HTML/CSS
LocalGenerador de Border-Radius CSS (formas orgánicas)
Crea formas orgánicas y 'blobs' con border-radius CSS
LocalGenerador de Tarjetas CSS (Cards)
Diseña tarjetas CSS personalizadas y copia el código HTML/CSS
LocalGenerador de Spinners CSS (indicadores de carga)
Crea indicadores de carga (spinners) animados en CSS puro