Generador de escala tipográfica modular en CSS
Genera una escala tipográfica armónica a partir de un tamaño base y una proporción, con ocho proporciones clásicas a elegir. Devuelve propiedades personalizadas de CSS y se ejecuta enteramente en tu navegador, sin subir nada.
Cómo usar esta herramienta
- Introduce tu tamaño de fuente base en px.
- Elige una relación de escala en el menú desplegable.
- Copia la salida de propiedades personalizadas CSS.
| Step | px | rem |
|---|---|---|
| xs | 10.2 | 0.640 |
| sm | 12.8 | 0.800 |
| base | 16 | 1.000 |
| lg | 20 | 1.250 |
| xl | 25 | 1.563 |
| 2xl | 31.3 | 1.953 |
| 3xl | 39.1 | 2.441 |
| 4xl | 48.8 | 3.052 |
| 5xl | 61 | 3.815 |
:root {
--text-xs: 0.640rem; /* 10px */
--text-sm: 0.800rem; /* 13px */
--text-base: 1.000rem; /* 16px */
--text-lg: 1.250rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 49px */
--text-5xl: 3.815rem; /* 61px */
}Ratio: 1.25 | Base: 16px. All calculations run in your browser.
Acerca de Generador de escala tipográfica
El Generador de escala tipográfica produce una escala modular a partir de un único tamaño base y una proporción. Una escala modular construye cada paso multiplicando o dividiendo el tamaño base por una proporción fija, lo que da un conjunto de tamaños relacionados entre sí de forma armónica en lugar de elegidos al azar. La herramienta genera nueve pasos, de xs a 5xl, con el paso base en el centro, y muestra el valor en píxeles y en rem de cada uno en una tabla con una vista previa de la letra en vivo.
Puedes elegir entre ocho proporciones clásicas, desde la sutil segunda menor en 1,067 hasta la proporción áurea en 1,618, pasando por la tercera mayor, la cuarta justa y la quinta justa, entre otras. Una proporción más pequeña mantiene los pasos juntos, ideal para interfaces densas con mucho texto, mientras que una proporción mayor crea saltos llamativos, adecuados para páginas de marketing y titulares con fuerza. El tamaño base, ajustable de 8 a 32 píxeles, ancla toda la escala: todo lo que está por encima y por debajo del paso base se deriva de él.
Las matemáticas son coherentes: cada paso eleva la proporción a un exponente basado en su distancia respecto al base, de modo que lg es el base por la proporción una vez, xl es el base por la proporción al cuadrado y sm es el base dividido por la proporción una vez. Los valores en rem se calculan respecto a una raíz de 16px, el valor predeterminado habitual del navegador, así que encajan en una hoja de estilos típica sin más ajustes. La columna de vista previa muestra un «Aa» en cada tamaño para que valores fácilmente el ritmo visual de la escala.
El resultado es un bloque de propiedades personalizadas de CSS, una variable por paso, nombradas de --text-xs a --text-5xl, con el valor en rem y un comentario con los píxeles para cada una. Al pegar ese bloque en tu «:root» tienes toda la escala disponible como variables en toda la hoja de estilos, lo que mantiene coherentes titulares y texto. Un botón Copiar pone el bloque en el portapapeles. El generador se ejecuta enteramente en tu navegador, sin subir nada y sin cuenta.
Preguntas frecuentes
- ¿Qué es una escala tipográfica modular?
- Es un conjunto de tamaños de fuente en el que cada paso es el tamaño base multiplicado o dividido por una proporción fija. Así los tamaños se relacionan proporcionalmente entre sí, dando una jerarquía más armónica que elegir cifras a mano.
- ¿Entre qué proporciones puedo elegir?
- Ocho proporciones con nombre: 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ántos pasos genera?
- Nueve, llamados xs, sm, base, lg, xl, 2xl, 3xl, 4xl y 5xl. El paso base queda en el centro; los tamaños por debajo se dividen por la proporción y los de arriba se multiplican por ella.
- ¿Debo usar una proporción pequeña o grande?
- Una proporción más pequeña mantiene los pasos juntos, lo que conviene a interfaces densas con mucho texto. Una proporción mayor como la áurea crea saltos más grandes, ideales para titulares expresivos en landings y páginas de marketing.
- ¿Cómo se calculan los valores en rem?
- El tamaño en píxeles de cada paso se divide entre 16, el tamaño de fuente raíz habitual del navegador, para obtener el valor en rem. Así las variables encajan directamente en una hoja de estilos típica sin conversiones extra.
- ¿Qué aspecto tiene el CSS exportado?
- Un bloque «:root» de propiedades personalizadas nombradas de --text-xs a --text-5xl, cada una con un valor en rem y el tamaño equivalente en píxeles como comentario. Al pegarlo, toda la escala queda disponible como variables en tus estilos.
- ¿Qué tamaño base debería elegir?
- Normalmente 16px, que coincide con el tamaño de cuerpo predeterminado de la mayoría de navegadores. Puedes fijar de 8 a 32px; toda la escala se recalcula a partir del base que elijas.
- ¿La escala se genera en un servidor?
- No. Los cálculos y la salida en CSS ocurren enteramente en tu navegador. No se sube nada y no hace falta cuenta.