What is a typography scale?

A typography scale is a system of font sizes that creates visual harmony in your design. It uses a mathematical ratio to generate a series of related font sizes, ensuring consistent and proportional typography throughout your website or application.

How do I generate a typography scale?

Set your base font size (typically 16px), choose a ratio (1.125 to 2.0), select a unit (px, rem, or em), and the scale is generated automatically. The scale includes sizes from Small 2 to Heading 6, with the base size in the middle.

What ratios are available?

Eight ratios: 1.125 (Minor Second), 1.2 (Major Second), 1.25 (Minor Third), 1.333 (Perfect Fourth), 1.414 (Augmented Fourth), 1.5 (Perfect Fifth), 1.618 (Golden Ratio), and 2.0 (Octave). Each creates a different visual rhythm.

What units can I use?

Three units: px (pixels, fixed size), rem (relative to root element, recommended for accessibility), and em (relative to parent element). The generator shows all three values for each scale item.

How do I use the generated scale?

Copy the CSS variables or individual values and use them in your stylesheets. The scale provides consistent font sizes for headings, body text, and small text that work harmoniously together.

Is the typography scale generator free?

Yes, completely free! No registration, no limits, no hidden fees. All scale generation happens in your browser - we never see or store your settings.

📐 Typography Scale Generator

Generate typography scales for perfect font sizing. Create harmonious font size scales with different ratios.

Base Size: 16px

Ratio

Display Unit

Typography Scale Preview

Heading 6

The quick brown fox jumps over the lazy dog

3.81rem

Heading 5

The quick brown fox jumps over the lazy dog

3.05rem

Heading 4

The quick brown fox jumps over the lazy dog

2.44rem

Heading 3

The quick brown fox jumps over the lazy dog

1.95rem

Heading 2

The quick brown fox jumps over the lazy dog

1.56rem

Heading 1

The quick brown fox jumps over the lazy dog

1.25rem

Base

The quick brown fox jumps over the lazy dog

1rem

Scale Values

Name	px	rem	em
Small 2	10.2px	0.64rem	0.64em
Small 1	12.8px	0.8rem	0.8em
Base	16px	1rem	1em
Heading 1	20px	1.25rem	1.25em
Heading 2	25px	1.56rem	1.56em
Heading 3	31.3px	1.95rem	1.95em
Heading 4	39.1px	2.44rem	2.44em
Heading 5	48.8px	3.05rem	3.05em
Heading 6	61px	3.81rem	3.81em

CSS Code

:root {
  --font-size-small-2: 0.64rem;
  --font-size-small-1: 0.8rem;
  --font-size-base: 1rem;
  --font-size-heading-1: 1.25rem;
  --font-size-heading-2: 1.56rem;
  --font-size-heading-3: 1.95rem;
  --font-size-heading-4: 2.44rem;
  --font-size-heading-5: 3.05rem;
  --font-size-heading-6: 3.81rem;
}

/* Usage */
h1 { font-size: var(--font-size-heading-6); }
h2 { font-size: var(--font-size-heading-5); }
h3 { font-size: var(--font-size-heading-4); }
h4 { font-size: var(--font-size-heading-3); }
h5 { font-size: var(--font-size-heading-2); }
h6 { font-size: var(--font-size-heading-1); }
p, body { font-size: var(--font-size-base); }

How to Build a Typography Scale

Select the base size. 16px is a safe default for body text on the web.
Choose a ratio (Major Third, Perfect Fourth, Golden Ratio, etc.) that matches your brand personality.
Preview headings and body copy to ensure the hierarchy feels balanced.
Copy the generated CSS variables and use them in your design system or Tailwind config.

Ratio Cheat Sheet

Subtle Scales

Major Second (1.125): Great for UI-heavy dashboards.
Minor Third (1.2): Balanced spacing for product copy.
Major Third (1.25): Popular choice for editorial layouts.

Expressive Scales

Perfect Fourth (1.333): Strong contrast between headings.
Golden Ratio (1.618): Dramatic hierarchy for marketing pages.
Octave (2): Use sparingly for hero/eyebrow text.

Tips for Better Type Scales

Limit yourself to 5–7 steps in the scale to avoid overwhelming options.
Pair type scales with consistent line-height (1.2 for headings, 1.5 for body).
Use rem for font sizes so the scale respects the root font size.
Test responsive typography by adjusting the base size via CSS clamp() or media queries.