Generador de escala tipográfica
Elige un tamaño de fuente base y una proporción musical para crear un conjunto armonioso de tamaños de encabezados y texto. Previsualiza cada paso a su tamaño real y copia propiedades personalizadas de CSS listas para usar, una configuración fontSize de Tailwind o un mapa de Sass.
Última actualización:
El tamaño de tu texto principal (paso 0)
Cualquier número mayor que 1, p. ej., 1.3
De 1 a 10 tamaños mayores (encabezados)
De 0 a 5 tamaños menores (pies de foto, etiquetas)
El valor predeterminado del navegador es 16px; se usa para convertir px a rem/em
Cómo usar Generador de escala tipográfica
- Introduce tu tamaño base, normalmente el tamaño del texto principal, como 16px.
- Elige una proporción: las proporciones pequeñas van bien en apps e interfaces densas; las grandes, en páginas editoriales.
- Indica cuántos pasos necesitas por encima y por debajo de la base.
- Elige la unidad y los nombres que encajen con tu código.
- Copia el código CSS, Tailwind o Sass y pégalo en tu proyecto.
Comparación de proporciones tipográficas
Tamaños para una base de 16px. Cada columna multiplica por la proporción una vez por paso.
| Proporción | Nombre | Paso +1 | Paso +2 | Paso +3 | Paso +4 | Paso +5 | Ideal para |
|---|---|---|---|---|---|---|---|
| 1.125 | Segunda mayor | 18.00px | 20.25px | 22.78px | 25.63px | 28.83px | Interfaces de app densas |
| 1.2 | Tercera menor | 19.20px | 23.04px | 27.65px | 33.18px | 39.81px | Paneles, documentación |
| 1.25 | Tercera mayor | 20.00px | 25.00px | 31.25px | 39.06px | 48.83px | Blogs, marketing |
| 1.333 | Cuarta justa | 21.33px | 28.43px | 37.90px | 50.52px | 67.34px | Artículos |
| 1.5 | Quinta justa | 24.00px | 36.00px | 54.00px | 81.00px | 121.50px | Landing pages |
| 1.618 | Proporción áurea | 25.89px | 41.89px | 67.77px | 109.66px | 177.42px | Pósteres, texto de portada |
Cómo aplicar una escala tipográfica
- Asigna los pasos a funciones, no a etiquetas. Usa las variables para el texto principal, los párrafos de entrada, los títulos de tarjetas y los títulos de página, y después asígnalas a h1-h6 según lo que necesite tu contenido.
- Reduce el interlineado a medida que crece el tamaño. El texto principal se lee bien en torno a 1.5; los encabezados grandes suelen quedar mejor cerca de 1.1-1.25. Los interlineados sugeridos por esta herramienta siguen ese patrón.
- Mantén legibles los tamaños pequeños. Evita bajar mucho de 12px en pies de foto y etiquetas.
- Limita el número de tamaños. De cinco a ocho pasos cubren la mayoría de los sitios; más pasos hacen que el diseño sea más difícil de mantener coherente.
- Redondea para la retícula si lo necesitas. Valores como 31.25px funcionan bien en los navegadores, pero puedes redondearlos en tu herramienta de diseño para maquetas al píxel.
Preguntas frecuentes
¿Qué es una escala tipográfica modular?
Es un conjunto de tamaños de fuente en el que cada tamaño es el anterior multiplicado por la misma proporción. Con una base de 16px y una proporción de 1.25 obtienes 16, 20, 25, 31.25, 39.06px y así sucesivamente. La proporción fija hace que los encabezados parezcan relacionados entre sí.
¿Qué proporción de escala tipográfica debo usar?
Para interfaces y paneles con muchos encabezados, de 1.125 a 1.2 mantiene los tamaños compactos. Los blogs y la documentación suelen usar 1.25 o 1.333. Las landing pages y los diseños editoriales con pocos encabezados grandes pueden usar 1.5 o la proporción áurea 1.618.
¿Cuál es la fórmula de una escala tipográfica?
tamaño(n) = base × proporción^n, donde n es el número de paso. Los pasos positivos dan tamaños más grandes y los negativos, más pequeños: el paso −1 es base ÷ proporción.
¿Por qué las proporciones llevan nombres de intervalos musicales?
La idea viene de la música, donde intervalos como la cuarta justa (4:3 = 1.333) o la quinta justa (3:2 = 1.5) describen relaciones de frecuencia. Los diseñadores tomaron prestados los nombres porque las mismas proporciones suenan y se ven equilibradas.
¿Debo usar rem o px para los tamaños de fuente?
Se recomienda rem para los tamaños de fuente porque se adapta al tamaño de texto que el visitante configura en su navegador. 1rem equivale al tamaño de fuente raíz, 16px por defecto, así que 20px son 1.25rem.
¿Cómo uso la escala con Tailwind CSS?
Copia el bloque de configuración de Tailwind en la sección theme.extend.fontSize de tailwind.config.js. Después puedes usar clases como text-lg o text-3xl, que usarán los valores y los interlineados de tu escala.
¿Una escala tipográfica puede ser responsive?
Sí. Un enfoque habitual es usar una proporción menor en móviles y una mayor en escritorio, cambiándolas con una media query, o tamaños fluidos con CSS clamp(). El generador de CSS clamp de este sitio puede convertir dos escalas en valores fluidos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.