Building Consistent Typography

Designers often wrestle with choosing font sizes that feel coherent across headings, subheadings, and body text. A modular scale provides a simple mathematical approach. Start with a base size and multiply or divide by a constant ratio to generate a series of numbers. Because each size relates to the next, the resulting typography feels balanced. This calculator lets you experiment with different ratios so your interface or document maintains visual rhythm.

The Modular Scale Formula

While many ratios exist, one common choice is the minor third, approximately 1.2. The general formula for a size at step relative to the base size $B$ is:

Where $r$ is the ratio. Stepping up yields larger headings, while stepping down gives captions and fine print. The table below shows a typical six-step scale.

Step	Relative Size
-2
-1
0
1
2
3

Why Scales Matter

A harmonious scale saves time when designing new pages. Instead of selecting arbitrary point sizes, you can choose from the predetermined set. This method also ensures that headings maintain a visually pleasing hierarchy. Many typographers advocate linking the ratio to a musical interval, as the resulting proportions echo the pleasing relationships we hear in chords. Others prefer the geometric progression because it adapts to a wide range of screen sizes and reading contexts. Whatever ratio you pick, consistently applying it improves readability.

Exploring Different Ratios

Small changes in the ratio dramatically affect the feel of your typography. A ratio near 1.1 yields subtle differences between headings, creating a quiet, sophisticated look. Ratios approaching the golden section of roughly 1.618 generate striking contrasts ideal for posters or landing pages. Try experimenting with values in this calculator to see how they influence the scale. As a starting point, you might pair a minor third for body text with a major third or perfect fourth for display purposes. Matching the mood of your project matters more than rigid adherence to a formula.

Adapting for Responsive Design

Modern websites must adapt gracefully across a spectrum of devices from phones to desktop monitors. Some designers implement fluid type that adjusts the base size as the viewport changes. Others maintain a consistent base but switch ratios at different breakpoints. By generating multiple scales, you can craft a responsive strategy: perhaps 1.2 on mobile for tighter spacing and 1.333 on larger screens for dramatic headings. The ability to preview numbers quickly helps you plan CSS breakpoints more efficiently.

Practical Example

Suppose your base size is 16 px and your chosen ratio is 1.25. The results are:

These values correspond to paragraph text, small headings, and progressively larger titles. By rounding to whole pixels, you maintain crisp rendering on most devices. Feel free to add more steps or adjust negative values for caption text.

Beyond the Numbers

While the calculator provides precise pixel sizes, good typography also considers line length, letter spacing, and weight. Use the scale as a foundation, then refine with CSS to create comfortable reading experiences. Pair typefaces carefully so that their visual proportions harmonize with the numbers you generate. Remember that accessibility remains paramount: maintain sufficient contrast and avoid sizes too small for clear reading.

Conclusion

This modular scale calculator helps you craft a coherent typographic hierarchy. By entering a base size and ratio, you receive a set of heading sizes that relate mathematically. Experiment with the numbers and combine them with thoughtful layout choices. The resulting design will feel intentional, polished, and easy to navigate—a hallmark of quality typography.