Typography Scale Generator
Generate harmonious typography scales with modular scale ratios
Scale Configuration
Configure your typography scale with base size and ratio
Typography Scale Preview
Visual preview of your typography scale
xs1The quick brown fox
9px0.563rem
xs2The quick brown fox
12px0.750rem
baseThe quick brown fox
16px1.000rem
lgThe quick brown fox
21.33px1.333rem
xlThe quick brown fox
28.43px1.777rem
2xlThe quick brown fox
37.9px2.369rem
3xlThe quick brown fox
50.52px3.157rem
4xlThe quick brown fox
67.34px4.209rem
5xlThe quick brown fox
89.76px5.610rem
6xlThe quick brown fox
119.66px7.478rem
Export Options
Export your typography scale in different formats
How to Use
1. Select your base font size (typically 16px)
2. Choose a scale ratio (Perfect Fourth 1.333 is popular)
3. Adjust the number of scale steps needed
4. Export in your preferred format (CSS, Tailwind, SCSS, or JSON)