Create harmonious type scales with modular ratios. Live preview & CSS code
Want to embed this font size scale generator on your website? Use this code:
Learn how ratios create harmonious proportions in typography.
Read Tutorial →How intervals like perfect fourths and fifths translate to the web.
Read Tutorial →Factors to consider: content, screen size, and brand personality.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| Live preview with all headings | ✅ | ✅ | ❌ |
| 6 modular ratios | ✅ | ✅ | ✅ |
| Adjustable number of steps | ✅ (3‑6) | ❌ | ✅ |
| Multiple unit options (rem, px, em) | ✅ | ✅ | ❌ |
| Color picker for preview text | ✅ | ❌ | ✅ |
| Download CSS file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
A modular scale is a sequence of numbers that relate to each other by a ratio. In typography, it creates consistent, harmonious font sizes for headings and body text.
Smaller ratios (1.125–1.25) create subtle, conservative scales. Larger ratios (1.333–1.618) create dramatic contrast. Consider your content and brand voice.
rem is recommended – it's relative to the root font size, making it easy to scale the whole page. px is absolute, and em is relative to the parent element.
Copy the CSS into your stylesheet. The :root variable defines the base font size. Apply the classes or element styles as needed.
A modular scale brings mathematical harmony to your typography. Instead of guessing sizes, you use a consistent ratio, creating visual rhythm and a professional, cohesive look. It's a staple of modern web design.
All sizes are mathematically related – no arbitrary numbers.
Using rem units, the whole scale scales proportionally.
Choose a ratio that matches your brand's personality.
Tools to master modular scales