toolkit

Typography Scale

Runs in browser

Generate harmonious type hierarchies

Ratio Presets
Unit

How to Use

Set base size and ratio to generate a type scale.

You will see:

  • Visual Type Hierarchy
  • Generated CSS Utilities
  • Harmonious Ratios
Type Scale Preview
xs
0.640rem

The quick brown fox

sm
0.800rem

The quick brown fox

base
1.000rem

The quick brown fox

lg
1.250rem

The quick brown fox

xl
1.563rem

The quick brown fox

2xl
1.953rem

The quick brown fox

3xl
2.441rem

The quick brown fox

4xl
3.052rem

The quick brown fox

5xl
3.815rem

The quick brown fox

CSS

.text-xs { font-size: 0.640rem; line-height: 0.960rem; }
.text-sm { font-size: 0.800rem; line-height: 1.200rem; }
.text-base { font-size: 1.000rem; line-height: 1.500rem; }
.text-lg { font-size: 1.250rem; line-height: 1.750rem; }
.text-xl { font-size: 1.563rem; line-height: 2.188rem; }
.text-2xl { font-size: 1.953rem; line-height: 2.734rem; }
.text-3xl { font-size: 2.441rem; line-height: 3.418rem; }
.text-4xl { font-size: 3.052rem; line-height: 4.272rem; }
.text-5xl { font-size: 3.815rem; line-height: 5.341rem; }

About Typography Scales

Typography scales create consistent, harmonious type hierarchies using mathematical ratios. A well-defined scale improves readability and establishes clear visual hierarchy.

Common Scale Ratios

1.067
Minor Second — subtle variation
1.125
Major Second — popular for UI
1.250
Major Third — clear hierarchy
1.333
Perfect Fourth — traditional
1.414
Augmented Fourth
1.500
Perfect Fifth — dramatic
1.618
Golden Ratio — classical beauty

💡 Pro Tips

  • Use smaller ratios (1.125-1.25) for mobile
  • Use larger ratios (1.333+) for marketing sites
  • Combine with consistent line-height ratios
  • Use CSS clamp() for fluid typography

References & Standards

Modular Scale

The concept of using musical intervals to create harmonious proportions in design.

A List Apart: Meaningful Typography

The Elements of Typographic Style

Reference to Robert Bringhurst's essential guide to typography usage and philosophy.

Wikipedia

Further Reading