Skip to content

Typography Scale Generator

Create harmonious type scales using classic musical ratios for consistent, beautiful typography.

Scale Settings
Base Font Size

px

Scale Ratio

Minor Second

Subtle, minimal contrast
1.067

Major Second

Classic, gentle progression
1.125

Minor Third

Well-balanced, popular choice
1.2

Major Third

Strong hierarchy
1.25

Perfect Fourth

Dramatic, bold difference
1.333

Augmented Fourth

Very dramatic
1.414

Perfect Fifth

Striking contrast
1.5

Golden Ratio

Naturally pleasing
1.618
Custom Ratio

Enter to override preset

Output Unit
Scale Preview — Ratio: 1.250
5xl

The quick brown fox

3.8147rem(61px)
4xl

The quick brown fox

3.0518rem(49px)
3xl

The quick brown fox

2.4414rem(39px)
2xl

The quick brown fox

1.9531rem(31px)
xl

The quick brown fox

1.5625rem(25px)
lg

The quick brown fox

1.25rem(20px)
base

The quick brown fox

1rem(16px)
sm

The quick brown fox

0.8rem(13px)
xs

The quick brown fox

0.64rem(10px)
Export Code
:root {
  /* Typography Scale
   * Base: 16px
   * Ratio: 1.25 (Major Third)
   */
  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5625rem;
  --font-size-2xl: 1.9531rem;
  --font-size-3xl: 2.4414rem;
  --font-size-4xl: 3.0518rem;
  --font-size-5xl: 3.8147rem;
}

/* Usage Example */
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.heading-1 { font-size: var(--font-size-5xl); }

Understanding Type Scales

What is a Modular Scale?

A modular type scale is a sequence of font sizes derived by multiplying a base size by a consistent ratio. This creates harmonious relationships between text sizes, similar to the intervals in music.

For example, with a base of 16px and ratio of 1.25 (Major Third), the sequence would be: 12.8px → 16px → 20px → 25px → 31.25px, each step exactly 1.25× the previous.

Choosing a Ratio

Smaller ratios (1.067–1.2) create subtle differences, ideal for information-dense UIs like dashboards or documentation.

Medium ratios (1.25–1.333) offer balanced hierarchy, perfect for blogs, landing pages, and marketing sites.

Larger ratios (1.414–1.618) create dramatic contrast, best for posters, presentations, and bold editorial designs.