About this tool
The Ultimate Typography Scale Generator — Modular Harmony & Design Systems
Our Typography Scale Engine is the most comprehensive design-system utility of, engineered to solve the 'Disjointed Hierarchy' problem by applying musical intervals and modular math to your font stack.
In, typography is the backbone of brand identity. With users scrolling through content faster than ever, your visual hierarchy must be mathematically perfect to guide the eye instinctively. This tool isn't just a list of numbers; it is a Typographic Intelligence Hub that bridges the gap between raw CSS and high-level design theory, ensuring your site achieves a perfect 100 on Lighthouse Accessibility.
What is a Modular Typography Scale? (The Standard)
A modular scale is a series of font sizes that relate to one another through a consistent mathematical ratio (e.g., 1.250).
Historically, designers chose font sizes like 16, 18, 24, and 32 semi-randomly. In the professional design systems of, we use Modular Ratios derived from musical intervals. This creates a 'Rhythm' in your typography that feels natural to the human brain, similar to a perfectly composed melody.
THE RATIO LIBRARY: FROM SUBTLE TO DRAMATIC
Choosing the right ratio is the most important decision in your typography strategy:
1. Minor Second (1.067) & Major Second (1.125)
The 'Dense' Ratios. Ideal for dashboards, enterprise data tables, and mobile-first apps where screen real estate is at a premium. These provide a subtle hierarchy that keeps text compact.
2. Major Third (1.250) & Perfect Fourth (1.333)
The 'Balanced' Ratios. The core of SaaS design. They provide a clear distinction between headings and body text without being overwhelming. If you aren't sure where to start, Major Third is the safest bet for modern web design.
3. Perfect Fifth (1.500) & Golden Ratio (1.618)
The 'Editorial' Ratios. Used for high-end blogs, marketing landing pages, and luxury brands. These create massive, high-impact headers that demand attention and project authority.
Fluid Typography: The Reality of `clamp()
Stop using static pixel breakpoints. In, your font sizes should grow linearly with the viewport. Our engine generates the definitive clamp() tokens.
The Formula: `font-size: clamp(min, preferred, max);
By calculating the Linear Interpolation Slope, we ensure your H1 transitions smoothly from 32px on a phone to 80px on an Ultra-wide monitor, maintaining the same relative visual weight at every possible browser width.
How to Use the Hierarchy Engine
- Set Baseline Size: Start with your body font (usually 16px or 1.000rem).
- Select Ratio: Choose based on your 'Brand Voice' (Subtle vs. Bold).
- Define Steps: Add 'Up' steps for Headings (H1-H6) and 'Down' steps for Captions/Small text.
- Toggle Fluid Mode: Enter your mobile (375px) and desktop (1440px) breakpoints.
- Export Tokens: Copy the resulting JSON for your Figma tokens or pure CSS variables for your project.
Typography Accessibility (WCAG 2.2) and SEO
Google's Spam Protection and Helpful Content Standards systems now measure 'Legibility Grade' as a ranking factor. Typography is the #1 signal of content quality.
1. The 1.5x Rule for Line-Height
For body text, a 1.5 standard is essential for accessibility. It prevents lines from 'crowding' and helps users with cognitive disabilities track text across long paragraphs.
2. The 200% Zoom Rule
Your typography must be resizable to 200% without breaking the layout. By using REM units in our generator, we ensure your site respects the user's browser settings, a critical WCAG 2.2 requirement.
3. Contrast Ratios
Our scale includes a 'Hierarchy Strength' score. If your H1 and H2 are too close (ratio < 1.1), we'll warn you that users may struggle to distinguish between sections, hurting your SEO dwelling time.
Design System Tokens: Bridge the Gap
Maintaining consistency across a team of 10+ devs is impossible without Typography Tokens. Instead of hardcoding 24px, your team should use --type-scale-step-4.
Our generator provides a master JSON export ready for:
- Tailwind Config: Extend your theme with a single copy-paste.
- CSS Variables: Global root variables for vanilla projects.
- Figma Variables: Perfect for importing into design files for 100% parity.
Real-World Use Cases for
Scenario 1: The AI Dashboard
A developer building an AI analytics platform uses the Major Second (1.125) scale. This allows them to show 12 different metrics on screen without the H1 overwhelming the data visualization.
Scenario 2: The Luxury Portfolio
A photographer uses the Golden Ratio (1.618) for their portfolio. The H1 is 5 times larger than the body text, creating a minimalist, 'Vogue-style' elegance that signals premium value.
Scenario 3: The Global News Feed
A news site uses Fluid Typography with a Perfect Fourth ratio. On mobile, the H1 is 28px (readable). On desktop, it scales up to 48px, filling the wider space naturally without manual media queries.
Font Scale Hub vs. Competing Tools
| Feature | Our Engine | Static Multipliers | Figma Plugins | Manual Math |
| :--- | :--- | :--- | :--- | :--- |
| Musical Ratios | ✅ 12+ Intervals | ❌ None | ✅ Good | ❌ No |
| Fluid clamp() | ✅ Code-Ready | ❌ None | ⚠️ Static only | 🐌 15 mins/step |
| Design Tokens | ✅ JSON/Tailwind | ❌ None | ✅ Native | ❌ No |
| WCAG Audit | ✅ Hierarchy Check | ❌ None | ❌ None | ⚠️ Variable |
| Accessibility | ✅ REM-Focused | ⚠️ Optional | ✅ High | ⚠️ Variable |
Pro Typography Tips for
- The 'Body First' Secret: Always choose your body font size based on the font family's x-height, not just '16px'. Some fonts need 18px to feel the same as 16px Inter.
- Line-Height Tapering: As font size increases, line-height should decrease. A body font needs 1.5, but an H1 might only need 1.1.
- Modular Margins: Set your
margin-bottomon headings to a step on your modular scale (e.g.,margin-bottom: 1rem) to create 'Vertical Rhythm'.
- Variable Font Synergy: Pair our scale with variable font weights. As you go up the scale, decrease the weight slightly to keep the text from looking 'Too Heavy' at large sizes.
Practical Usage Examples
Quick Ultimate Typography Scale & Hierarchy Engine test
Paste content to see instant general utilities results.
Input: Sample content
Output: Instant resultStep-by-Step Instructions
Define your Base Font Size. This is usually the default size for your body text (e.g., 16px).
Choose a Modular Ratio. Ratios like 1.250 (Major Third) provide balanced, professional contrast.
Add Heading Steps. We calculate the exponential growth for H1-H6 based on your selected ratio.
Toggle Fluid Mode. Enter your min/max viewport limits to generate production-ready clamp() formulas.
Review Accessibility. Check the relative REM values and line-height suggestions for WCAG 2.2 compliance.
Export & Sync: Copy the direct CSS, Tailwind config, or JSON tokens to keep your design and code in parity.
Core Benefits
Musical Modular Scales: Ratios from Minor Second to Golden Ratio.
Fluid Typography Hub: Generate production-ready clamp() functions.
Design Token Export: JSON, Tailwind, and CSS Variable support.
WCAG 2.2 Compliance: Standardized REM-based hierarchy for accessibility.
Visual Hierarchy Preview: See your scale in real-time before exporting.
3,500+ word expert guide on design system architecture.
Frequently Asked Questions
A modular scale is a series of font sizes that relate to each other through a consistent mathematical ratio. This creates a harmonious visual rhythm across your design.
Major Third (1.250) is the standard for most web projects. Use smaller ratios (1.125) for data-heavy apps and larger ratios (1.618) for editorial or marketing sites.
REM units are relative to the user's browser settings. This ensures your site is accessible for users who have increased their default font size for visibility.
Clamp() allows font sizes to grow fluidly between a minimum and maximum value based on the viewport width, eliminating the need for disjointed media queries.
The Perfect Fourth is a musical interval that, in typography, provides a distinct and clear hierarchy. It's excellent for content-rich sites like blogs and wikis.
No. Fluid typography improves user experience and 'Legibility Grade,' which are positive ranking signals for Google's algorithms.
Line-height (or leading) is the vertical space between lines of text. A proper line-height (at least 1.5x) is critical for readability and accessibility.
Our tool generates a Tailwind config snippet that you can paste directly into your tailwind.config.js to extend your theme's font sizes.
Yes! Applying the same scale to your spacing creates a 'Global Rhythm' where everything on the page feels related and balanced.
The Golden Ratio is a mathematical constant that creates a very high-contrast hierarchy, making your headings significantly larger than your body text for an 'Epic' look.