Configure Your Scale
| Element | Size | Line Height | Multiplier |
|---|
About Typography Scales
A typography scale creates visual harmony by using mathematically related font sizes. Instead of picking arbitrary sizes, you multiply or divide a base size by a consistent ratio to generate a hierarchy of sizes.
🎵 Musical Ratios
Many popular ratios come from music theory. The Perfect Fourth (1.333) and Perfect Fifth (1.5) create scales that feel naturally harmonious because they match intervals our ears find pleasing.
📱 Choosing a Ratio
Smaller ratios (1.125–1.2) work well for mobile and dense UIs where space is limited. Larger ratios (1.333–1.618) create more dramatic hierarchies suited for marketing sites and editorial content.
✨ The Golden Ratio
At 1.618, the Golden Ratio appears throughout nature and art. It creates a dramatic scale with significant jumps between sizes—ideal for hero sections and display typography.
📐 The Formula
Each step in the scale: base × ratio^n where n is the step number. For example, with base 16px and ratio 1.25: H1 = 16 × 1.25⁴ = ~39px
Common Scale Ratios Reference
| Name | Ratio | Best For | Character |
|---|---|---|---|
| Minor Second | 1.067 | Dense UIs, data tables | Subtle, tight hierarchy |
| Major Second | 1.125 | Mobile apps, body copy | Gentle, readable |
| Minor Third | 1.200 | General web, articles | Balanced, versatile |
| Major Third | 1.250 | Marketing, blogs | Clear distinction |
| Perfect Fourth | 1.333 | Headlines, landing pages | Strong, musical |
| Augmented Fourth | 1.414 | Posters, large displays | Geometric (√2) |
| Perfect Fifth | 1.500 | Editorial, magazine | Dramatic, bold |
| Golden Ratio | 1.618 | Hero sections, art | Organic, eye-catching |
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are estimates and may vary based on actual conditions.
Related Tools
- URL Parser -- Parse a URL into protocol, host, path, and query
- SERP Preview Tool -- Preview how your page appears in Google search results
- Color Blindness Simulator -- Simulate how images appear to people with color vision deficiency
- Hreflang Tag Generator -- Generate hreflang link tags for multilingual SEO in HTML, XML sitemap, and HTTP
Related Tools
View all toolsUTM Link Builder
Build URLs with UTM tracking parameters
User-Agent Parser
Parse a user-agent string for quick details
URL Parser
Parse a URL into protocol, host, path, and query
Sitemap XML Generator
Generate a simple sitemap.xml from a list of URLs
Robots.txt Generator
Generate a robots.txt file with common rules
Meta Tag Generator
Generate common SEO meta tags for a page
Typography Scale Generator FAQ
What is Typography Scale Generator?
Typography Scale Generator is a free web & seo tool that helps you Generate harmonious type scales with modular ratios.
How do I use Typography Scale Generator?
Enter your input values, review the calculated output, and adjust inputs until you reach the result you need. The result updates in your browser.
Is Typography Scale Generator private?
Yes. Calculations run locally in your browser. Inputs are not uploaded to a server by default, and refreshing the page clears session data.
Does Typography Scale Generator require an account or installation?
No. You can use this tool directly in your browser without sign-up or software installation.
How accurate are results from Typography Scale Generator?
This tool applies standard formulas or deterministic processing logic for estimates. For medical, legal, tax, or investment decisions, verify with a qualified professional.
Can I save or share outputs from Typography Scale Generator?
You can bookmark this page and copy outputs manually. Results are not persisted in your account and are typically not embedded in the URL.