Typography Scale Calculator

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.

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

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

How to Use the Typography Scale Calculator

Step 1

Enter your base font size (default 16px)

Step 2

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

Step 3

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

Step 4

Preview the generated scale in real-time

Step 5

Export as CSS, Tailwind config, or JSON

Frequently Asked Questions