Generador de escala tipográfica
Calcula una escala armoniosa de tamaños de fuente (tercera mayor, cuarta justa, número áureo) y tamaños fluidos con clamp(). Exporta a CSS, Tailwind y SCSS.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Construye una jerarquía de texto coherente: tamaño base, proporción musical (de segunda menor a número áureo), número de tamaños por encima y por debajo, y un modo de tipografía fluida opcional con dos escalas (móvil y pantalla grande) unidas por clamp(). Vista previa en la fuente que elijas, exportación en variables CSS, Tailwind o SCSS.
Cuándo usarla
Empezar un sistema de diseño
Una escala fija los tamaños permitidos (sm, base, lg, xl…): todo el equipo usa los mismos y las páginas siguen siendo coherentes.
Títulos adaptados al móvil
Con la tipografía fluida, un título de 28 px en el móvil llega a 48 px en pantalla grande, sin media query.
Hacer más legible una web
Sustituir tamaños arbitrarios por una escala regular mejora al instante la jerarquía visual.
Cómo se usa
- Elige el tamaño base y la proporción de la escala.
- Activa la tipografía fluida para tamaños que sigan a la pantalla.
- Copia las variables CSS, la configuración de Tailwind o el SCSS.
Cómo funciona
Cada tamaño vale base × proporción^n, con n que va de los tamaños pequeños (sm, xs) a los grandes (lg, xl, 2xl…). Los nombres siguen los de Tailwind CSS.
En modo fluido se calculan dos escalas (móvil y pantalla grande). Para cada tamaño, la herramienta busca la recta que pasa por el tamaño móvil en el ancho mínimo y por el tamaño grande en el ancho máximo, y la escribe como clamp(mín, a rem + b vw, máx).
Consejos para un mejor resultado
- Una proporción menor en el móvil y mayor en el ordenador evita títulos enormes en el teléfono.
- Deja el texto normal en 16 px como mínimo; 17 o 18 px resultan más cómodos para artículos largos.
- Limítate a 5 o 6 tamaños realmente usados.
- Ajusta el interlineado: más apretado en títulos grandes (1,1 a 1,2) y más amplio en el texto (1,5 a 1,7).
Problemas frecuentes y soluciones
Los títulos son enormes en el ordenador
La proporción es demasiado grande: elige una tercera o una cuarta, o reduce el número de tamaños.
El tamaño fluido no cambia
Comprueba que la página no tiene zoom y que el ancho de pantalla está entre los dos límites elegidos.
Los valores tienen muchos decimales
Es normal en una escala: redondear cambia la proporción. Los navegadores manejan muy bien los tamaños decimales.
Preguntas frecuentes
¿Qué es una escala tipográfica?
Una serie de tamaños de fuente obtenidos multiplicando un tamaño base por la misma proporción: 16 px × 1,25 = 20 px, × 1,25 = 25 px… Los títulos y el texto quedan en armonía.
¿Qué proporción elijo?
1,2 (tercera menor) o 1,25 (tercera mayor) para interfaces y sitios con mucho texto; de 1,333 a 1,618 para títulos muy contrastados en sitios editoriales o páginas de aterrizaje.
¿Qué es la tipografía fluida?
Cada tamaño crece de forma progresiva entre un ancho de pantalla móvil y uno de pantalla grande, gracias a clamp(). Se acabaron las media queries para los títulos.
¿Por qué rem?
rem sigue el tamaño de letra que el visitante eligió en su navegador: tu web sigue siendo legible para quien lo ha agrandado.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.