Saltar al contenido

Escala Tipográfica

Genere una escala tipográfica profesional desde el tamaño base y proporción deseada. Exporte en CSS, SCSS o JSON.

Sin registro 100% gratis Privado
px

El tamaño base de fuente en píxeles

Nivel que corresponde al tamaño base

Escala tipográfica ratio: 1.250
Nombre px Vista previa

¿Te fue útil esta herramienta?

Escala Tipográfica — Genera Escalas Modulares de Tipografía con CSS

Escala Tipográfica es una herramienta que genera escalas modulares de tipografía a partir de un tamaño base y un ratio configurable. Elige entre ratios clásicos como tercera menor (1.200), cuarta perfecta (1.333), razón áurea (1.618) y más para crear jerarquías visuales armónicas en tus proyectos web.

La herramienta calcula automáticamente los tamaños para cada nivel de encabezado (h1–h6) y texto base, generando las propiedades CSS listas para copiar y pegar en tu hoja de estilos. Visualiza en tiempo real cómo se ven los diferentes niveles tipográficos con tu escala seleccionada.

Diseñadores web, desarrolladores front-end y tipógrafos digitales utilizan esta herramienta para establecer sistemas tipográficos consistentes, crear design tokens para sistemas de diseño y garantizar ritmo vertical en sus interfaces.

Escala Tipográfica forma parte de la suite de herramientas gratuitas de facilita.tools. Disponible en portugués, inglés y español, optimizado para navegadores de escritorio y móviles.

Preguntas Frecuentes

¿Qué es una escala tipográfica modular?
Es una secuencia de tamaños de fuente donde cada nivel se multiplica por un ratio constante, creando una progresión armónica. Por ejemplo, con ratio 1.25 y base 16px, los tamaños serían 16, 20, 25, 31.25px, etc.
¿Qué ratio tipográfico debo elegir?
Depende del contraste que necesites. Ratios menores como 1.125 crean jerarquías sutiles ideales para texto denso. Ratios mayores como la razón áurea (1.618) generan mayor contraste, ideal para landing pages y títulos impactantes.
¿Puedo exportar el CSS generado directamente?
Sí. La herramienta genera propiedades CSS personalizadas (custom properties) y clases que puedes copiar con un clic e integrar directamente en tu proyecto.