Generador de Typography Scale
Crea escalas tipográficas armónicas usando ratios matemáticos. Genera CSS variables listas para usar en tu sistema de diseño.
Configuración
Tamaño base (normalmente 16px)
El ratio determina la relación entre tamaños
Ratio seleccionado: Major Third (1.25)
Fórmula: Cada nivel = base × ratio^n
Ratios Populares
Vista Previa de Escala
The quick brown fox
10.24px
0.640rem
The quick brown fox
12.80px
0.800rem
The quick brown fox
16.00px
1.000rem
The quick brown fox
20.00px
1.250rem
The quick brown fox
25.00px
1.563rem
The quick brown fox
31.25px
1.953rem
The quick brown fox
39.06px
2.441rem
The quick brown fox
48.83px
3.052rem
The quick brown fox
61.04px
3.815rem
CSS Variables
:root {
--font-size-xs: 0.6400rem; /* 10.24px */
--font-size-sm: 0.8000rem; /* 12.80px */
--font-size-base: 1.0000rem; /* 16.00px */
--font-size-lg: 1.2500rem; /* 20.00px */
--font-size-xl: 1.5625rem; /* 25.00px */
--font-size-2xl: 1.9531rem; /* 31.25px */
--font-size-3xl: 2.4414rem; /* 39.06px */
--font-size-4xl: 3.0518rem; /* 48.83px */
--font-size-5xl: 3.8147rem; /* 61.04px */
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'xs': '0.6400rem',
'sm': '0.8000rem',
'base': '1.0000rem',
'lg': '1.2500rem',
'xl': '1.5625rem',
'2xl': '1.9531rem',
'3xl': '2.4414rem',
'4xl': '3.0518rem',
'5xl': '3.8147rem',
}
}
}
}¿Por qué usar una escala tipográfica?
Las escalas tipográficas basadas en ratios matemáticos crean jerarquía visual armónica y consistente en tu diseño.
Armonía Visual
Los ratios matemáticos como el Golden Ratio crean relaciones naturalmente armónicas entre tamaños de texto, mejorando la estética.
Consistencia
Una escala definida evita tamaños arbitrarios y mantiene consistencia en todo tu sitio, facilitando el trabajo en equipo.
Decisiones Rápidas
Con una escala predefinida, escoger tamaños de texto es instantáneo. No más dudas sobre qué tamaño usar para cada elemento.
Preguntas Frecuentes
¿Qué es una escala tipográfica?
Es un sistema de tamaños de fuente relacionados matemáticamente a través de un ratio. Por ejemplo, con ratio 1.5, cada nivel es 1.5 veces más grande que el anterior.
¿Qué ratio debo elegir?
Depende del estilo de tu sitio. Ratios pequeños (1.125-1.250) son sutiles y profesionales. Ratios grandes (1.500-1.618) son dramáticos e impactantes. Major Third (1.250) es un buen punto de partida.
¿Qué es el Golden Ratio?
El Golden Ratio (1.618) es una proporción encontrada en la naturaleza y el arte. Crea escalas muy armónicas pero dramáticas, mejor para sitios con personalidad fuerte.
¿Debo usar px o rem?
Usa rem para tipografía. Es mejor para accesibilidad y responsive design. Esta herramienta genera ambos valores, pero rem es la mejor práctica actual.
¿Puedo usar diferentes escalas en un mismo sitio?
Es posible pero generalmente no recomendado. La consistencia es clave. Sin embargo, podrías usar diferentes escalas para desktop vs mobile ajustando el ratio en media queries.
¿Cómo implemento esto en mi proyecto?
Copia las CSS variables a tu archivo CSS principal o el Tailwind config a tailwind.config.js. Luego usa var(--font-size-lg) en CSS o text-lg en Tailwind.
¿Necesitas un sistema de diseño completo?
En Aurum Digital creamos design systems escalables con tipografía, colores y componentes bien definidos.
Solicita una Consultoría