Generador de escala tipográfica

¿Qué es Generador de escala tipográfica?

El Generador de Escala Tipográfica convierte un tamaño base y una proporción modular en una escala tipográfica completa y matemáticamente coherente, con tantos pasos de encabezado grandes y pasos pequeños de texto secundario como necesites. Además de los tamaños de fuente, deriva un interlineado y un espaciado de letras acordes para cada paso, más una expresión fluida clamp() opcional que interpola entre un viewport móvil y uno de escritorio usando una proporción móvil aparte. Diseñadores y desarrolladores front-end lo usan para crear tokens tipográficos de un design system, mantener tamaños coherentes y pegar CSS, Sass, Tailwind o JSON listos para usar. Escribe cualquier proporción personalizada o elige una clásica, define el tamaño base y la unidad (px o rem), previsualiza con tu propia font-family y copia el formato que necesites.

Cómo usar Generador de escala tipográfica

1. Escribe cualquier proporción personalizada en el campo de proporción, o elige una clásica como Cuarta justa (1.333) en el desplegable de preajustes de los ajustes.
2. Define el tamaño base; será el tamaño del texto de cuerpo y el ancla de la escala.
3. En los ajustes, elige cuántos pasos mayores y menores generar; los pasos menores quedan por debajo de la base para textos secundarios y letra pequeña.
4. Ajusta el interlineado base y el compacto y el espaciado de letras en tamaños grandes, e introduce una font-family para previsualizar la escala con tu propia tipografía.
5. Para tipografía responsiva, define los anchos de viewport mínimo y máximo y una proporción móvil para construir una escala fluida clamp().
6. Cambia el formato de salida entre variables CSS, clamp() fluido, Sass, config de Tailwind y JSON, luego copia el código o el tamaño de un paso concreto.

Ejemplos

proporción 1.333, base 16px, 5 arriba / 1 abajo

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

base 16px, proporción 1.333, proporción móvil 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

cualquier escala, export Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Preguntas frecuentes

¿Puedo usar una proporción personalizada, no solo los preajustes?

Sí. Escribe cualquier número en el campo de proporción, como 1.2, 1.5, 1.618 o un valor no estándar como 1.45. El desplegable de preajustes de los ajustes es solo un atajo que rellena el mismo campo, y elegir un valor que no coincide con un preajuste simplemente muestra Personalizada.

¿Cómo funcionan los pasos menores (negativos)?

La escala se ancla en el tamaño base (paso 0). Los pasos mayores multiplican la base por la proporción, mientras que los menores la dividen, produciendo tamaños de texto secundario y letra pequeña por debajo de la base como sm y xs. Define cuántos pasos mayores y menores quieres en los ajustes.

¿Cómo se calculan el interlineado y el espaciado?

El interlineado pasa de tu valor base en el tamaño de cuerpo a un valor más compacto a medida que el texto crece, y el espaciado pasa de cero en la base a tu valor para tamaños grandes, de modo que el texto grande queda algo más apretado y el pequeño un poco más suelto. Ambas curvas se ajustan en los ajustes.

¿Qué es la escala fluida clamp()?

Construye un font-size: clamp() para cada paso que crece suavemente entre un ancho de viewport mínimo y uno máximo, usando tu proporción principal en el ancho máximo y una proporción móvil aparte en el mínimo. Elige el formato de salida CSS clamp() para exportarla.

¿Se envía alguno de mis datos a un servidor?

No. Toda la escala, incluidos tamaños, interlineado, espaciado y los valores fluidos clamp(), se calcula localmente en tu navegador con aritmética simple. Nada se sube, así que la herramienta funciona sin conexión y mantiene tus ajustes privados.