Type Scale
Free browser tool for building modular type scales. Set a base size and ratio, tune heading and body typography, add responsive breakpoints, and export CSS custom properties.
What is a modular scale?
A modular scale multiplies a base font size by a consistent ratio to produce harmonious heading and body sizes. Common ratios include the major third (1.25), perfect fourth (1.333), and golden ratio (1.618).
How to use
- Pick a base size and named ratio (or enter a custom ratio).
- Set heading and body fonts, weights, and spacing.
- Preview at each breakpoint when responsive scales are added.
- Copy CSS, JSON, or a shareable link.
Headings
H1The Quick Brown Fox48.83px / 3.052rem · 1.4 lh · -0.01em ls
H2The Quick Brown Fox39.06px / 2.441rem · 1.33 lh · 0.002em ls
H3The Quick Brown Fox31.25px / 1.953rem · 1.28 lh · 0.013em ls
H4The Quick Brown Fox25px / 1.563rem · 1.24 lh · 0.022em ls
H5The Quick Brown Fox20px / 1.25rem · 1.2 lh · 0.029em ls
H6The Quick Brown Fox16px / 1rem · 1.18 lh · 0.034em ls
Body
Lead
The quick brown fox jumps over the lazy dog. This lead paragraph should stand out from body copy.
20px / 1.25rem · 1.5 lh · 0.029em lsBody
The quick brown fox jumps over the lazy dog. Comfortable reading text for long paragraphs.
16px / 1rem · 1.5 lh · 0.034em lsCaption
Caption label
12.8px / 0.8rem · 1.5 lh · 0.04em lsSmall
The quick brown fox jumps over the lazy dog. Comfortable reading text for long paragraphs.
12.24px / 0.765rem · 1.5 lh · 0.04em ls