Typography Scale Generator
Generate a harmonious modular type scale using musical and mathematical ratios like golden ratio, major third, and perfect fourth. Preview with Google Fonts and export as CSS variables, Tailwind config, or SCSS.
Scale Settings
16px
12px24px
6
110
2
04
400
300400500600700
1.5
1.01.52.0
Type Scale Preview
LabelpxremPreview
5xl89.76px5.610rem
The quick brown fox jumps over the lazy dog
4xl67.34px4.209rem
The quick brown fox jumps over the lazy dog
3xl50.52px3.157rem
The quick brown fox jumps over the lazy dog
2xl37.90px2.369rem
The quick brown fox jumps over the lazy dog
xl28.43px1.777rem
The quick brown fox jumps over the lazy dog
lg21.33px1.333rem
The quick brown fox jumps over the lazy dog
base16.00px1.000rem
The quick brown fox jumps over the lazy dog
sm12.00px0.750rem
The quick brown fox jumps over the lazy dog
xs9.00px0.563rem
The quick brown fox jumps over the lazy dog
Export
:root {
--font-size-xs: 0.563rem;
--font-size-sm: 0.750rem;
--font-size-base: 1.000rem;
--font-size-lg: 1.333rem;
--font-size-xl: 1.777rem;
--font-size-2xl: 2.369rem;
--font-size-3xl: 3.157rem;
--font-size-4xl: 4.209rem;
--font-size-5xl: 5.610rem;
}