What is a typographic scale?

A typographic scale is a progression of font sizes following a consistent mathematical ratio. Using a scale rather than arbitrary sizes creates visual harmony because the sizes are proportionally related.

What ratio should I use?

Perfect fourth (1.333) and Major third (1.25) are popular for body-heavy content. Minor third (1.2) for interfaces with many size steps. Golden ratio (1.618) for dramatic size contrasts in marketing.

Type Scale Generator

Generates a harmonious typographic scale based on a base font size and a ratio (minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, golden ratio 1.618, etc.). Shows each step in pixels, rems, and ems with a live preview. Outputs as CSS custom properties or Tailwind theme configuration.

Base size (px)

Scale ratio

Steps: 8

Unit

Names

The quick brown fox4xl: 4.209rem

The quick brown fox3xl: 3.157rem

The quick brown fox2xl: 2.369rem

The quick brown foxxl: 1.777rem

The quick brown foxlg: 1.333rem

The quick brown foxbase: 1.000rem

The quick brown foxsm: 0.750rem

The quick brown foxxs: 0.563rem

CSS custom properties

:root {
  --text-xs: 0.563rem;
  --text-sm: 0.750rem;
  --text-base: 1.000rem;
  --text-lg: 1.333rem;
  --text-xl: 1.777rem;
  --text-2xl: 2.369rem;
  --text-3xl: 3.157rem;
  --text-4xl: 4.209rem;
}

Choose a base size and ratio to generate a complete typographic scale with copy-ready CSS.