Playground · runs entirely in your browser
Type Scale
Pick a base size, a musical ratio, and a font. Get a complete scale with named tiers, live preview, and CSS or Tailwind output you can paste.
Display76.29px · 4.768rem
The quick brown fox
H161.04px · 3.815rem
The quick brown fox
H248.83px · 3.052rem
The quick brown fox
H339.06px · 2.441rem
The quick brown fox
H431.25px · 1.953rem
The quick brown fox
H525px · 1.563rem
The quick brown fox
H6 / Lead20px · 1.25rem
The quick brown fox
Body16px · 1rem
The quick brown fox
Small12.8px · 0.8rem
The quick brown fox
Caption10.24px · 0.64rem
The quick brown fox
:root {
--text-caption: 0.64rem; /* 10.24px */
--text-small: 0.8rem; /* 12.8px */
--text-body: 1rem; /* 16px */
--text-h6: 1.25rem; /* 20px */
--text-h5: 1.563rem; /* 25px */
--text-h4: 1.953rem; /* 31.25px */
--text-h3: 2.441rem; /* 39.06px */
--text-h2: 3.052rem; /* 48.83px */
--text-h1: 3.815rem; /* 61.04px */
--text-display: 4.768rem; /* 76.29px */
}