The Golden Ratio (also known as the Divine Proportion), approximately 1.618, is a value frequently found in nature, and used in the construction of aesthetically pleasing arragements of visual elements (akin to the Rule of Thirds in photography). The exact value of the ratio may be calculated with the simple formula 0.5 × ( 1 + √5 ), resulting in a Golden Rectangle where the length of the perpendicular side is 1.

This calculator determines the Golden Ratio of any given width or height, resulting in a Golden Rectangle.

Click here to download a Photoshop template for a 960px-wide webpage layout. It contains a series of blocks that relate to each other in the context of the Golden Ratio, and which may be used for laying out various boxes and columns.

The Golden Spiral is created by taking a Golden Rectangle and repeatedly subdividing it by the Golden Ratio. A curve can then be drawn between each section's opposing diagonal corners to create a spiral. The divisions created for the spiral can also be used for laying out visually pleasing designs with mathematical precision.

A Golden Spiral can be laid out as follows, with this 2000px-wide example. The values here are approximate, rounded for simplicity.

- Begin with a rectangle of 2000x1240px.
- Split with a vertical line at 1230px.
- Split the new right section with a horizontal line at 765px.
- Split the new bottom section with a vertical line at 290px.
- Split the new left section with a horizontal line at 185px.
- Split the new top section with a vertical line at 185px.
- Split the new right section with a horizontal line at 115px.
- Split the new bottom section with a vertical line at 40px.
- Split the new left section with a horizontal line at 40px.

To adapt the above Golden Spiral for other sizes, simply normalize the above values. For example, to create a 100px wide spiral, divide all values by the original width of 2000, then multiply by the desired width of 100.

For web design, here's a list of block sizes created using the Golden Ratio. They may be used together in a 960px-wide webpage layout, with 8x8px padding between elements. These values are the same as those used in the template provided above.

Block Size Maximum Dimensions Appearance Full-Width 1x 944x224px Full Half-Width 2x 464x224px Largest Quarter-Width 4x 224x224px Larger Sixth-Width 6x 144x144px Large Tenth-Width 10x 80x80px Medium Fifteenth-Width 15x 48x48px Small Twentieth-Width 20x 32x24px Smaller Thirtieth-Width 30x 16x16px Smallest

Elements may be combined by eliminating their padding. For example, two large elements merged together horizontally would be 224px wide x2, plus 8px padding x2, for a total size of 464x224px.

Each of the element sizes above may also be used to divide a webpage into columns. For example, using the quarter-width block size with arbitrary height would result in a four-column layout.

Many man-made creations use the Golden Ratio, including:

- Credit cards, index cards, envelopes, and business cards
- Standard paper stock such as legal, tabloid, and paperback
- Computer monitors
- Photographs
- Web and print layout
- The Egyptian pyramids
- The Greek Parthenon
- The Last Supper painting
- The Notre Dame cathedral in Paris
- Noah's Ark and the Ark of the Covenant in The Bible

- The bodies and parts of humans and animals
- DNA segments and binary attractors in the human genome
- Snail shells, seashells, seeds, and plants
- The reproductive patterns of rabbits and bees
- The energy level transitions of a hydrogen electron
- The orbital period, orbital velocity, and mean distance of all planets in the solar system
- The rings of Saturn
- Several shapes such as the hexagon, tetrahedron, hexahedron, and octahedron
- The Fibonacci sequence
- Musical octaves

The Golden Ratio at MathIsFun.com

The Golden Ratio at Wolfram MathWorld

Fibonacci Numbers and the Golden Section

Is the Golden Ratio Evidence of God?

Rule of Thirds Definition & Examples

Using the Rule of Thirds

Why Does the Rule of Thirds Work?

Printed from bitfume.com.

↩ Back Print Permalink