Golden Ratio Calculator

Golden Ratio Calculator

Calculate perfect proportions using phi (φ = 1.618034)

The Golden Ratio
φ
1.618
1
1.000

The ratio of the whole to the larger part equals the ratio of the larger part to the smaller part

Typography Scale
px
1.4px
÷1.618^5
2.3px
÷1.618^4
3.8px
÷1.618^3
6.1px
÷1.618^2
9.9px
÷1.618^1
16.0px
Base
25.9px
×1.618^1
41.9px
×1.618^2
67.8px
×1.618^3
109.7px
×1.618^4
177.4px
×1.618^5

Preview

Heading 2

Heading 1

Base Text

Quick Reference
Golden Ratio
φ = 1.618033988749895
Reciprocal (1/φ)
0.618033988749895
Percentage Split
61.8% / 38.2%
Formula
(1 + √5) / 2
Common Uses
  • •Typography scale for headings
  • •Sidebar/content width ratios
  • •Margin and padding systems
  • •Image cropping proportions
  • •Grid column widths
  • •Logo and icon sizing
Calculator
× φ (larger)
161.80
÷ φ (smaller)
61.80
Tailwind Config
1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      fontSize: {
6      'base': '16px',
7      '1xl': '25.89px',
8      '2xl': '41.89px',
9      '3xl': '67.78px',
10      },
11    },
12  },
13}
CSS Variables
1:root {
2  /* Typography Scale (Golden Ratio) */
3  --font-size-base: 16px;
4  --font-size-1xl: 25.89px;
5  --font-size-2xl: 41.89px;
6  --font-size-3xl: 67.78px;
7

8  /* Spacing Scale (Golden Ratio) */
9  --spacing-0: 0px;
10  --spacing-1: 1px;
11  --spacing-2: 1px;
12  --spacing-3: 2px;
13  --spacing-4: 3px;
14  --spacing-5: 5px;
15  --spacing-6: 8px;
16  --spacing-7: 13px;
17  --spacing-8: 21px;
18  --spacing-9: 34px;
19  --spacing-10: 55px;
20  --spacing-11: 89px;
21  --spacing-12: 144px;
22

23  /* Layout Proportions */
24  --layout-larger: 741.64px;
25  --layout-smaller: 458.36px;
26  --golden-ratio: 1.618033988749895;
27}

You might also like

Typography Scale

Preview font size scale

Aspect Ratio Calculator

Calculate aspect ratios

Frequently Asked Questions

What is the golden ratio?

The golden ratio (phi, φ) is approximately 1.618033988749895. It's a mathematical ratio found throughout nature and art that creates aesthetically pleasing proportions. When two quantities are in the golden ratio, their ratio equals the ratio of their sum to the larger of the two quantities.

How do I use the golden ratio in typography?

Multiply your base font size by 1.618 to get larger sizes, or divide by 1.618 for smaller sizes. For example, if your body text is 16px, headings could be 26px (16 × 1.618), 42px (26 × 1.618), and so on, creating a harmonious type scale.

What is a modular scale?

A modular scale is a sequence of numbers that relate to each other through a consistent ratio. Using the golden ratio as your scale factor creates sizes that feel naturally balanced. This applies to font sizes, spacing, and layout dimensions.

How do I apply golden ratio to layout design?

Divide your layout into sections using the ratio 1:1.618. For a 1000px wide container, the larger section would be ~618px and the smaller ~382px. This creates a visually balanced asymmetrical layout often seen in magazine and web design.