## Since ancient times the golden ratio (also referred to as the divine proportion, the golden mean, or the golden rectangle) has been used to create designs which are aesthetically pleasing.

The golden ratio is a visual representation of the number phi (1.618033988749895), and can be seen in ancient architectural design such as the Parthenon, and many works created by artists and architects during the Renaissance.

### The Rule of Thirds

“The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.”

– Wikipedia

In web design, the golden ratio and the rule of thirds can be used to create websites that adhere to these values and are aesthetically pleasing as a result. The golden ratio can also be used to determine a baseline for typography. For example, on this site the body font size is 16px, so the line height is 26px (16 x 1.618 = 25.888).

### Examples

*Images by gold3nratio.tumblr.com*

### Resources

- The Golden Grid

CSS Grid system based on the golden ratio and the rule of thirds. - Common ratios for images and videos

Used to determine aesthetically pleasing ratios for displaying media. - Scale Tool

Calculate the best proportions for an element using the golden ratio. - Phi Calculator

Useful when deciding on a line height or font-size in typography.

### Further Reading

- http://en.wikipedia.org/wiki/Golden_ratio
- http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design/
- http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/
- http://webdesign.about.com/od/webdesignbasics/a/aa071607.htm
- http://www.vcarrer.com/2009/02/golden-grid.html