Pixel360Golden ratio formula
The golden ratio, written φ (phi), is the proportion where the whole is to the longer part as the longer part is to the shorter part. Solving that gives an exact value:
φ = (1 + √5) ÷ 2 ≈ 1.6180339887
longer section a = total ÷ φ
shorter section b = total − a
φ has two handy properties. Its reciprocal is φ − 1, so dividing by 1.618 is the same as multiplying by 0.618. And φ² = φ + 1 ≈ 2.618. In practice that means a golden ratio calculator only ever needs to multiply or divide by one number.
Worked examples
- A 960px layout: 960 ÷ 1.618 = 593.31px for the main column and 960 − 593.31 = 366.69px for the sidebar (before gutters).
- A 1200px container: 741.64px and 458.36px.
- Splitting 100%: 61.80% and 38.20%, which in CSS Grid can be written as
grid-template-columns: 1.618fr 1fr. - Going up from 16px: 16 × 1.618 = 25.89px; going down, 16 ÷ 1.618 = 9.89px.
Golden ratio type scale (16px base)
Each step multiplies the base by φ once more: size = base × φn. Rem values use the default 16px root.
| Step (n) | Multiplier | Pixels | REM |
|---|---|---|---|
| -2 | 0.38 | 6.11px | 0.382rem |
| -1 | 0.62 | 9.89px | 0.618rem |
| 0 | 1.00 | 16.00px | 1rem |
| 1 | 1.62 | 25.89px | 1.618rem |
| 2 | 2.62 | 41.89px | 2.618rem |
| 3 | 4.24 | 67.78px | 4.236rem |
| 4 | 6.85 | 109.67px | 6.854rem |
The jumps are large. Step 1 (25.89px) and step 2 (41.89px) make clear H3 and H2 sizes, but step 4 at about 110px is display-only territory. Step −2 (6.11px) is too small for readable text; it is better used for spacing. Convert any of these with the px to rem converter, or make them fluid with the CSS clamp() generator.
Using the golden ratio in CSS
You do not have to hard-code the decimals. CSS Grid can express the split directly, and a custom property keeps the ratio in one place:
:root { --phi: 1.618; }
.layout { display: grid; grid-template-columns: 1.618fr 1fr; gap: 2rem; }
h2 { font-size: calc(1rem * var(--phi) * var(--phi)); } /* about 2.618rem */
.hero { aspect-ratio: 1.618 / 1; }Using fr units means the gap is subtracted first and the remaining space is split in golden proportion, which avoids the gutter mistake described below. The aspect-ratio line gives you a golden rectangle at any width.
Where the golden ratio is genuinely useful
- Two-column layouts: a 61.8 / 38.2 split gives a clearly dominant main area without making the sidebar feel cramped.
- Type and spacing scales: a single, consistent ratio keeps sizes related to each other, which is the real benefit of any modular scale.
- Crop and placement guides: golden ratio lines are a starting point for positioning a subject or a focal element.
- Picking a size when you have no other constraint: it is a reasonable default, and it saves debating arbitrary numbers. For fixed frames such as 16:9 video, use the aspect ratio calculator instead.
What the golden ratio is not
You will often read that the golden ratio appears everywhere in nature, in famous buildings and in the human face, and that people universally find it the most beautiful proportion. Many of these claims are overstated or based on choosing measuring points until the numbers fit. Some real patterns exist, such as the Fibonacci-like spiral arrangement of seeds in sunflowers, but research on whether people prefer golden rectangles over nearby proportions has been mixed. Treat φ as one useful, mathematically tidy proportion, not as a guarantee of good design. The mathematics itself is well documented on Wolfram MathWorld.
Common mistakes
- Multiplying the total by 0.382 and 0.618 separately, then rounding both up. Round one section and subtract it from the total so the parts still add up.
- Ignoring gutters and padding. Subtract the gap first, then split what is left.
- Forcing it everywhere. Content, readability and line length matter more than hitting 1.618 exactly. A text column with golden proportions but 120 characters per line is still too wide to read comfortably.
Frequently asked questions
What is the golden ratio as a percentage split?
About 61.8% and 38.2%. The longer part is total ÷ φ ≈ 0.618 of the whole, and the shorter part is the remaining 0.382.
How do I find the golden ratio of a number?
Multiply it by 1.618 to get the next larger value in golden proportion, or divide it by 1.618 (the same as multiplying by 0.618) to get the next smaller one. For 100px that gives 161.8px and 61.8px.
Is the golden ratio the same as the rule of thirds?
No. The rule of thirds splits a frame at 33.3% and 66.7%, while golden ratio lines sit at about 38.2% and 61.8%. They are close, which is one reason both feel balanced, but they are different proportions.
How is the golden ratio related to the Fibonacci sequence?
Dividing each Fibonacci number by the one before it (8 ÷ 5, 13 ÷ 8, 21 ÷ 13 and so on) gives ratios that get closer and closer to φ. 89 ÷ 55 is already 1.61818, accurate to four decimal places.
Is a golden ratio type scale too big for websites?
Often, yes, for many heading levels. With a 16px base, the fourth step up is about 110px. Many designers use φ for two or three levels only, or pick a gentler ratio such as 1.25 for interfaces with lots of headings.