Generador de escala tipográfica
Armá una jerarquía de tamaños de letra armónica a partir de un tamaño base y una proporción, y copiá las variables CSS.
Tu escala
Los tamaños en rem asumen un tamaño de raíz de 16 px.
Tus tamaños
Cómo crear una escala tipográfica armónica
Cada tamaño se calcula como tamaño base × proporción elevada al paso. Con base 16 px y proporción 1,25, por ejemplo, los pasos son 16, 20, 25, 31,25 y 39,06 px. Elegí la base y la proporción, mirá la vista previa y copiá las variables CSS para usarlas en tu sitio.
La escala resuelve los tamaños; el contraste de color también influye en la lectura: comprobalo con el verificador de contraste. Y para que tus textos se entiendan, medí su claridad con el medidor de legibilidad.
Preguntas frecuentes
¿Qué es una escala tipográfica?
Es una serie de tamaños de letra donde cada uno resulta de multiplicar el anterior por una misma proporción. Da jerarquía y armonía a los títulos, subtítulos y textos, porque los saltos de tamaño siguen una lógica en lugar de elegirse a ojo.
¿Qué proporción conviene elegir?
Las proporciones chicas (1,125 a 1,25) funcionan bien para sitios con mucho texto o interfaces; las medianas (1,333 a 1,5) para páginas con títulos más protagonistas; y las grandes (1,618) para piezas muy expresivas, como portadas o carteles.
¿Por qué usar rem y no solo px?
El rem es relativo al tamaño de texto que configura el navegador. Si una persona agranda la letra por accesibilidad, los tamaños en rem escalan con ella, mientras que los píxeles fijos no.
¿Debo usar todos los tamaños?
No. Una escala es un menú: elegí los tamaños que necesitás y ajustá el resto del diseño (interlineado, márgenes) en consecuencia. Y recordá que el tamaño en pantalla móvil suele necesitar una proporción menor que en computadora.
Otras herramientas
¿Querés una web con una tipografía bien pensada?
Diseñamos sitios y marcas con jerarquía clara, legibles y rápidos. El diagnóstico es gratis.