What is the Golden Ratio in typography?

The Golden Ratio (1.618) helps create visually balanced typography by defining harmonious relationships between font sizes and spacing.

How does this calculator work?

It multiplies your base font size by a modular scale ratio such as the Golden Ratio or Perfect Fourth to generate proportional typography sizes instantly.

Do I need an account to use it?

No account or sign-up is needed. The Golden Ratio Typography Calculator is 100% free and works directly in your browser.

Can I use this for design systems?

Yes, it outputs both px and rem values, making it easy to use in CSS frameworks, Figma text styles, and design system documentation.

Golden Ratio
Typography Calculator

Designer & developer friendly. Generate type scales, line heights and export ready assets (PNG, SVG, CSS, JSON).

Modular scaleDesigner-ready imagesCopy CSS & tokens

Export PNG / SVG

Copy CSS & Tokens

Export

Headline 3

110px

6.8535rem

LH: 119px / 7.4375rem

Headline 4

68px

4.2358rem

LH: 75px / 4.6875rem

Headline 5

42px

2.6179rem

LH: 47px / 2.9375rem

Headline 6

26px

1.618rem

LH: 31px / 1.9375rem

Body

16px

1rem

LH: 24px / 1.5rem

Caption

10px

0.618rem

LH: 13px / 0.8125rem

CSS Variables

:root {
  --base: 1rem;
  --type-4: 6.8535rem;
  --line-height-4: 7.4375rem;
  --type-3: 4.2358rem;
  --line-height-3: 4.6875rem;
  --type-2: 2.6179rem;
  --line-height-2: 2.9375rem;
  --type-1: 1.618rem;
  --line-height-1: 1.9375rem;
  --type-0: 1rem;
  --line-height-0: 1.5rem;
  --type--1: 0.618rem;
  --line-height--1: 0.8125rem;
}

JSON Tokens

{
  "type.4": "6.8535rem",
  "lineHeight.4": "7.4375rem",
  "type.3": "4.2358rem",
  "lineHeight.3": "4.6875rem",
  "type.2": "2.6179rem",
  "lineHeight.2": "2.9375rem",
  "type.1": "1.618rem",
  "lineHeight.1": "1.9375rem",
  "type.0": "1rem",
  "lineHeight.0": "1.5rem",
  "type.-1": "0.618rem",
  "lineHeight.-1": "0.8125rem",
  "base": "16px"
}

Understanding Typographic Scales & The Golden Ratio

Learn how to create harmonious, readable, and visually stunning typography using modular scales and the golden ratio.

What Is a Typographic Scale?

A typographic scale is a systematic way to size fonts so that headings, subheadings, body text, and captions are in harmony. Instead of choosing random sizes, you use a ratio to create consistent, balanced text throughout your design. Think of it like a musical scale every step feels right.

Common Typographic Scales

Minor Third (1.2) - Smooth, subtle size jumps for long text and readable interfaces.
Major Third (1.25) - Slightly stronger hierarchy for web design and editorial layouts.
Perfect Fourth (1.333) - Balanced and flexible, perfect for UI systems.
Perfect Fifth (1.5) - Strong contrast, ideal for branding and hero headings.
Golden Ratio (1.618) - Elegant, dramatic, and attention-grabbing, great for premium designs and posters.

Why Add the Golden Ratio Typography to Your Project?

The Golden Ratio Typography Scale creates a natural hierarchy and visual balance that feels intuitive. Designers use it for hero headings, logos, and premium web experiences because the eye naturally follows the proportion.

Visually pleasing hierarchy - smooth progression from headings to body text.
Improved readability with balanced line heights.
Professional look instantly - even simple layouts appear polished.
Works perfectly across responsive designs.
Designer + developer friendly - easy to implement using modular scales.

How to Use the Golden Ratio in Your Design System

1. Set your base font size (e.g., 16px).
2. Choose a ratio (Golden 1.618, Perfect Fourth 1.333, Minor Third 1.2).
3. Generate heading and body sizes using a calculator.
4. Apply consistent line heights for rhythm and readability.
5. Export as CSS tokens, PNG/SVG images, or design specs for Figma or code.