---
name: Golden ratio
slug: golden-ratio
category: layout
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: The proportion of roughly 1 to 1.618 used to divide a layout, so its
  parts relate to each other by a rule instead of by arbitrary numbers.
aliases:
  - name: divine proportion
    source: community
  - name: golden section
    source: community
  - name: phi grid
    source: community
  - name: "1.618"
    source: community
tags:
  - grids
  - perception
relations:
  contrastWith:
    - rule-of-thirds
    - modular-scale
  variantOf: []
  partOf: []
  seeAlso: []
implementations: []
sources:
  - title: A designer's guide to the Golden Ratio, Creative Bloq
    url: https://www.creativebloq.com/design/designers-guide-golden-ratio-12121546
demo: inline
exhibit: false
useWhen: picking proportions that are not arbitrary
---

Cut a line so that the whole is to the longer part as the longer part is to the shorter, and
the ratio you get is roughly 1 to 1.618. It is written with the Greek letter phi, it is
irrational, and it is the positive solution to the equation that says a number is one more
than its own reciprocal. The property that makes it interesting to a designer is what falls
out of that: take a rectangle of that ratio, cut a square off one end, and what is left is
another rectangle of exactly the same ratio. The shape contains a smaller copy of itself,
forever, which is why a layout divided this way can be divided again the same way and still
look related to itself.

The usual claims about it deserve to be met with more scepticism than they get. The idea that
people find the proportion inherently beautiful traces to a set of nineteenth century
preference experiments that have replicated poorly ever since, and the famous sightings in the
Parthenon, in the nautilus shell and in Renaissance painting are mostly measurements chosen
after the fact, from a range wide enough that some ratio near 1.6 was always going to appear.
The honest summary is that there is very little evidence the number does anything special to
a viewer.

What survives that is still worth having. The value of any ratio in layout is that it is a
rule: pick one and the widths, the gaps and the sizes in a design come out of the same
arithmetic instead of being negotiated one at a time, and the result reads as deliberate
because it is. The golden ratio is a decent pick for the job, and its self-similarity is a
real advantage over the alternatives, since a golden split can be split again without
introducing a new number. The rule of thirds is the cheaper rule that does most of the same
work, and a [modular scale](/modular-scale) is the same idea applied to type sizes, where a
constant ratio between steps is what keeps a heading and its body text feeling like a pair.

In practice treat it as a starting number, not a verdict. Derive the split, then round it to
whatever [spacing scale](/spacing-scale) or column grid the rest of the system runs on,
because a proportion that lands on 172.4 pixels is worse than one that lands on 176 and
agrees with everything around it. Then look at the result: optical adjustment outranks the
arithmetic every time, and a proportion that measures correctly but reads as top heavy is
simply wrong. The ratio is a way to stop arguing about numbers, which is a genuinely useful
thing for it to be, and it is not a proof that the numbers are right.