Free Modular Scale Generator

Build harmonious typographic scales and systematic spacing grids using musical intervals and classic ratios

Modular Scale Generator

Base Size
Quick base sizes:
Ratio
Current scale: Golden Ratio (1.618)
Steps8
4 steps down, 4 steps up from base
Scale Preview
Predefined Scales:
Generated Scale Values
StepDescriptionPX ValueREM ValueEM ValueRatio Step
CSS Code Output
Tailwind Configuration
{
  "fontSize": {}
}
The Power of Modular Scales in Design Systems
A modular scale is a sequence of numbers that relate to one another through a repeated mathematical ratio. Used by typographers and layout engineers, it creates natural visual hierarchies and spacing systems. Instead of selecting font sizes and margins arbitrarily, modular scales ensure that every dimension in your application has a calculated, harmonious relationship with standard base constraints.
The Modular Scale Scaling Formula
To find any step up or step down value on a scale, multiply the base screen value (such as 16px) by the chosen scale ratio raised to the power of the target step index:
Scale Value = Base Size × RatioStep
If your base body text size is **16px** and you use a **1.5 (Perfect Fifth)** scaling factor:
Step -1: 16 × 1.5⁻¹ = 10.67px (Footnotes) 
Step 0: 16 × 1.5⁰ = 16.00px (Body Base) 
Step 1: 16 × 1.5¹ = 24.00px (Subheadings) 
Step 2: 16 × 1.5² = 36.00px (Titles) 
Step 3: 16 × 1.5³ = 54.00px (Hero Text)
Harmonious Design Ratios Reference Table
Compare common proportions based on geometry, musical scales, and standard mathematical constants:
Scale Ratio NameDecimal ValueMathematical OriginVisual Feel / Personality
Minor Second1.06716:15 ratioExtremely compact (ideal for high-density dashboards)
Major Second1.1259:8 ratioSubtle progression (highly modern, clean interface jumps)
Perfect Fourth1.3334:3 ratioBalanced, classic (standard readable book sizes)
Perfect Fifth1.5003:2 ratioBold contrast (strong separation between tags and titles)
Golden Ratio1.618φ (Phi) constantClassic harmony (natural visual balance)
Octave2.0002:1 ratioDramatic leaps (massive header highlights)
Generating CSS Variable Blocks
Export scales directly into custom stylesheet declarations. Adjust the base body font at breakpoints to keep scales responsive:
:root {
  --base-size: 1rem;
  --ratio: 1.333;
  --text-sm: calc(var(--base-size) / var(--ratio)); /* 0.75rem */
  --text-md: var(--base-size); /* 1rem */
  --text-lg: calc(var(--base-size) * var(--ratio)); /* 1.333rem */
  --text-xl: calc(var(--text-lg) * var(--ratio)); /* 1.777rem */
}
Frequently Asked Questions (FAQs)
A Modular Scale Generator is a tool that creates harmonious sequences of numbers based on a base size and ratio. It's used in design to establish consistent typography, spacing, and layout proportions.
A modular scale is a sequence of numbers that relate to one another through a repeated ratio. In design, it creates visual harmony by establishing proportional relationships between elements like font sizes, spacing, and layout dimensions.
Choose a base size (e.g., 16px) and a ratio (e.g., 1.618 for golden ratio). Calculate values using: Value = Base × Ratio^Step. Steps go both up and down from the base (e.g., -2, -1, 0, 1, 2).
Common ratios: 1.618 (Golden Ratio), 1.5 (Perfect Fifth), 1.333 (Perfect Fourth), 1.25 (Major Third), 1.2 (Minor Third), 1.414 (√2), 2.0 (Octave). Each creates different visual characteristics.
Common base sizes: 16px (standard body text), 18px (comfortable reading), 14px (UI interfaces), 20px (large text/accessibility). Choose based on your content and audience.
Define CSS custom properties for each scale value, then use them throughout your styles. Example: --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; etc.
Yes! Use relative units (rem, em) and adjust the base size with media queries. All scale values will automatically adjust proportionally.
Often yes for harmony, but sometimes separate scales work better. Typography might use a different ratio than spacing. Test what works for your design.
Typically 5-7 steps each direction from base. Include: micro text (-2), small text (-1), base (0), headings (1-3), display sizes (4-5). Adjust based on your design needs.
1) Too many steps, 2) Extreme ratios that don't work practically, 3) Ignoring context and usability, 4) Using only fixed units (px instead of rem), 5) Not testing in actual layouts.
Logo
HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.
Follow Us
Our Tools
Our Company
Special Tools
© 2026 HiFi Toolkit. All rights reserved.
Terms & ConditionsPrivacy Policy