How to Use the Typography Scale Calculator

This tool helps you generate a clean, consistent, professional typography scale for your website, app, or brand guidelines. You only need one size, and the tool automatically builds all other heading and paragraph sizes for you.

1. Select Your Base Element

Choose which text style you already know the size of:

• H1 — usually your hero or biggest heading
  
• H2–H6 — smaller headings from your design
  
• Paragraph — your body text (e.g., 16px or 18px)
  

✔ Example: If your design uses 36px for H1, choose Base element = H1.

2. Enter the Base Font Size

In the “Base size” box:

• Type the size in px
  
• Example: 36 for a 36px H1
  
• Example: 16 for 16px body text
  

This will be the reference point to generate your scale.

3. Set Your Scale Ratio

The “Scale ratio” controls how much larger or smaller each level becomes.

Common ratios:

• 1.20 — Minor third (smooth & modern)
  
• 1.25 — Major third (balanced, most popular)
  
• 1.33 — Perfect fourth (bolder)
  
• 1.41 — Augmented fourth (dramatic)
  

✔ Default is 1.25, which suits most websites.

4. Check Root Font Size (for rem)

Your root font size is usually:

• 16px (default for browsers)
  
• Only change if your theme uses a different root size
  

This ensures rem values are accurate.

5. View Your Auto-Generated Typography Scale

The table automatically displays:

• H1 → H6
  
• Paragraph
  

Each item shows:

• Live preview
  
• px value
  
• rem value
  
• pt value
  
• A Copy All button
  

Everything updates instantly when you change any field.

6. Copy Values (px / rem / pt)

You can copy:

• Individual px
  
• Individual rem
  
• Individual pt
  
• Or all formats together
  

Just click any chip or the Copy All button.

✔ This makes it easy to paste into:

• CSS / SCSS
  
• WordPress Customizer
  
• Elementor / Gutenberg
  
• Figma
  
• Brand guidelines
  
• Design systems

7. Reset Anytime

Click “Reset to Default”
This restores:

• Base element: H1
  
• Base size: 36px
  
• Ratio: 1.25
  
• Root: 16px
  

Great for starting fresh or generating a new scale.

Done!

Your typography system is now perfectly structured, consistent, and ready to use across your entire website or design project.