Modular Type Scale Generator
A modular scale builds font sizes using a fixed mathematical ratio, just like musical intervals. The result is typography that looks harmonious without manually picking each size.
3.052remPage hero2.441remFirst-level heading1.953remSection heading1.563remSubheading1.25remLarge paragraph, lead1remBody text0.8remSecondary text, captions0.64remLabels, logo, small buttons:root {
--step-5: 3.052rem;
--step-4: 2.441rem;
--step-3: 1.953rem;
--step-2: 1.563rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step-n1: 0.8rem;
--step-n2: 0.64rem;
}Frequently asked questions
What is a modular scale?
A modular scale is a set of values where each step is obtained by multiplying the previous one by a fixed ratio. For example, with base=16px and ratio=1.25 you get: 10.24, 12.8, 16, 20, 25, 31.25, 39.06 px — the same proportions used between musical notes.
Which ratio should I choose?
For compact UIs with a narrow size range, use Minor Third (1.2) or Major Third (1.25). For editorial layouts and landing pages with strong hierarchy, try Perfect Fourth (1.333) or Golden Ratio (1.618). The larger the ratio, the more contrast there is between heading levels.
How do I apply the scale in CSS?
Copy the generated CSS custom properties into :root {}. Then use them like: h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } and so on. The body base text size typically maps to --step-0.
Need a full SEO audit?
Tools help with targeted tasks. For systematic growth — request a free review of your site.