T
Modular Type Scale Generator
Generate a modular typography scale for your design system. Preview font sizes, choose ratio, and export as CSS, Tailwind, SCSS, or JSON.
Scale Settings
Base size (px)
Scale ratio
Custom ratio (overrides above)
Steps above base: 6
Steps below base: 2
Unit
Preview Options
Font family
Line height: 1.5
Font weight
Previewratio: 1.200 · 9 steps
4xl+6
2.986rem / 48px3xl+5
2.488rem / 40px2xl+4
2.074rem / 33pxxl+3
1.728rem / 28pxlg+2
1.44rem / 23pxmd+1
1.2rem / 19pxbasebase
1rem / 16pxsm-1
0.833rem / 13pxxs-2
0.694rem / 11pxExport
:root {
--text-xs: 0.694rem; /* -2 */
--text-sm: 0.833rem; /* -1 */
--text-base: 1rem; /* base */
--text-md: 1.2rem; /* +1 */
--text-lg: 1.44rem; /* +2 */
--text-xl: 1.728rem; /* +3 */
--text-2xl: 2.074rem; /* +4 */
--text-3xl: 2.488rem; /* +5 */
--text-4xl: 2.986rem; /* +6 */
}