CSS Type Scale Generator
Build a harmonious type scale with ratios.
Frequently Asked Questions
What scale ratio should I use for my project? +
Minor Third (1.2) and Major Third (1.25) work well for most websites. Perfect Fourth (1.333) gives more contrast between heading levels. The Golden Ratio (1.618) creates dramatic size differences suited for editorial or artistic layouts.
Why are the sizes in rem instead of px? +
Rem units are relative to the root font size, making your typography responsive and accessible. Users who change their browser's default font size will see your type scale adjust proportionally, which is important for readability.
How is each heading size calculated? +
Each step multiplies the base size by the ratio raised to a power. H6 uses ratio^1, h5 uses ratio^2, up to h1 which uses ratio^6. This creates a mathematical progression that produces visually harmonious size relationships.
Can I use a custom ratio not listed in the presets? +
Yes. Select "Custom" from the ratio dropdown and enter any decimal value. Common custom ratios include 1.15, 1.414 (augmented fourth), or any value that fits your design system.