Design Tools
Typographic Scale Generator — Modular Scale to CSS Variables Free
🔒 Działa w Twojej przeglądarce
Generate a harmonious typographic scale from a base size and named ratio. Choose from eight classic ratios — Minor Second through the Golden Ratio — and get 9 steps from xs to 5xl with pixel and rem values. Export as CSS custom properties ready to paste into your :root block. No upload, no account, no logs.
Jak używać tego narzędzia
- Wprowadź podstawowy rozmiar czcionki w px.
- Wybierz współczynnik skali z listy rozwijanej.
- Skopiuj wynik z niestandardowymi właściwościami CSS.
| Step | px | rem |
|---|---|---|
| xs | 10.2 | 0.640 |
| sm | 12.8 | 0.800 |
| base | 16 | 1.000 |
| lg | 20 | 1.250 |
| xl | 25 | 1.563 |
| 2xl | 31.3 | 1.953 |
| 3xl | 39.1 | 2.441 |
| 4xl | 48.8 | 3.052 |
| 5xl | 61 | 3.815 |
:root {
--text-xs: 0.640rem; /* 10px */
--text-sm: 0.800rem; /* 13px */
--text-base: 1.000rem; /* 16px */
--text-lg: 1.250rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 49px */
--text-5xl: 3.815rem; /* 61px */
}Ratio: 1.25 | Base: 16px. All calculations run in your browser.