Making a grid is the basis for any great design, is a way of organizing content on a page, using any combination of margins, and guides.

There are different methods and proportions, the golden ratio it is probably the most famous and used in art; we will study it´s history and how to apply Golden Ratio in Design.

What is the Golden Ratio

At least since the Renaissance, many artists and architects have proportioned their works to approximate the golden ratio, 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.

golden ratio formula

Mathematicians have studied the golden ratio because of its unique and interesting properties.

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. The golden ratio is an irrational mathematical constant, approximately:


Construction of the Golden Rectangle

  • A golden rectangle can be constructed with only straightedge and compass by this technique:
  • Construct a simple square
  • Draw a line from the midpoint of one side of the square to an opposite corner
  • Use that line as the radius to draw an arc that defines the height of the rectangle
  • Complete the golden rectangle

calculating Golden ratio


The golden ratio has fascinated Western intellectuals of diverse interests for at least 2,400 years. Ancient Greek mathematicians first studied what we now call the golden ratio because of its frequent appearance in geometry. Some studies of the Acropolis, including the Parthenon, conclude that many of its proportions approximate the golden ratio. The Parthenon’s facade as well as elements of its facade and elsewhere are said to be circumscribed by golden rectangles

Golden Ratio in Design

The modern history of the golden ratio starts with Luca Pacioli‘s Divina Proportione of 1509, which captured the imagination of artists, architects, scientists, and mystics with the properties, mathematical and otherwise, of the golden ratio.

Salvador Dalí explicitly used the golden ratio in his masterpiece, The Sacrament of the Last Supper. The dimensions of the canvas are a golden rectangle. A huge dodecahedron, with edges in golden ratio to one another, is suspended above and behind Jesus and dominates the composition.

Golden ratio in painting

In 2003 Weiss and Weiss came on a background of psychometric data and theoretical considerations to the conclusion that the golden ratio underlies the clock cycle of brain waves.[76] In 2008 this was empirically confirmed by a group of neurobiologists.[77]

In 2010 the journal Science reported that the golden ratio is present at the atomic scale in the magnetic resonance of spins in cobalt niobate atom

Golden Ratio in Design


Note how every dimensions of each letter of this logo is apparently based on proportions of phi (first golden ratio) or phi squared (second golden ratio):

Golden Ratio in Design

Credit Cards

A credit card is the perfect example of a golden rectangle illustrating the proportions of the golden section. Standard sized credit cards are 54mm by 86mm, creating a ratio of 0.628, less than a millimeter off from a perfect golden section of 0.618, the reciprocal of 1.618.

Golden Ratio in Design

Maybe when the firs cards were made the designers never though of the golden ratio, and the size could be simply explained in that we humans tend to perceive dimensions that are based on the golden ratio as esthetically pleasing.

A card size that looked pleasing may have been chosen from others , and we found it pleasing because it was close to the golden ratio.

How to apply Golden ratio in Design

Let us use as example the ratio for the header of a web page. As a basis we will use a document of 1024 x 768 pixels.

We multiply the height by .618

768 x .618 = 474.624

That will be our measure for the content. The difference (293.38) will be the measure of our header.

In Web design is more difficult to implement because of the difference in the resolutions of the users monitors, but you can use it to design boards, Magazine advertisements, etc.


There are a few tools across the Internet that does a good job of finding the golden ratio


Previous post

"Vida & Estilo" Redesigning your website

Next post

The Contrast: support of the form, figure ground tension and relationship

The Author

Javier Cantero

Javier Cantero