Calculadora de escala tipográfica: tamaños de títulos con la proporción áurea
Genera una escala tipográfica modular a partir del tamaño base y una proporción (áurea, cuarta justa, tercera mayor…), con cada nivel en px y en rem.
Cómo funciona
tamaño(nivel) = base × proporción^nivel (nivel 0 = texto; los niveles positivos son títulos más grandes y los negativos, textos más pequeños)
Una escala modular calcula cada tamaño de letra multiplicando la base por una proporción fija elevada al número de nivel, de modo que cada título guarda la misma relación con el siguiente, igual que los intervalos en la música (de ahí nombres como «cuarta justa» o «quinta justa»). La proporción áurea (1.618) separa mucho los tamaños y da titulares muy llamativos; proporciones más suaves como 1.2 o 1.25 mantienen los títulos más cerca entre sí, algo útil en interfaces con mucha información. Como la escala es multiplicativa, sigue siendo armónica con cualquier base, y expresarla en rem permite que toda la jerarquía crezca o se reduzca con el tamaño de fuente que elija quien visita tu sitio.
Ejemplo resuelto
Sofía diseña un blog con texto de 16 px y la proporción áurea 1.618. Sus títulos quedan así: H4 = 16 × 1.618 = 25.89 px, H3 = 16 × 1.618² = 41.89 px, H2 = 16 × 1.618³ = 67.77 px y H1 = 16 × 1.618⁴ = 109.66 px. Con una raíz de 16 px, el H1 equivale a 109.66 ÷ 16 ≈ 6.854 rem, y el texto pequeño baja a 16 ÷ 1.618 ≈ 9.89 px.
Preguntas frecuentes
¿La proporción áurea siempre es la mejor opción para tipografía?
Funciona muy bien en titulares grandes de revistas o landing pages, pero 1.618 separa tanto los tamaños que los títulos intermedios pueden verse desproporcionados en una app. Muchos sistemas de diseño prefieren proporciones entre 1.2 y 1.333 para pasos más contenidos.
¿Por qué conviene tener los tamaños en rem además de en px?
El rem hace que toda la escala crezca o se reduzca con el tamaño de letra predeterminado del navegador, lo cual es clave para la accesibilidad. La columna en px es práctica para Figma y para las especificaciones de diseño.
¿Cuántos niveles debe tener una escala tipográfica?
La mayoría de los sitios necesitan un tamaño de texto, dos o tres niveles de título por encima y un tamaño pequeño para pies de foto. Puedes generar más niveles, pero usarlos todos suele producir demasiados tamaños casi iguales.
¿Qué es una escala tipográfica modular?
Es un conjunto de tamaños de letra que salen de multiplicar una base por la misma proporción una y otra vez. Así los títulos y el texto guardan una relación visual coherente en lugar de elegirse a ojo.
Calculadoras relacionadas
Esta calculadora tiene fines informativos. Verifica los resultados importantes antes de tomar decisiones.