How to Use Golden Section Proportions In Your Designs

Posted: 16 May 2011 05:30 AM PDT

“The power of the golden section to create harmony arises from its unique capacity to unite different parts of a whole so that each preserves its own identity and yet blends into the greater pattern of a single whole.”
— György Dóczi, The Power of Limits

Golden section proportions can be found in both nature and man-made structures. They exist in the proportions of human beings, the growth patterns of plants, animals, and insects, and structures like Stonehenge and the Parthenon.

Golden section proportions are also present in Greek art, writing, and architecture, and in the spiral shape of shells.

Whether we’ve been genetically programmed to like them or we find them pleasing due to all the examples around us, the golden section has clearly been a part of nature and human creation throughout history.

We have a preference toward objects that use golden proportions.

Stonehenge

What is the Golden Ratio?

The golden ratio is one where the ratio of the smaller segment to the larger segment is the same as the larger segment to the sum of both segments. This is more easily seen in a simple diagram.

Golden ratio

The golden ratio or divine proportion is a visual representation of the golden number Phi (Φ) which is approximately 1.1618.

The Fibonacci Sequence

The mathematics behind the golden ratio is heavily connected to the Fibonacci Sequence. If you’re unfamiliar with the fibonacci sequence, it begins by definition with the numbers 0, 1 and then each successive number in the sequence is the sum of the previous two numbers.

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55…

I’ll spare you the deep mathematics talk (we’ll just do a bit of division), since what we’re mainly interested in is how the sequence relates to the golden section.

If you take any number in the sequence and divide it by the previous number the result approximates Phi or the golden ratio.

With early numbers in the sequence this may not appear to be true, but as we continue along the sequence the division approaches 1.1618 rather quickly.

2/1 = 2.0
3/2 = 1.5
5/3 = 1.67
8/5 = 1.6
13/8 = 1.625
21/13 = 1.615
34/21 = 1.619
55/34 = 1.6176

As you might expect the Fibonacci sequence is also found in art and nature. Some have argued that Virgil used the sequence in the poetry of the Aenid. It’s found in the musical compositions of Mozart.

Vitruvious, da Vinci, and Durer used it to create divine proportions of man.

da Vinci's divine proportions of man

The ratio of the numbers 13/8 are found in pine cone spirals and the ratio of numbers 34/21 are found in the spiral of a sunflower.

Many biological growth patterns approach the golden section instead of being exact in the same way the Fibonacci Sequence approaches the golden section ratio.

Golden Section Shapes

When people think of shapes with golden section ratios they typically think of a golden rectangle where one side divided by the other is 1.1618. However, a variety of mathematics can be applied to different layouts and a variety of shapes can be constructed from golden section proportions.

You can create golden rectangles, triangles, ellipses, pentagrams, and spirals. Think outside the box or in this case outside the golden rectangle. Click the image above to see how some golden shapes can be constructed.

How to Use the Golden Section in Design

Hopefully some of the above has convinced you of the aesthetic qualities of golden section proportions. Now how do you actually apply these principles in your design and when might you use them?

The first use of the golden section is when creating a grid for your design. Let’s consider a simple case of a two column layout with a fixed width of 960px. This is a rather standard layout and width.

960 px / 1.618 = 593 px
960 px – 593 px = 367 px

Golden Rectangle

From the above our content column would be 593 px and our sidebar would be 367 px. An even better approach if we’d like our design to be fluid would be to use % or em as a measurement.

If we stick with 960 px for the overall width of our layout and assume a default font size of 16px then:

960px / 16px = 60em (total width)
60 * 61.8% = 37 em (larger section)
60em – 37 em = 23 em (smaller section)

60 / 37 = 1.62
37 / 23 = 1.61

Not exactly Phi, but very close.

Mark Boulton has an excellent post running you through constructing an adaptive gird this way as well as providing the css to make it happen. Mark links to a simple demo in his article and you can see a more realistic demo here.

The above is all about dividing your page horizontally using the golden ratio. Dividing the page vertically is another matter.

In print design you can control both the height and width of the page. In web design the height of the page tends to vary based on the content. You could set an absolute height if you want, though it’s generally not practical.

Where it might be more appropriate to use the golden section in web design is to create buttons using golden section proportions or look to different sections of your page and see if a golden ratio will work when deciding what size they should be.

For example on many home pages the main content will leave out the second column and create a single column for the one page. Your content area could use a height of 593 px (assuming a 960 px width layout) and become a golden section rectangle.

Golden Section Home Page

Other shapes you add to your design (ellipses, triangles) could be constructed as golden section shapes. You could use the golden ratio when setting width and height of any images you include in your design.

Essentially any place where the dimensions of an element will be fixed a golden shape can be created.

Below are links to resources and tutorials to help you build golden section grids:

Another interesting application for the golden section is in setting up a typographic scale. Tim Brown recently described how he set up a modular scale based on the golden ratio in a recent post for A List Apart titled More Meaningful Typography.

The Rule of Thirds: A Simplified Golden Section

Consider again the Fibonacci sequence, particularly the early numbers in the series. Using the numbers 2 and 3 from the series we get a simple approximation of the golden section as 1.667. (2/3), which leads us to the rule of thirds.

A 2-column website could make use of this rule of thirds to have a content area 2/3 the width of the whole and a sidebar 1/3 the width. It’s similar to what we did above without all the math.

The rule of thirds is often applied to images in order to create more interest. By dividing an image into thirds both horizontally and vertically you create a grid of 9 rectangles.

You want to align important elements of the image around the central rectangle, ideally at any of the 4 corners of that rectangle. This creates tension and adds interest and energy to your composition.

The image above is one I captured in Cooperstown, NY, just down the road from the Baseball Hall of Fame. In the original picture the lighthouse is centered horizontally and it’s hardly a great image.

I cropped it so the lighthouse aligns along the right edge of the central rectangle and the horizon aligns along the bottom edge of the same rectangle. The cropped image while, still not one that will win any awards is much stronger than the original.

Mouse over the image to see the “rule of thirds” grid.

Again with web design we might not be able to do this for our entire layout, since our height is likely a variable. However the rule of thirds can be particularly effective when used to crop images for maximum impact.

You could also use the rule of thirds for placing elements within a fixed dimension section of your layout such as the single column home page layout described above.

Summary

Phi (φ), the Fibonacci sequence, and the golden ratio are seen again and again in nature as well as in art, architecture, music, and design.

Whether we’re genetically predisposed to find golden proportions aesthetically pleasing or we’ve simply trained ourselves over history to find it so, there’s no denying golden sections show up again and again in nature and many man-made structures.

The next time you’re considering a grid for a website design think about the golden section and how you might use it. You don’t want to arbitrarily force golden proportions into your design, however they can make for pleasing proportions.

Consider using them for geometrical and organic constructions, particularly those involving rhythm and harmony among multiple elements.

Your visitors may not know why they find your site attractive, but they will likely respond favorably to golden section proportions in your design.