The Golden Ratio
I remember first hearing about the golden ratio in high school geometry class, when I didn’t pay attention. So I had to learn it again. It turns out that there are certain proportions that are more attractive to the eye, perhaps because we see them in nature, perhaps because we see them in human creations. Knowing about these proportions can help us design an attractive Web site. The golden ratio is perhaps the most important of these rules of thumb.
This figure is used in Wikipedia’s definition of the golden ratio. In the figure, a and b are related in the golden ratio when the ratio of a to b is the same as the ratio of a + b to a.
This works out to a ratio of 1.618…. It’s an irrational number that has no exact decimal representation.
However, what all this means is that the shorter side is just under 2/3 as long as the longer side.
There’s been a lot of research that the golden ratio occurs in many places in nature. Adolf Zeising found the golden ratio in the arrangement of leaves and branches along the stems of plants. He went on to discover the golden ratio in other areas such as the geometry of crystals. He went on to decide that the golden ratio was some sort of universal law that permeates all structures. We don’t have to accept Zeising’s law, though, to observe the golden ratio in nature.
The golden ratio is commonly used in the design of our buildings and everyday items. The shapes of postcards, playing cards, light switch plates and many other common objects have these proportions. Le Corbusier, the famous Swiss architect, centered his designs on harmony and proportion. For him, the golden ratio was a guiding principle. His Modulor system was based on the golden ratio. We also know that we see the golden ratio applied commonly in architecture that we see every day.
What This Means to Us
What does this mean for a Web site? It’s clear that rectangles with the short side about 2/3 as long as the long side are at least thought by many to be the most appealing form. The most evident way to apply this is for graphics on a site. For either vertical or horizontal layouts, make the shorter side about 2/3 as long as the longer site. This is a proportion that your readers will find comfortable, and they’ll be more comfortable with your message as a result.
It also applies to text on the Web. A good maximum vertical height for a paragraph is about 2/3 of the width of a line of text. If it’s longer than this, it’ll have a less pleasant appearance and it’ll be less likely to be read. In addition to providing a good appearance, this breaks your text into bite-sized pieces that are easier and more likely to be read.
The Bottom Line
Pay attention to the golden ratio for imagery, video display areas and text areas of your site.