Generador de escala tipográfica
Elige un tamaño de fuente base y una proporción, y de ahí salen todos los tamaños de títulos y textos pequeños: cada paso es el anterior multiplicado por la proporción. Previsualiza los tamaños con tu propio texto y cópialos como propiedades personalizadas de CSS.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Escribe el tamaño base, normalmente el del texto principal, por ejemplo 16 px.
- Elige una proporción, o Personalizada para escribir la tuya.
- Indica cuántos pasos necesitas por encima y por debajo de la base.
- Revisa la vista previa y copia las variables CSS en rem o px.
Fórmula
tamaño(paso) = base × proporción^paso
rem = tamaño en px ÷ 16
Los tamaños se redondean a 2 decimales en px y a 3 en rem.
Ejemplo resuelto
Base 16 px con la tercera mayor, 1,25: el paso 1 es 16 × 1,25 = 20 px (1.25rem), el paso 2 es 20 × 1,25 = 25 px (1.563rem) y el paso 5 es 16 × 1,25^5 = 48,83 px (3.052rem). Hacia abajo, el paso −1 es 16 ÷ 1,25 = 12,8 px (0.8rem) y el paso −2, 10,24 px (0.64rem).
Consejos
- El texto rara vez necesita más de 5 pasos hacia arriba; los demás son para titulares grandes.
- Los tamaños por debajo de unos 12 px cuestan de leer; reserva los pasos hacia abajo para etiquetas y notas al pie.
- Para tipografía fluida, usa dos escalas (móvil y escritorio) y combínalas con clamp() de CSS.
Preguntas frecuentes
¿Qué es una escala tipográfica modular?
Un conjunto de tamaños de fuente en el que cada tamaño es el anterior multiplicado por la misma proporción. Los tamaños guardan una relación coherente entre sí, así que títulos, texto y notas parecen un sistema y no números elegidos a mano.
¿Qué proporción conviene elegir?
Las pequeñas, como 1,125 o 1,2, mantienen los títulos cerca del texto, lo que va bien en interfaces densas y pantallas pequeñas. Las grandes, como 1,333 o 1,5, dan títulos llamativos para páginas editoriales. Los nombres musicales (terceras, cuartas) solo identifican proporciones habituales.
¿Por qué rem y no px?
Los tamaños en rem son relativos al tamaño de fuente raíz, así que crecen cuando el lector aumenta el tamaño de texto predeterminado del navegador. La herramienta divide los píxeles entre 16, el tamaño raíz por defecto de los navegadores.
¿Cómo uso las variables?
Pega el bloque :root en tu hoja de estilos y úsalas, por ejemplo h1 { font-size: var(--step-4); } y body { font-size: var(--step-0); }. El paso 0 es el tamaño base; los pasos negativos son más pequeños.