Typography Scale Calculator – Generate a Harmonious Font Size Scale

Create beautiful typographic hierarchies with our Typography Scale Calculator. Enter your base font size and choose a scale ratio to generate a complete heading scale — perfect for web designers and UI developers.

Base Font Size (px)

Standard: 16px for body text

Scale Ratio

Number of Steps

Ratio Guide:

• 1.2-1.25: Body text, long-form content
• 1.33-1.414: Balanced hierarchy
• 1.5-1.618: Bold, impactful designs

Typography Scale

Enter base size and select ratio to generate scale

Typography Scale Best Practices

Base size: 16px is standard for readability
Line height: Decreases as font size increases
Scale ratio: Smaller ratios (1.2) for text-heavy sites, larger (1.5+) for bold designs
Golden Ratio (1.618): Creates naturally pleasing proportions
Consistency: Use the same scale across all pages

Tip: Major Third (1.25) and Perfect Fourth (1.333) are the most popular choices for web design as they provide clear hierarchy without extreme size differences.

How to Generate a Typography Scale

Set Your Base Font Size

Enter your body text size (typically 16px) as the foundation for your entire type scale.

Choose a Scale Ratio

Select from musical intervals like Major Third (1.25) or Golden Ratio (1.618) for harmonious sizing.

Generate & Export CSS

Get instant preview with live text samples and copy-ready CSS variables for your project.

Why Use This Typography Scale Calculator

Musical Scale Ratios

Choose from proven ratios like Minor Second (1.067) to Golden Ratio (1.618) for naturally harmonious type hierarchies.

Live Text Preview

See your actual scale rendered with sample text at each size level before implementing.

CSS Variable Export

Get ready-to-use CSS custom properties (--text-xs, --text-base, etc.) for easy integration.

Automatic Line Height

Optimal line heights are calculated automatically, decreasing as font size increases for better readability.

Typography Scale Ratios Reference

Scale Name	Ratio	Best For	Example (16px base)
Minor Second	1.067	Subtle, minimal designs	16px → 17px → 18px
Major Second	1.125	Gentle hierarchy	16px → 18px → 20px
Minor Third	1.2	Classic, readable	16px → 19px → 23px
Major Third	1.25	Popular web standard	16px → 20px → 25px
Perfect Fourth	1.333	Bold, impactful	16px → 21px → 28px
Golden Ratio	1.618	Dramatic, editorial	16px → 26px → 42px

Frequently Asked Questions

What is a typography scale?

A typography scale is a set of harmonious font sizes based on a mathematical ratio. Starting from a base size, each level is multiplied by the ratio to create consistent, proportional headings and text sizes.

What is the best font size ratio for websites?

Major Third (1.25) and Perfect Fourth (1.333) are most popular for websites. They provide clear visual hierarchy without extreme size jumps, working well for both body text and headings.

What should my base font size be?

16px is the web standard for body text, providing optimal readability on most devices. Some designers use 18px for more accessible, comfortable reading experiences.

How do I choose the right scale ratio?

For text-heavy sites (blogs, news), use smaller ratios (1.125-1.2). For marketing sites with bold headlines, use larger ratios (1.333-1.5). The Golden Ratio (1.618) creates dramatic contrast for editorial designs.

What line height should I use?

Body text needs 1.5-1.6 line height for readability. Headings can use tighter spacing (1.1-1.3) since larger fonts are naturally more legible. Our calculator adjusts line height automatically for each size.

Other Free Tools

Search tools