Generador de escala tipográfica.
Una jerarquía tipográfica armónica hace que una interfaz se sienta ordenada y profesional, en vez de improvisada. Esta herramienta genera una escala modular de tamaños a partir de un tamaño base y una razón (como la tercera menor o la proporción áurea), y te entrega los valores en px y rem más el CSS listo para pegar. Ajusta la base y la razón y ve la escala completa al instante, con una vista previa de cada nivel.
Tu escala
Vista previa de la escala
Cómo funciona una escala modular.
Una escala modular multiplica (o divide) el tamaño base por una razón fija para cada nivel. Así los tamaños guardan una relación matemática que el ojo percibe como armónica, igual que las notas de una escala musical, de la que estas razones toman su nombre.
Razones chicas (1,125) dan escalas sutiles, ideales para interfaces densas; razones grandes (1,5 o la áurea 1,618) crean contrastes dramáticos, mejores para landings y titulares de impacto.
Preguntas frecuentes.
¿Qué es una escala modular?
Es un conjunto de tamaños de fuente derivados de un tamaño base y una razón constante. Da jerarquía y armonía visual sin elegir tamaños al azar.
¿Qué razón elijo?
Para apps y dashboards, razones bajas (1,125 a 1,25) mantienen todo compacto. Para landings y marca, razones altas (1,414 a 1,618) dan más impacto.
¿Por qué usar rem y no px?
Los rem se escalan según la preferencia de tamaño del usuario, lo que mejora la accesibilidad. Damos ambos para que uses el que prefieras.
¿Sirve para cualquier tipografía?
Sí. La escala define tamaños; combínala con una buena jerarquía de pesos y espaciado para un sistema tipográfico completo.
Herramientas relacionadas.
El siguiente paso
Un sistema de diseño coherente se nota.
Definir tipografía, color y componentes con criterio es parte de lo que hace Futture. Conversemos.