Modular Typography Scale Calculator
The problem: Choosing arbitrary font sizes produces inconsistent visual rhythm and poor typographical hierarchy across web pages.
ASG Privacy VerifiedVerified
100% In-Browser Execution. Zero server uploads. Your data never leaves this tab — disconnect your internet and the tool keeps working.
Modular Typography Scale Calculator: the complete guide
A Modular Typography Scale Calculator generates harmonious font size hierarchies (from small caption text up to display hero titles) using classical musical intervals and geometric ratios. In responsive typography, arbitrarily choosing font sizes often results in disjointed or jarring visual hierarchy. By applying a consistent modular ratio (such as Major Third 1.250 or Golden Ratio 1.618) to a base font size, websites achieve effortless visual balance and typographic rhythm.
The Mathematical Foundation of Modular Scales
A modular scale is a sequence of numbers that relate to one another through a single ratio: Size_n = Base × (Ratio ^ n). For example, with a 16px base and a Major Third ratio (1.250), Heading 3 becomes 16 × 1.25³ = 31.3px, Heading 2 becomes 39.1px, and Heading 1 becomes 48.8px. This geometric consistency mimics harmonic frequencies in musical composition.
Selecting the Right Scale for Your Content
Different modular ratios suit different digital products: Minor Second (1.067) and Major Second (1.125) provide tight, compact scales ideal for data-dense dashboards; Minor Third (1.200) and Major Third (1.250) provide balanced hierarchy for SaaS apps and blogs; while Augmented Fourth (1.414) and Golden Ratio (1.618) deliver high-impact dramatic contrast for marketing websites.
Step by step: how to use Modular Type Scale
- 1
Select a modular ratio from the dropdown menu (e.g., Major Third, Perfect Fourth, Golden Ratio).
- 2
Adjust the Base Font Size slider (default is 16px).
- 3
Review the live typographic specimen preview showing font size in pixels, rems, and line-heights.
- 4
Inspect the generated CSS custom properties (`--font-size-h1`, `--font-size-body`, etc.).
- 5
Click 'Copy CSS Variables' to integrate directly into your global CSS stylesheet.
Security & privacy
All geometric scale math computes locally in browser JavaScript without network transmission.