Typography Scale Generator
Create perfectly balanced typographic scales for your web designs with visual previews and export options.
Live Preview
Spacing Scale
Export
1000+ Excel Business Templates
Stop building from scratch. Get 1000+ ready-to-use Excel templates for invoicing, HR, inventory, budgets, and more.
How to Use the Typography Scale Generator
Select a base font size (typically 16px for web) and choose a scale ratio — such as the golden ratio (1.618), perfect fourth (1.333), or major third (1.25). The generator creates a harmonious set of font sizes from small text to large headings.
Preview the generated scale with sample text to see how each size level looks. Adjust the base size, ratio, or number of steps until the hierarchy feels balanced for your design.
Copy the generated CSS with font-size values as rem units, ready to paste into your stylesheet. The scale ensures consistent, proportional typography across your entire project.
Why Use This Tool
Consistent typography is one of the foundations of professional design. Randomly choosing font sizes leads to inconsistent, amateurish-looking layouts. A mathematical type scale creates visual harmony by deriving all sizes from a single base and ratio.
This tool saves designers and developers from manually calculating each size. It produces a proven, proportional hierarchy that works for headings, body text, captions, and UI elements.
Key Features
- Multiple scale ratios including golden ratio, perfect fourth, and major third
- Customizable base size and number of scale steps
- Live preview with sample text at each size level
- CSS output with rem-based font sizes
- Line height and letter spacing recommendations
- Works with any font family for accurate preview
Frequently Asked Questions
What is a typography scale?
A typography scale is a set of font sizes derived from a base size multiplied by a consistent ratio. Just as musical scales create harmonious note sequences, type scales create visually harmonious size progressions. Common ratios include 1.25 (major third), 1.333 (perfect fourth), and 1.618 (golden ratio).
Which scale ratio should I use?
Smaller ratios like 1.125 (major second) create subtle size differences, suitable for text-heavy content like blogs. Larger ratios like 1.618 (golden ratio) create dramatic contrasts, ideal for marketing pages and hero sections. The perfect fourth (1.333) is a popular balanced choice.
What base font size should I start with?
16px is the standard base size for web design, as it matches the default browser font size. For mobile-first designs, 16px or 18px provides good readability. For print design, starting points vary based on the medium.
Can I use this scale with any font?
Yes. The scale defines sizes, not font choices. Apply the generated sizes to any font family. However, note that different fonts have different x-heights, so a size that looks right in one font may feel slightly different in another.