Generador de escala modular tipográfica
Crea una escala de tamaños de fuente coherente a partir de una base y una razón
Elige un tamaño de fuente base y una razón (proporción áurea, quinta justa, etc.) y la herramienta calcula automáticamente nueve niveles, de XS a 5XL, mostrándolos en una vista previa en vivo. Es ideal para diseñadores y desarrolladores front-end que están definiendo el sistema tipográfico de una web: el resultado se copia directamente como variables CSS o como configuración de Tailwind CSS lista para pegar en el proyecto. Todos los cálculos se hacen en el navegador y nada se envía a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Introduce el tamaño de fuente base en píxeles.
- Elige en la lista la razón que quieras, desde 1,067 (segunda menor) hasta 2,000 (octava).
- Cambia el texto de muestra por el que prefieras para ver el tamaño real de cada nivel.
- Copia las variables CSS o la configuración de Tailwind generadas con el botón de copiar y aplícalas en tu proyecto.
Preguntas frecuentes
- ¿Qué razón me conviene elegir?
- Para sitios con mucho texto seguido funcionan mejor razones pequeñas, entre 1,125 y 1,25; para una landing con títulos muy contrastados encajan razones grandes como 1,5 o la proporción áurea (1,618). Lo más fiable es compararlas tú en la vista previa.
- ¿Por qué el resultado sale en rem y no en px?
- Porque rem respeta el tamaño de fuente que el usuario haya configurado en su navegador, lo que mejora la accesibilidad, y es el estándar para la tipografía responsive. Aun así, verás el valor en px al lado como referencia.
- ¿Cómo llevo estos valores a un proyecto real?
- Copia el bloque de variables CSS y pégalo en tu :root, o copia la configuración de Tailwind y pégala en el apartado fontSize de tu tailwind.config. Ya está listo para usar.