Golden Ratio Instant Calculator

In mathematics and the arts, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one.



Expressed algebraically:

The golden ratio is often denoted by the Greek letter phi, usually lower case (φ).

This equation has as its unique positive solution the algebraic irrational number:



At least since the Renaissance, many artists and architects have proportioned their works to approximate the goldenratio—especially in the form of the golden rectangle, in which the ratio of the longer side to the shorter is the golden ratio—believing this proportion to be aesthetically pleasing.



I use the golden ratio whenever I design webpages to make them more visually appealling. For example, this column of text and images is 600 pixels wide. If I wanted to place a table here that was two cells wide, I could use the Golden Ratio Instant Calculator at the top of this page to figure out what widths and heights the table cells should be. First, I change the "Starting Value" at the top of this page to 600, and check the "Round to Integer" option since we are working with pixels. Then on the right you'll see the numbers: 600, 371, 229, 142, etc. By definition of the golden ratio, the numbers 229 and 371 will add up to 600, so these can be the widths of the two cells, and we can make the hieght of the whole table 142 pixels. This will create a visually pleasing table that looks like this...

width: 229px height: 142px

width: 371px height: 142px

If I don't have a starting value to work with, often I'll just use numbers from the Fibonacci sequence. The mathematics of the golden ratio and of the Fibonacci sequence are intimately interconnected. The Fibonacci sequence is:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, ...

By definition, the first two Fibonacci numbers are 0 and 1, and each subsequent number is the sum of the previous two. As the sequence approaches infinity, the ratio between the last two numbers approaches the golden ratio:



Since the smallest value you can get in webpage design is 1 pixel, it makes sense to use numbers from the Fibonacci sequence, since they are the closest you can get to completely golden ratio design. If you set the "Starting Value" at the top of this page to 1 and check the "Round to Integer" option, you'll see the Fibonacci sequence playing out down the Increasing column. You can change the number of iterations shown to see it out further.

Here is one of my company logos I designed using the Fibonacci sequence...
Try it yourself and discover the beauty.