Proportional systems are based on ratios and have been used for centuries in architecture and art. The golden ratio was first mentioned as early as about 500 BC by Phidias, Plato, and then Euclid. It is fair to assume that this ratio has been discovered several times throughout history — hence its many names, including golden mean, golden ratio, golden section, divine proportion (coined by Leonardo Da Vinci) and the Greek symbol φ.  A study by Giacomo Rizzolatti and Cinzia Di Dio suggests that human brains are hard-wired to prefer human bodies with proportions in the golden ratio. In the study, participants with no background in art, were shown an original image and distorted versions of a statue. The original statue’s proportions reflected the golden ratio. The original image strongly activated sets of brain cells that the distorted images did not, suggesting beauty is partly an innate quality.

The golden ratio has been used to analyze quantities found in nature, architecture, painting, and music. When used, it is often assumed to create an organic, balanced, and aesthetically pleasing composition, thought to be favored by the human eye.

Examples of buildings and works of art that have proportions in the golden ratio range from the pyramids in Giza, the Parthenon in Athens, and Da Vinci’s Mona Lisa.

The Golden Rectangle and Spiral 

The golden rectangle is simply a rectangle whose sides are in the proportion of the golden ratio.

The golden rectangle has an interesting property: if you divide it into a square with the side equal to the rectangle’s shorter dimension and another rectangle (like in the image below), it turns out that the smaller rectangle is a golden rectangle as well. (This property is immediately derived from the golden-ratio property described in the previous section.)

You can repeat the process indefinitely by dividing each golden rectangle into a square and another golden rectangle. The result will be a golden spiral — obtained by connecting the opposite corners of each of the squares.

The golden spiral is found within many naturally occurring elements such as plants and in weather patterns like hurricanes.

Text Sizes

Different font sizes can be in a golden ratio. Let’s say the body-font size on your website is 16px. The header-font size could be a golden-ratio multiple of your body size — that is, it could be 16 φ = 16 x 1.618 = 25.88 or roughly 26px. 

Some also use the golden ratio to determine the line height needed for a particular font size to be in a golden ratio. (The line height is the font height plus the white space between lines of text — it basically governs how tightly arranged the lines of text are in a paragraph.) For example, if you had a font size of 16px for your body copy, the line height could be 16 φ = 16 x 1.618 = 25.88 or, again, roughly 26px.