Enter any value to find its golden ratio pair — instantly
Consecutive Fibonacci numbers converge toward φ = 1.618…
| n | F(n) | F(n+1) | F(n+1) / F(n) |
|---|
Set body font at 16px → heading at 16 × 1.618 = 26px. Or line-height at 16 × 1.618 = 25.9px for optimal readability.
If your logo icon is 40px wide, the text beside it should be 40 × 1.618 = 64.7px wide for harmonious proportion.
Split a 1000px layout: sidebar = 1000 ÷ 2.618 = 382px, main content = 618px. Exactly φ proportion.
The rule of thirds is an approximation of the golden ratio. Place key subjects at 38% (1/φ) from the edges.
The Parthenon, Notre-Dame cathedral, and many modern buildings use golden ratio proportions in facade dimensions.
Place the horizon at 38% or 62% from the top to achieve golden ratio balance in landscape paintings.
The golden ratio (φ, phi ≈ 1.618) describes a proportion where a/b = (a+b)/a. It appears throughout nature, art, and architecture and is widely considered aesthetically pleasing.
Enter any value in either field. If you enter in field A, field B = A × 1.618. If you enter in field B, field A = B ÷ 1.618. The results panel shows both values and their sum.
φ = (1 + √5) / 2 = 1.6180339887498948482... It's an irrational number — its decimal expansion never repeats. The reciprocal is 1/φ = φ − 1 ≈ 0.618.
The ratio of consecutive Fibonacci numbers (1,1,2,3,5,8,13,21…) approaches φ as numbers grow. F(10)/F(9) = 55/34 ≈ 1.6176. F(20)/F(19) ≈ 1.61803. The convergence is remarkably fast.
Determine the relationship between your logo icon and the accompanying wordmark. If the icon is 40px tall, a golden-ratio wordmark height would be 40 × 1.618 = 64.7px.
Scale font sizes by φ: if body text is 16px, subheadings are 16 × 1.618 = 25.9px ≈ 26px, and main headings are 26 × 1.618 = 42px. This creates a naturally harmonious visual hierarchy.
If your main content column is 760px wide, a golden-ratio sidebar would be 760 ÷ 1.618 = 470px, or a narrower sidebar at 760 ÷ φ² ≈ 290px. Both create balanced two-column layouts.
The "golden spiral" (Fibonacci spiral) is a composition guide where you place the subject at the center of the spiral's smallest square. It's similar to the rule of thirds but rooted in the golden ratio.
What φ actually equals: (1 + √5) ÷ 2 = 1.6180339887... The reciprocal 1/φ = φ − 1 = 0.6180339887... This unique property — where a number minus 1 equals its own reciprocal — is what makes φ special among all real numbers.
Degrees of approximation: For most design work, rounding to 1.618 is precise enough. At widths above 1000px, rounding to the nearest integer introduces less than 1px of error.
The golden ratio in nature: Sunflower seed arrangements, nautilus shell growth, and leaf phyllotaxis all approximate Fibonacci patterns, which converge to φ. Whether this is aesthetically perceived by humans or a mathematical coincidence remains debated — but the proportion is undeniably useful as a design guide.
In 2026, a practical way to apply the golden ratio is to turn it into design tokens instead of recalculating it by hand. Define CSS custom properties like --phi: 1.618 and --phi-inverse: 0.618, then use them for widths, spacing, or type scales. Common mistake: forcing every layout choice to match 1.618 exactly. On mobile screens, strict golden-ratio dimensions often create awkward line lengths or wasted space, so treat it as a starting point and validate with container queries and real content.