The Typographic Scale and Mathematical Rhythm

To establish cohesive visual hierarchy, professional design systems rely on a typographic scale—a predetermined sequence of font sizes generated by multiplying a base size (typically 16px) by a fixed mathematical ratio:

• Minor Third (1.200): Subtle, compact scale ideal for high-density enterprise software.
• Major Third (1.250): Versatile, balanced standard for web apps and marketing sites.
• Perfect Fourth (1.333): Expressive scale delivering dramatic contrast between headlines and body.

Example Major Third Scale (Base 16px)

• Caption: 12.8px (rounded to 13px)
• Body: 16px
• H4 / Subtitle: 20px
• H3: 25px
• H2: 31.25px
• H1: 39px
• Display: 48.8px

A mathematical scale eliminates arbitrary sizing decisions across engineering teams.