Golden Ratio in modern CSS

Some general layout thoughts

The styling of a website is not just the looks, it is much more than that. It is the thing that makes the visitor feel comfortable, the thing that will make him subconsciously love it, make him feel like home.

Perfect design is the one that is subtle and helps the visitor use the website and not just admire it.

Let’s see for example a news site. Visitor should not spend time looking your delicious gradients and your sexy rounded corners on every element. He should spend him precious web-time reading the valuable content. We must help him find as fast as possible what he is looking for. Help him read as many articles as possible. Make him stay more. Transform the first time visitor, into a loyal fan.

To achieve all these we must offer harmony and uniformity in every element of our page, even in the small and less important. The summary of is going to give us the desirable result.

Harmony. A word that sounds so beautiful, like its own meaning. But how is it possible to achieve it in every place of our layout design? “Golden Ratio” is the answer.

But what is exactly the "Golden Ratio". Let’s see how wikipedia explains it perfectly: In mathematics and the arts, two quantities are in the golden ratio if the ratio between the sum of those quantities and the larger one is the same as the ratio between the larger one and the smaller. The golden ratio is a mathematical constant, approximately 1.6180339887

The use of this analogy should be catholic in a site, in order to get the absolute harmony.

Making the ratio work for us

So let’s see some way we can use it in our layout.

At first we must begin with our basic containers. In a simple example we can apply the analogy into the only divided container is the content (main and sidebar). Because we cannot play with the height of these elements, we have to focus only in the width.

Let’s say for example that our page width is 960 pixels and we want to divide this using the golden ratio. Our main-content will be 960 / 1.62 = 593 pixels and our sidebar 960 - 593 = 367 pixels.

Now that we found the analogy of our basic columns, it’s time for the basic typography. My proposal for some relationships:

• line-height = font-size * 1.62
• paragraph margin = paragraph line-height * 1.62 / 2
• header’s margin-top = headers line-height * 1.62

Having this logic in mind we can solve any sizes or analogies problem that comes along.

Another example is inside the form elements, where the input width = label width * 1.62

The same ratio can be present in any rectangle which we want to be "perfect". Its width = height * 1.62