Generador de escala tipográfica
Genera una escala tipográfica modular a partir de un tamaño base y una proporción, con una proporción menor para móvil. Previsualiza con tu fuente y exporta tamaños en CSS, SCSS o Tailwind.
Cargando Generador de escala tipográfica…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de escala tipográfica
- 1
Abre Generador de escala tipográfica en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
Una escala tipográfica es un conjunto de tamaños de fuente que crecen con la misma proporción, de modo que títulos, texto y pies de foto se sienten relacionados en lugar de aleatorios. Este generador de escala tipográfica calcula la escala a partir de un tamaño base y una proporción, la previsualiza con texto real en la fuente que elijas y exporta los tamaños como código.
Cómo crear una escala tipográfica
- Define el tamaño base, normalmente 16px para el texto principal.
- Elige una proporción, desde la segunda menor (1.067) hasta la quinta justa (1.5), la proporción áurea (1.618) y más.
- Define el número de pasos hacia arriba (títulos) y pasos hacia abajo (texto pequeño).
- Define una proporción móvil menor para que los títulos no saturen las pantallas pequeñas.
- Elige una fuente y escribe un texto de ejemplo para previsualizar, y luego copia el código CSS, SCSS o Tailwind.
Cómo elegir una proporción
| Proporción | Nombre | Sensación |
|---|---|---|
| 1.125 | Segunda mayor | Sutil, buena para apps densas |
| 1.2 | Tercera menor | Equilibrada, habitual en sitios web |
| 1.25 | Tercera mayor | Jerarquía clara para blogs |
| 1.333 | Cuarta justa | Títulos marcados |
| 1.5 a 1.618 | Quinta justa, proporción áurea | Espectacular, para landing pages |
Ejemplo con 16px y 1.25
12.8px, 16px, 20px, 25px, 31.25px, 39.06px, 48.83px. Cada tamaño es el anterior multiplicado por 1.25.
Consejos
- Usa una proporción más suave en móvil, por ejemplo 1.2 en teléfonos y 1.333 en escritorio.
- Redondea los tamaños a píxeles enteros o medios en tus design tokens finales.
- Combina los tamaños con el interlineado: alrededor de 1.5 para el texto principal y entre 1.1 y 1.25 para títulos grandes.
- Usa unidades rem en CSS para que el texto respete el ajuste de fuente del navegador del usuario.
Completa tu sistema de diseño con una cuadrícula del generador de sistemas de cuadrícula y colores del generador de paletas de colores.
Preguntas frecuentes
¿Qué es una escala tipográfica modular?
Un conjunto de tamaños de fuente en el que cada tamaño es el anterior multiplicado por la misma proporción, lo que da un ritmo visual coherente.
¿Qué tamaño de fuente base debo usar?
16px es el valor predeterminado de los navegadores y una buena base para el texto principal en la mayoría de los sitios web.
¿Qué proporción es la mejor?
No hay una única mejor. 1.2 o 1.25 sirven para la mayoría de los sitios; 1.125 funciona en interfaces densas; 1.333 o más dan títulos espectaculares.
¿Por qué usar una proporción distinta en móvil?
Las proporciones grandes hacen que los títulos sean enormes en pantallas pequeñas. Una proporción móvil menor mantiene la jerarquía y cabe en la pantalla.
¿Puedo exportar a Tailwind?
Sí. Elige el formato Tailwind para obtener una configuración fontSize con tu escala.
¿Los tamaños de fuente deben ir en px o en rem?
Se recomienda rem en CSS porque se adapta a los ajustes del navegador del usuario. La herramienta puede darte valores para usar como rem.