Modular Typographic Scale Calculator & CSS Generator
Bring mathematical harmony to your interface typography. Generate proportional font-size steps from xs to 6xl using classical musical intervals and mathematical ratios.
How to Use Modular Scale Calculator
Set Base Font Size
Enter your foundational body text size (default: 16px / 1rem).
Select Scale Ratio
Choose a ratio like Major Third (1.25), Perfect Fourth (1.333), or Golden Ratio (1.618).
Export CSS Variables
Review rendered sample text and copy the generated CSS custom properties.
About Modular Scale Calculator
Calculates font size at step n using formula S_n = S_base * (Ratio)^n, where positive integers produce heading scales and negative integers generate captions and footnotes.
Supported Formats
Operational Limits
- •Calculations use exact mathematical scaling, rounded to 2 decimal places.
Key Features
- 12 classical ratios: Minor Second (1.067), Major Second (1.125), Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.5), Golden Ratio (1.618)
- Generates steps from xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, to 6xl
- Live preview for headlines and body text
- CSS custom properties (:root { --font-size-... }) output
- Calculates corresponding line-height and rem values
Frequently Asked Questions
Related Tools
More in Font & Typography ToolsFont Size Hierarchy Generator
Interactive visual typographic hierarchy designer for H1-H6, body text, and captions with desktop and mobile viewport preview.
Golden Ratio Typography Calculator
Calculate the mathematically perfect line height and content measure (line width) for any font size using the Golden Ratio (phi = 1.618).
Line Height Multiplier Calculator
Calculate unitless CSS line-height multipliers and exact pixel leadings across multiple font sizes for pixel-perfect typography.