Tipografía
Generador de Escala Tipográfica
Genera escalas tipográficas proporcionales para design systems y CSS
Vista previa de la escala
xs
9px / 0.5628rem
The quick brown fox
sm
12px / 0.7502rem
The quick brown fox
base
16px / 1rem
The quick brown fox
lg
21.33px / 1.333rem
The quick brown fox
xl
28.43px / 1.7769rem
The quick brown fox
2xl
37.9px / 2.3686rem
The quick brown fox
3xl
50.52px / 3.1573rem
The quick brown fox
4xl
67.34px / 4.2087rem
The quick brown fox
5xl
89.76px / 5.6102rem
The quick brown fox
6xl
119.66px / 7.4784rem
The quick brown fox
Código
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}FAQ
Preguntas Frecuentes
Todo sobre tipografía y escalas modulares
¿Qué es una escala tipográfica?
Una escala tipográfica es un conjunto de tamaños de texto proporcionales relacionados entre sí mediante un ratio fijo. Usar una escala coherente crea armonía visual en el diseño.
¿Qué ratio elegir?
Para interfaces digitales, Perfect Fourth (1,333) y Major Third (1,250) son las elecciones más comunes: ofrecen un contraste visible sin ser excesivo. El Golden Ratio (1,618) crea contrastes muy marcados, ideal para títulos.
¿Cómo se usa la salida CSS?
Copia las variables CSS en tu archivo de estilo global (ej. `app.css`). Luego úsalas con `font-size: var(--text-lg)`. Para Tailwind, pega la configuración en el bloque `fontSize` de tu `tailwind.config.js`.