Golden Ratio in Design — φ 1.618 for Layouts, Typography, and Spacing

The golden ratio (φ ≈ 1.618) appears throughout nature and art. Applying it to web design creates proportions that feel balanced without requiring exact measurements.

Calculate precise golden ratio dimensions with the Aspect Ratio Calculator.

What is the golden ratio?

The golden ratio φ (phi) ≈ 1.6180339887…

A rectangle is “golden” when:

width / height = height / (width - height) = φ ≈ 1.618

So a golden rectangle measuring 1000px wide should be approximately 618px tall (1000 / 1.618 ≈ 618).

CSS golden ratio layout

:root {
  --phi: 1.618;
  --content-width: 65ch;
  --sidebar-width: calc(var(--content-width) / var(--phi));
  /* 65ch / 1.618 ≈ 40ch */
}

/* Classic golden ratio two-column layout */
.golden-layout {
  display: grid;
  grid-template-columns: 1fr calc(1fr / 1.618);
  /* Or: grid-template-columns: 61.8fr 38.2fr; */
  gap: 2rem;
}

/* Article content column — about 61.8% of total width */
.main-content { grid-column: 1; }
.sidebar      { grid-column: 2; }

Golden ratio typography scale

A type scale built on φ creates visually harmonious relationships between font sizes:

:root {
  --font-base: 1rem;      /* 16px */
  --phi: 1.618;
  
  /* Descending (small sizes): */
  --text-xs: calc(var(--font-base) / var(--phi) / var(--phi));  /* ~0.382rem */
  --text-sm: calc(var(--font-base) / var(--phi));               /* ~0.618rem */
  
  /* Ascending (large sizes): */
  --text-md: var(--font-base);                                   /* 1rem */
  --text-lg: calc(var(--font-base) * var(--phi));               /* ~1.618rem */
  --text-xl: calc(var(--font-base) * var(--phi) * var(--phi));  /* ~2.618rem */
  --text-2xl: calc(var(--font-base) * var(--phi) * var(--phi) * var(--phi)); /* ~4.236rem */
}

/* Practical rounded values: */
:root {
  --text-xs:  0.618rem;   /* ~10px */
  --text-sm:  0.786rem;   /* ~13px */
  --text-md:  1rem;       /* 16px */
  --text-lg:  1.618rem;   /* ~26px */
  --text-xl:  2.618rem;   /* ~42px */
  --text-2xl: 4.236rem;   /* ~68px */
}

Golden ratio spacing

/* Space scale based on φ */
:root {
  --space-1: 0.382rem;   /* 6px */
  --space-2: 0.618rem;   /* 10px */
  --space-3: 1rem;       /* 16px */
  --space-4: 1.618rem;   /* 26px */
  --space-5: 2.618rem;   /* 42px */
  --space-6: 4.236rem;   /* 68px */
  --space-7: 6.854rem;   /* 110px */
}

.section {
  padding: var(--space-6) var(--space-4);  /* 68px 26px */
}

.card {
  padding: var(--space-4);   /* 26px */
  gap: var(--space-3);       /* 16px between elements */
}

Golden ratio image crop

// Calculate golden ratio crop dimensions:
function goldenCrop(width) {
  const phi = 1.618;
  return {
    width,
    height: Math.round(width / phi),
    ratio: '1.618:1'
  };
}

console.log(goldenCrop(1920)); // { width: 1920, height: 1187 }
console.log(goldenCrop(1200)); // { width: 1200, height: 742 }
console.log(goldenCrop(800));  // { width: 800, height: 495 }

# Crop an image to golden ratio with Pillow:
from PIL import Image

def crop_to_golden_ratio(img_path: str, output_path: str):
    phi = 1.618
    img = Image.open(img_path)
    w, h = img.size
    
    # Target: maintain width, reduce height
    target_h = round(w / phi)
    
    if target_h > h:
        # Image too tall for golden ratio at this width — crop width instead
        target_w = round(h * phi)
        left = (w - target_w) // 2
        img = img.crop((left, 0, left + target_w, h))
    else:
        # Crop height from center
        top = (h - target_h) // 2
        img = img.crop((0, top, w, top + target_h))
    
    img.save(output_path)

Fibonacci spiral overlay

The golden spiral approximates the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21…):

/* Position key elements along the φ spiral naturally using CSS Grid */
.hero {
  display: grid;
  grid-template-columns: 61.8fr 38.2fr;  /* 61.8% + 38.2% = 100% */
  grid-template-rows: 61.8fr 38.2fr;
  height: 100vh;
}

/* The "optical center" of the golden rectangle is at (61.8%, 38.2%) */
/* Place your primary CTA or focal image near this point */
.hero-cta {
  grid-column: 1;
  grid-row: 1;
  place-self: end start;  /* Near the optical center */
}

Practical limits

The golden ratio is a starting point, not a law:

• Use φ to generate initial proportions, then adjust for readability and function
• Line length (measure) should be 60–75 characters regardless of φ proportions
• Spacing driven by content needs often matters more than mathematical ratios
• The ratio is most useful for hero sections, image crops, and major layout divisions

Related tools

• Aspect Ratio Calculator — calculate precise ratios
• CSS Grid Generator — build ratio-based grids
• PX to REM Converter — convert spacing values