Generador de Escala Tipográfica
El generador de escala tipográfica calcula una escala modular a partir de un tamaño de fuente base y un ratio, desde Minor Second (1.067) hasta la proporción áurea (1.618), y devuelve nueve tamaños como propiedades personalizadas de CSS.
Acerca de esta herramienta
El generador de escala tipográfica calcula una escala modular a partir de un tamaño de fuente base y un ratio, desde Minor Second (1.067) hasta la proporción áurea (1.618), y devuelve nueve tamaños como propiedades personalizadas de CSS.
Cómo se usa
- Introduce un tamaño de fuente base en píxeles (16 px es el valor por defecto del navegador).
- Elige un ratio de escala, como Major Third (1.25).
- Selecciona la unidad de salida: rem, px o em.
- Haz clic en Copiar variables CSS para usar los tamaños de --xs a --4xl.
Datos útiles
- Cada paso de una escala modular multiplica el tamaño anterior por el mismo ratio.
- El generador produce nueve pasos: dos por debajo de la base, la base y seis por encima.
- Los ratios pequeños (1.067–1.2) van bien en interfaces densas; los grandes (1.333–1.618), en páginas editoriales con títulos grandes.
- Los valores rem se calculan respecto a un tamaño de fuente raíz de 16 px.
- Usar rem permite que el texto se adapte al tamaño de fuente configurado en el navegador del usuario.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Qué es una escala tipográfica modular?
Es un conjunto de tamaños de fuente en el que cada tamaño es el anterior multiplicado por un ratio fijo, lo que mantiene relacionados visualmente los títulos y el texto.
¿Qué ratio de escala tipográfica debo usar?
Major Third (1.25) y Perfect Fourth (1.333) son opciones versátiles muy populares. Usa un ratio menor para apps y dashboards y uno mayor para landing pages y blogs.
¿Los tamaños de fuente deben ir en rem o en px?
En general se recomienda rem porque respeta el tamaño de fuente preferido del usuario en el navegador, lo que mejora la accesibilidad.
¿Qué tamaño de fuente base debo usar?
16 px es el valor estándar por defecto de los navegadores y una buena base para el texto; muchos sitios usan 16–18 px para una lectura cómoda.