What is the golden section

golden ratio

Our editors will review what you’ve submitted and determine whether to revise the article.

Our editors will review what you’ve submitted and determine whether to revise the article.

golden ratio, also known as the golden section, golden mean, or divine proportion, in mathematics, the irrational number (1 + Square root of √ 5 )/2, often denoted by the Greek letter ϕ or τ, which is approximately equal to 1.618. It is the ratio of a line segment cut into two pieces of different lengths such that the ratio of the whole segment to that of the longer segment is equal to the ratio of the longer segment to the shorter segment. The origin of this number can be traced back to Euclid, who mentions it as the “extreme and mean ratio” in the Elements. In terms of present day algebra, letting the length of the shorter segment be one unit and the length of the longer segment be x units gives rise to the equation (x + 1)/x = x/1; this may be rearranged to form the quadratic equation x 2 – x – 1 = 0, for which the positive solution is x = (1 + Square root of √ 5 )/2, the golden ratio.

The ancient Greeks recognized this “dividing” or “sectioning” property, a phrase that was ultimately shortened to simply “the section.” It was more than 2,000 years later that both “ratio” and “section” were designated as “golden” by German mathematician Martin Ohm in 1835. The Greeks also had observed that the golden ratio provided the most aesthetically pleasing proportion of sides of a rectangle, a notion that was enhanced during the Renaissance by, for example, the work of the Italian polymath Leonardo da Vinci and the publication of De divina proportione (1509; Divine Proportion), written by the Italian mathematician Luca Pacioli and illustrated by Leonardo.

The golden ratio occurs in many mathematical contexts. It is geometrically constructible by straightedge and compass, and it occurs in the investigation of the Archimedean and Platonic solids. It is the limit of the ratios of consecutive terms of the Fibonacci number sequence 1, 1, 2, 3, 5, 8, 13,…, in which each term beyond the second is the sum of the previous two, and it is also the value of the most basic of continued fractions, namely 1 + 1/(1 + 1/(1 + 1/(1 +⋯.

In modern mathematics, the golden ratio occurs in the description of fractals, figures that exhibit self-similarity and play an important role in the study of chaos and dynamical systems.

Golden Section

“Golden Section“, also known as the golden ratio, golden mean, or divine proportion, in mathematics, the irrational number (1 + √5)/2, often denoted by the Greek letters τ or ϕ, and approximately equal to 1.618 Britannica. This mathematical ratio of 1 to 1.618 (actually 1.6180339887498948482… ), is commonly found in nature. The use of the “Golden Ratio” has been widely associated with Architecture, Art, and most Design disciplines.

Golden Section common names

“Golden Ratio”, “divine proportion”, “golden mean”, “golden section”, “Fibonacci number” and “φ (phi)”

The use of the “Golden Ratio” in architecture

It is claimed that early important architectural monuments, were designed and built in accord with golden ratio rules (proportions), most notably the great pyramid of Giza, the Parthenon, Notre Dame church, the Taj Mahal, and last but not least the United Nations building in NYC by architect Le Corbusier. Whether the “Golden Ratio” was intentionally used in the creation of these early monuments, or whether it was simply good intuitive aesthetics that were put to use, is a subject for a long debate.

Divine proportions used in paintings

The Law of the Golden Section states that: “For a space divided into equal parts to be agreeable and aesthetic, between the smallest and largest parts there must be the same relationship as between this larger part and the whole space” Vitruvius (Born c. 80–70 BC, died after c. 15 BC)

Golden Ratio or as it has been coined “Divine Proportion” is closely associated with many works of art. Paintings by the old masters contain these so-called “Divine” proportions. Perhaps the most famous is Leonardo Da Vinci’s “Mona Lisa” and “The Vitruvian Man”.

Although artists are said to have used the golden mean in many parts of their painting details, the most striking perceptible visual effect is achieved when the overall dimensions of height to width is approximately 1:1.618. Following are some notable examples of paintings that have these dimensions. In all of them, the rectangles are within the “golden ratio” proportions.:

1) “The last super” – Leonardo Da Vinci
2) Parts of The Sistine chapel paintings – Michaelangelo
3) “The Dresden triptych” – Jan Van Eyck
4) “The Sacrament of the Last Supper” – Salvador Dalí
5) “Bathers at Asnières” – Georges Seurat.

When used in painting, the golden ratio is a composition strategy that is claimed to have the result of “a” or “the” most pleasing visual effect. The examples below show a painting that maintains Golden Ratio proportions, versus the resulting proportions of a digital camera photograph when the aspect ratio of 3:2 was selected. Digital camera users can choose 3:2 or 16:9 as an aspect ratio for their image captures. But, neither of the two is based on the Golden Ratio.

How to Use Golden Section Proportions In Your Designs

You are here:
Home / Blog / Web Design / How to Use Golden Section Proportions In Your Designs

“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.

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.

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

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.618 rather quickly.

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.

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.618. 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.

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:

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.

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.

Download a free sample from my book, Design Fundamentals.

20 comments

I just dropped by to say I really enjoyed this article.

For more then two years I was obsessed with the golden ratio. I implemented that ratio in almost every personal project I worked: web design, graphic design, my business card, various typography decisions etc. Know I’m in post “golden” phase that I’m trying to not over use the golden rule just for the “golden” occasion. But I definitely think that there is something magical about this rule. I wish that I had more time to make some serious research about The Golden Proportion.

P.S Thanks for the mention.

Thanks Vladimir. I like the golden ratio too, though I struggle sometimes to decide when and where it’s best to use. There is something about the proportions that does make it magical as you say.

It’s amazing how many examples of it there are in nature and through history. There’s definitely something about it.

A fascinating technical insight in to something I use all the time, I actually find it very difficult to break out of… I guess if the formula isn’t broken then why try to fix it…

Nope. Why fix it if it ain’t broken. 🙂

If you want to know everything there is about PHI and other golden sectional proportions this website: http://spirasolaris.ca/ is very helpful.

Thanks for the link Kristi. Looks like an interesting site.

This is fascinating stuff. I’ve heard of the golden ratio and the Fibonacci sequence but never knew of their importance in art and design. It makes sense now why so many blogs and websites follow the same standardized header/footer/body design.

It’s really amazing how much has been built using golden proportions. I knew it was used a lot in art and architecture, but I had no idea how many things in nature have golden proportions to them. There’s something about phi I guess.

Bit complex to understand but very useful 🙂

I tired keeping the math to a minimum. I’m glad you still found the post useful, complex or not. 🙂

Couple of places you referenced 1.1618. Shouldn’t that be 1.618?

Yep. It should have been 1.618. Nice catch. Thanks. I think I corrected them all now.

You should have a look at the Golden Ratio CSS Grid at http://golden-ratio-grid.impossible-exil.info :
The Golden Ration Css Grid is actually not a grid : it do not provides you columns and rows, but only widths and heights (and maxwidths and maxheights) to use on your own columns and rows, and those widths and heights are build following the Golden Ratio (phi).

Thanks. Your grid generator looks interesting.

Thank you for this great article with these nice examples. i liked the visualation of geometric constructions and the connection between golden section and pi.

Thanks Stephan. I like the geometric constructions too and wish I could take credit for them, but I found them on another site. The connection to PI and Fibonacci are both interesting. I have a thing for these kind of mathematical patterns.

Hey, thanks for the article. I found it while googling about uses of the golden ration in design so it was perfect.
I just wanted to say that some links are broken, I know this is an old post but other people might find it just like me so if you’re still running this blog (which seems like you are) I think it would be interesting to fix them.
Thank you again!

Thanks Calyane. I’m glad you liked the post. Thanks for letting me know about the links too. I hadn’t realized how many were broken. I just went through clicked them all and replaced some of the broken links with working ones and removed some that I couldn’t fix. I think the links are all working now. Thanks again.

Yes very easy to understand article. Thanks! You seem to be a gifted teacher. Doing a study in Genesis 1 and it is amazing how everything is so ordered and designed around us. What can I do but be in awe and submit to this astonishing Creator and Redeemer.

Thanks Jennifer. I’m glad you enjoyed the article and found it helpful.

Learning the golden ratio. I want to incorporate it in my cabin. I need the height and width in my floor plans. I’m going to figure out the math.

Golden Ratio

The golden ratio, which is often referred to as the golden mean, divine proportion, or golden section, is a special attribute, denoted by the symbol ϕ, and is approximately equal to 1.618. The study of many special formations can be done using special sequences like the Fibonacci sequence and attributes like the golden ratio.

This ratio is found in various arts, architecture, and designs. Many admirable pieces of architecture like The Great Pyramid of Egypt, Parthenon, have either been partially or completely designed to reflect the golden ratio in their structure. Great artists like Leonardo Da Vinci used the golden ratio in a few of his masterpieces and it was known as the «Divine Proportion» in the 1500s. Let us learn more about the golden ratio in this lesson.

What is the Golden Ratio?

The golden ratio, which is also referred to as the golden mean, divine proportion, or golden section, exists between two quantities if their ratio is equal to the ratio of their sum to the larger quantity between the two. With reference to this definition, if we divide a line into two parts, the parts will be in the golden ratio if:

The ratio of the length of the longer part, say «a» to the length of the shorter part, say «b» is equal to the ratio of their sum » (a + b)» to the longer length.

Refer to the following diagram for a better understanding of the above concept:

It is denoted using the Greek letter ϕ, pronounced as «phi». The approximate value of ϕ is equal to 1.61803398875. It finds application in geometry, art, architecture, and other areas. Thus, the following equation establishes the relationship for the calculation of golden ratio: ϕ = a/b = (a + b)/a = 1.61803398875. where a and b are the dimensions of two quantities and a is the larger among the two.

Golden Ratio Definition

When a line is divided into two parts, the long part that is divided by the short part is equal to the whole length divided by the long part is defined as the golden ratio. Mentioned below are the golden ratio in architecture and art examples.

There are many applications of the golden ratio in the field of architecture. Many architectural wonders like the Great Mosque of Kairouan have been built to reflect the golden ratio in their structure. Artists like Leonardo Da Vinci, Raphael, Sandro Botticelli, and Georges Seurat used this as an attribute in their artworks.

Golden Ratio Formula

The Golden ratio formula can be used to calculate the value of the golden ratio. The golden ratio equation is derived to find the general formula to calculate golden ratio.

The Golden Section / Golden Ratio

GoldenNumber.Net explores the appearance of Phi, 1.618 (also known as the Golden Ratio, Golden Mean, Golden Section or Divine Proportion, in mathematics, geometry, life and the universe and shows you how to apply it, and its applications are limitless:

The Golden Section is a ratio based on a the number Phi, 1.618…

The Golden Section or Ratio is is a ratio or proportion defined by the number Phi (= 1.618033988749895… )

It can be derived with a number of geometric constructions, each of which divides a line segment at the unique point where:

the ratio of the whole line (A) to the large segment (B)

the ratio of the large segment (B) to the small segment (C).

In other words, A is to B as B is to C.

This occurs only where A is 1.618 … times B and B is 1.618 … times C.

This ratio has been used by mankind for centuries

Its use may have started as early as with the Egyptians in the design of the pyramids,

The Greeks recognized it as “dividing a line in the extreme and mean ratio”	The Renaissance artists knew it as the Divine Proportion
and used it for beauty and balance in the design of architecture, perhaps as early as the Parthenon	and used it for beauty and balance in the design of art

It appears in the design of Notre Dame in Paris

and continues today in many examples of art, architecture and design.

It also appears in the physical proportions of the human body, movements in the stock market and many other aspects of life and the universe.

Dr. Stephen Marquardt has discovered a template for human beauty using the Golden Section, with obvious relevance in the plastic surgery industry. Marquardt’s analysis takes ethnicity into account, and illustrates variations that are are both numerous and subtle.

See the other sections and pages of this site listed above and to the right for a broad sampling of the many appearances and applications of the golden ratio.

Comments

NF Hannibal says

This is good stuff – I have been trying to find a good source to educate myself in the concepts of sacred geometry, looks like I have found it!

Get Robert Ludlow’s book “Sacred Geometry”. It’s a brilliant primer and workbook on the subject

petes farm says

there is a scematic of planets set in their pattern & as they revolve, the end pattern is in the form of a flower, same with some sea shells-wish I had the links

Instructive and interesting

vector louis says

The golden ratio is unique and amazing because I think it is somewhat like a snake biting its own tail which is part of the symbol of world in Taros. Euclid defined this ratio as follows: If we divide a line such that the ratio of the small portion to the large one is equal to the the ratio of the large portion to the whole line. I think it is like the snake and it represents the harmony and beauty of the multiverse which has no origin and ends.

i’m still don’t get it. why A : B = B : C? please help

A : B=B : C simply means that the ratio of length A (the entire line) to that of B (the longer segment) is the same ratio as that of length B to that of C (the shorter segment). It expresses mathematically the one and only way to divide a line so that its sections are in the same ratio to one another. The dividing point occurs at 0.618… of the line’s length, the reciprocal of 1.618… This results in ratios of A to B of 1.618:1 and B to C of 1.618:1 By contrast, if you cut a line in half, the ratio of the entire length to the sectioned pieces is 2:1 while the ratio of the pieces are 1:1. Cut it in thirds and the ratio A to B is 3:2 and B to C is 2:1. Only the golden ratio pf 1.618 results in the same ratio for all the segments.