# The invisible harmony of web design
The Musical Typography Scale applies the mathematics of musical intervals to typographic design. Just as a musical composition is governed by precise proportions, a solid visual design benefits from a mathematical structure that relates all sizes to each other.# How the modular scale works
The formula
The progression is simple: Size = Base × Ration. Step 0 is your base text. Step 1 is a small subtitle. Step 4 or 5 could be your main H1. The same multiplying constant (the ratio) ensures all relationships are consistent.
Why "Musical"
The Pythagoreans discovered that dividing a string in simple proportions (1:2, 2:3, 3:4) produced consonant sounds. These intervals, octave, perfect fifth and perfect fourth, are exactly the typographic ratios. You are composing visual music.
# Choosing the right ratio
For dense interfaces (dashboards, tables) use small ratios like
Don't limit the scale to 1.125 or 1.2. For editorial or portfolio sites, use more expressive ratios like 1.5 or 1.618. font-size only. The same CSS variables work for margin, padding and gap. When whitespace follows the same mathematical progression as the text, the design achieves a level of cohesion that everyone feels but few can explain.