Modular Type Scales: Consistent Heading Sizes From One Base
Random heading sizes make a page feel uneven. A modular scale grows every size from one base by one steady ratio.
What is the Modular Scale Calculator?
Enter a base font size and pick a ratio, and the tool builds a stepped scale from small text up to large display sizes. The scale is a starting framework for consistent headings, not a rule — round values to whole pixels for production use.
How to use it
- Enter your base font size in pixels.
- Choose a scale ratio.
- Click Build Type Scale and use the steps for your headings.
Worked example
With a 16 px base and a 1.25 ratio, the scale gives 20 px for H3, 25 px for H2, 31.25 px for H1, and 39.06 px for display text.
What H1 size comes from a 16 px base at a 1.25 ratio?
Multiply by 1.25 three steps up from the base: 16, 20, 25, then 31.25 px, so H1 lands at 31.25 px on that scale.
Frequently asked questions
Which ratio should I pick?
1.25 is a safe middle ground; 1.125 feels subtle, while 1.5 or 1.618 gives dramatic, editorial contrast.
Should I round the sizes?
Yes, rounding to whole or half pixels keeps rendering predictable in production.