Typography Scale Calculator

Free
Utility

Create harmonious typography scales based on mathematical ratios. Generate balanced font sizes for headings and body text, with support for multiple units and customizable ratios.

Advertisement

Ad blocked by browser

Typography Scale Calculator

Generate a harmonious typography scale based on mathematical ratios

H1 - 89.76px
Primary Heading - The Quick Brown Fox
H2 - 67.34px
Secondary Heading - Jumps Over The Lazy Dog
H3 - 50.52px
Tertiary Heading - Pack My Box With Five Dozen Liquor Jugs
H4 - 37.9px
Quaternary Heading - How Vexingly Quick Daft Zebras Jump

This is a sample paragraph that demonstrates how body text looks at the base size. It includes multiple sentences to show text flow and readability. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

Understanding Typography Scales

What is a Typography Scale?

A typography scale creates visual hierarchy through mathematically related font sizes, ensuring consistent and harmonious design across your interface.

How It Works

  • Base Size: The foundation (typically 16px)
  • Ratio: Multiplier between steps (e.g., 1.333 = 33.3% increase)
  • Steps: Number of sizes above/below base size

Units Explained

px:
Fixed pixel values, exact sizes
rem:
Relative to root font size, best for accessibility
em:
Relative to parent element, for component-based designs

Common Ratios

Minor Second (1.067)
Subtle, minimal designs
Perfect Fourth (1.333)
Balanced, traditional designs
Golden Ratio (1.618)
Dramatic, artistic designs

Best Practices

  • Start with a comfortable body text size (16px)
  • Use rem units for better accessibility
  • Test your scale across different screen sizes
  • Consider hierarchy when choosing ratios
01

Create Perfect Typography Scales

Generate mathematically balanced font sizes using proven ratios. Export to CSS, Tailwind, or JSON for seamless integration into your projects.

Mathematical Ratios

Use classical ratios like the golden ratio or create custom values for perfect proportions

Real-time Preview

See how your typography scale looks with live visual feedback

Multiple Export Options

Download your scale as CSS variables, Tailwind config, or JSON

Multiple Units

Work with pixels, rems, or ems for better flexibility

Responsive Ready

Generate scales that work across all device sizes

Custom Ratios

Create your own custom ratios for unique typography scales

6+
Features
99.9%
Reliability
24/7
Available
Free
Always
02

How to Use

Simple 5-step process

1

Step 1

Enter your base font size (default 16px)

2

Step 2

Choose a ratio like Minor Third (1.2) or Golden Ratio (1.618)

3

Step 3

Select your preferred unit (px, rem, or em)

4

Step 4

Preview the generated scale in real-time

5

Step 5

Export as CSS, Tailwind config, or JSON

Quick Start
Begin in seconds
Easy Process
No learning curve
Instant Results
Get results immediately

Frequently Asked Questions

Everything you need to know about our process, pricing, and technical capabilities.

See Full FAQ

A typography scale is a systematic way of sizing text using mathematical ratios. It helps create visual hierarchy and harmony in your designs by ensuring all font sizes are mathematically related.

For web design, the Perfect Fourth (1.333) and Minor Third (1.2) are popular choices. The Golden Ratio (1.618) creates more dramatic size differences, while the Minor Second (1.067) offers subtle changes.

We recommend using rem units for better accessibility and responsive design. Pixels are good for fixed sizes, while ems are useful for component-specific scaling.

Most projects need 3-4 heading sizes above the base text size. The calculator lets you generate up to 10 steps in either direction for maximum flexibility.

Yes! You can export your scale to CSS variables or Tailwind config, making it easy to integrate with any design system or framework.

Still have questions?

Can't find what you're looking for? We're here to help you get the answers you need.