Generate harmonious modular scales based on 1900 typography standards
Body text baseline.
| Step | Size (px / rem) | Visual Preview |
|---|---|---|
| Step 5 | 177.42px 11.089rem | The quick brown fox jumps over the lazy dog. |
| Step 4 | 109.66px 6.854rem | The quick brown fox jumps over the lazy dog. |
| Step 3 | 67.77px 4.236rem | The quick brown fox jumps over the lazy dog. |
| Step 2 | 41.89px 2.618rem | The quick brown fox jumps over the lazy dog. |
| Step 1 | 25.89px 1.618rem | The quick brown fox jumps over the lazy dog. |
| Base | 16.00px 1.000rem | The quick brown fox jumps over the lazy dog. |
| Sub 1 | 9.89px 0.618rem | The quick brown fox jumps over the lazy dog. |
| Sub 2 | 6.11px 0.382rem | Small label text |
Data Source: The Practice of Typography (Theodore Low De Vinne, 1900) • Public domain • Solo-developed with AI
🎯 A Simple Example: Creating a Blog Hierarchy
You're starting a new blog and want your headings to feel "natural" relative to your body text. You've decided on a 16px base font size. Let's find your H1 and H2 sizes using the Golden Ratio:
Just do this:
1️⃣ Set the Base Size (Step 0) to 16px
2️⃣ Select "Golden Ratio (1.618)" from the Scale Ratio dropdown
3️⃣ Look at Step 2 in the table—this is your H2 (41.89px / 2.618rem)
4️⃣ Look at Step 3 in the table—this is your H1 (67.77px / 4.236rem)
5️⃣ Use these values in your CSS to create a perfectly balanced typographic hierarchy!
Pro tip: For a more "modern" and compact feel, try the "Major Third (1.250)" ratio. It provides enough contrast between steps without creating massive headlines!
The relationship between font sizes is a fundamental challenge in graphic design. Without a systematic approach, typographic hierarchies often feel discordant.
Long before CSS frameworks, master printers like Theodore De Vinne used "modular scales" based on musical intervals or mathematical constants like the Golden Ratio (1.618). This tool automates that logic, ensuring that every heading, subheading, and caption on your page relates to your body text through a consistent, mathematically sound multiplier. This creates a "natural" sense of order that the human eye perceives as inherently correct.
By combining 1900s typesetting principles with modern `rem` units, you achieve fluid typography that maintains its internal harmony across different devices and user settings.
P.S. Why scale text when you can just hiss at everything until it looks smaller? 🐾