Typography Scale Calculator

Generate harmonious type scales using classic musical and mathematical ratios.

Basepx

xs9px0.563rem

The quick brown fox

lh: 1.6

sm12px0.750rem

The quick brown fox

lh: 1.6

base16px1.000rem

The quick brown fox

lh: 1.6

lg21.33px1.333rem

The quick brown fox

lh: 1.4

xl28.43px1.777rem

The quick brown fox

lh: 1.2

2xl37.9px2.369rem

The quick brown fox

lh: 1.2

3xl50.52px3.158rem

The quick brown fox

lh: 1.2

The Math

xs: 16 × 1.333^-2 = 9px

sm: 16 × 1.333^-1 = 12px

base: 16 × 1.333⁰ = 16px

lg: 16 × 1.333¹ = 21.33px

xl: 16 × 1.333² = 28.43px

2xl: 16 × 1.333³ = 37.9px

3xl: 16 × 1.333⁴ = 50.52px

Ratio: Perfect Fourth (1.333) · Base: 16px · Scale factor between each step: ×1.333

🎨 Hue Pro coming soon

Brand guide builder, font pairing, mockup generator. Get early access.