Modular Scale Calculator

Generate harmonious typography scales using modular ratios. Perfect for creating consistent, visually pleasing type hierarchies.

The base size is your body text size, typically 16px for web.

Each step is multiplied by 1.25 (4:5)

Major Third Scale

Base: 16px | Ratio: 1.25 | 4:5

Typography Scale Preview

-3micro

2xs - The quick brown fox

-2caption

xs - The quick brown fox

-1small

sm - The quick brown fox

0body

base - The quick brown fox

+1lead

lg - The quick brown fox

+2h6

xl - The quick brown fox

+3h5

2xl - The quick brown fox

+4h4

3xl - The quick brown fox

+5h3

4xl - The quick brown fox

+6h2

5xl - The quick brown fox

+7h1

6xl - The quick brown fox

+8display-sm

7xl - The quick brown fox

+9display

8xl - The quick brown fox

+10display-lg

9xl - The quick brown fox

Scale Values

StepNameSemanticPixelsREMEM
-32xsmicro8.19px0.512rem0.512em
-2xscaption10.24px0.640rem0.640em
-1smsmall12.80px0.800rem0.800em
0basebody16.00px1.000rem1.000em
+1lglead20.00px1.250rem1.250em
+2xlh625.00px1.563rem1.563em
+32xlh531.25px1.953rem1.953em
+43xlh439.06px2.441rem2.441em
+54xlh348.83px3.052rem3.052em
+65xlh261.03px3.815rem3.815em
+76xlh176.29px4.768rem4.768em
+87xldisplay-sm95.37px5.960rem5.960em
+98xldisplay119.21px7.451rem7.451em
+109xldisplay-lg149.01px9.313rem9.313em

Scale Ratios Reference

When to Use Which Ratio

  • -Minor/Major Second: Subtle scales for dense content
  • -Minor/Major Third: Balanced, good for most websites
  • -Perfect Fourth: Classic, widely used in editorial
  • -Golden Ratio: Dramatic, great for headlines

Best Practices

  • -Use 16px as base for optimal browser compatibility
  • -Prefer rem units for scalable, accessible typography
  • -Smaller ratios work better on mobile screens
  • -Test your scale with actual content before finalizing