Modular Scale Calculator

Create consistent typographic hierarchies, blend multi-stranded base sizes, and export Tailwind v4 custom themes.

Scale Configurations

Base Size A (px)

Base Size B (px - Optional)

Ratio Preset

Scale Range

WYSIWYG Article Layout Preview

Last modified: June 2026 · Typographic Scale System

:root {
  --font-size-5: 3.052rem; /* 48.83px */
  --font-size-4: 2.441rem; /* 39.06px */
  --font-size-3: 1.953rem; /* 31.25px */
  --font-size-2: 1.563rem; /* 25px */
  --font-size-1: 1.25rem; /* 20px */
  --font-size-0: 1rem; /* 16px */
  --font-size-neg-1: 0.8rem; /* 12.8px */
  --font-size-neg-2: 0.64rem; /* 10.24px */
  --font-size-neg-3: 0.512rem; /* 8.19px */
  --font-size-neg-4: 0.41rem; /* 6.55px */
  --font-size-neg-5: 0.328rem; /* 5.24px */
}

Generated Scale

Step	Size	Strand
+5	48.83px (3.052rem)	Strand A
+4	39.06px (2.441rem)	Strand A
+3	31.25px (1.953rem)	Strand A
+2	25px (1.563rem)	Strand A
+1	20px (1.25rem)	Strand A
+0	16px (1rem)	Strand A
-1	12.8px (0.8rem)	Strand A
-2	10.24px (0.64rem)	Strand A
-3	8.19px (0.512rem)	Strand A
-4	6.55px (0.41rem)	Strand A
-5	5.24px (0.328rem)	Strand A