Designer / Typography
Typography Scale Calculator
Build a typography scale from a base size and ratio, compare rem and px outputs, and copy design-ready type tokens directly in your browser. Great for design systems, landing pages, editorial layouts, and handoff-ready token planning.
16px
Base size
1.250
Ratio
6
Levels
48.8
Largest size
Status
Loaded a practical default type scale
CSS tokens
--type-6: 3.052rem; /* 48.8px */ --type-5: 2.441rem; /* 39.1px */ --type-4: 1.953rem; /* 31.3px */ --type-3: 1.563rem; /* 25.0px */ --type-2: 1.250rem; /* 20.0px */ --type-1: 1.000rem; /* 16.0px */
Quick read
Smaller ratios feel steadier for dense UI. Larger ratios feel more expressive for editorial or marketing pages.
This scale starts at 16px and grows to about 48.8px at the top level.
Display
The quick brown fox jumps over the lazy dog.
48.8px / 3.052rem / line-height 1.50
Step 4
The quick brown fox jumps over the lazy dog.
39.1px / 2.441rem / line-height 1.50
Step 3
The quick brown fox jumps over the lazy dog.
31.3px / 1.953rem / line-height 1.50
Step 2
The quick brown fox jumps over the lazy dog.
25.0px / 1.563rem / line-height 1.50
Step 1
The quick brown fox jumps over the lazy dog.
20.0px / 1.250rem / line-height 1.50
Body
The quick brown fox jumps over the lazy dog.
16.0px / 1.000rem / line-height 1.50
Why this gets reused
Typography scales come up repeatedly in design systems, page refreshes, and dev handoff work.
Seeing the preview, px, rem, and line-height together makes decisions much faster than manual math.
Copyable CSS tokens turn the tool into something practical for production work.
Strong first-use cases
Building a starter scale for a landing page or dashboard UI.
Comparing whether a major third or perfect fourth feels better for a brand system.
Copying consistent rem tokens into CSS or Tailwind config notes.