Generador de escala tipográfica

¿Qué es Generador de escala tipográfica?

El Generador de Escala Tipográfica es una herramienta gratuita que funciona en el navegador y convierte un único tamaño base y una proporción modular en una escala tipográfica completa y matemáticamente coherente que cubre el texto de cuerpo y los encabezados de h1 a h6. Una escala modular multiplica (y divide) el tamaño base por una proporción fija en cada paso, de modo que los encabezados más grandes crecen en saltos proporcionales y uniformes que se sienten deliberados en lugar de arbitrarios. Diseñadores y desarrolladores front-end la usan para crear los tokens tipográficos de un sistema de diseño, mantener tamaños de encabezado coherentes en todo un sitio y traducir una proporción elegida en CSS listo para pegar. Elige la proporción del desplegable, define el tamaño base y la unidad (px o rem) y copia la escala como propiedades personalizadas de CSS, variables Sass o una lista simple en rem.

Cómo usar Generador de escala tipográfica

1. Elige una proporción modular del desplegable, por ejemplo Tercera menor (1.2), Cuarta justa (1.333) o Proporción áurea (1.618).
2. Define el tamaño base en el campo Tamaño base; este será el tamaño del texto de cuerpo y el ancla de la escala.
3. Usa el control segmentado de unidad para cambiar la salida entre px y rem (rem asume una raíz de 16px).
4. Lee la vista previa en vivo para ver el cuerpo y h1-h6 representados en sus tamaños calculados.
5. Cambia el formato de salida entre variables CSS, Sass y rem, y luego copia el código generado con el botón de copiar.

Ejemplos

proporción 1.333, base 16px

cuerpo 16px, h6 21.328px, h5 28.43px, h4 37.897px, h3 50.517px, h2 67.34px, h1 89.764px

proporción 1.618, base 16px, variables CSS

:root {
  --font-size-body: 16px;
  --font-size-h1: 287.072px;
}

proporción 1.2, base 16px, rem

cuerpo: 1rem; h1: 2.986rem

Preguntas frecuentes

¿Qué es una escala modular?

Una escala modular parte de un tamaño base y lo multiplica por una proporción fija en cada paso mayor (y lo divide en los pasos menores). Aquí el cuerpo usa el tamaño base, h6 es base x proporción, h5 es base x proporción al cuadrado, y así sucesivamente hasta h1, lo que mantiene cada encabezado proporcional al siguiente.

¿Qué proporciones están disponibles?

El desplegable ofrece proporciones tipográficas comunes, incluidas Segunda menor (1.067), Segunda mayor (1.125), Tercera menor (1.2), Tercera mayor (1.25), Cuarta justa (1.333), Cuarta aumentada (1.414), Quinta justa (1.5) y la Proporción áurea (1.618).

¿Cuál es la diferencia entre las unidades px y rem?

px produce tamaños absolutos en píxeles, mientras que rem produce tamaños relativos al elemento raíz, asumiendo el valor predeterminado común de 16px. rem se escala con el ajuste de tamaño de fuente del navegador del usuario, lo que suele preferirse por accesibilidad.

¿Qué me dan los tres formatos de salida?

Las variables CSS producen un bloque :root con propiedades personalizadas --font-size-*, Sass produce variables $font-size-* y rem produce una lista compacta que puedes pegar en cualquier hoja de estilos o consultar manualmente.

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

No. Toda la escala se calcula localmente en tu navegador con aritmética simple. Ningún tamaño, proporción ni unidad se sube nunca, así que la herramienta funciona sin conexión y mantiene tus ajustes privados.