written on:6 Nov, 2008 by Christos Chiotis

Golden Ratio in modern CSS

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

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.

Golden ratio in layout

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

Golden ratio in typography

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

In conclusion

Many people will argue, that this technic is an utopia and we cannot spend time coding next to our calculator, when we try to catch up our deadlines, but that’s NOT the point of this article.
The point is to try thinking of the 62% 38% analogy for everything we need to divide.

Extra information

When we want to divide a quantity into three parts, we divide it firstly in two (62% - 38%) parts and then we take the bigger and divide it into two parts again with the same analogy.

About the author:

crs's image Born in 1982 in Athens, Greece, I am a web designer who enjoys searching for the one true layout, converting my fantasies into illustration and play with css and wordpress while drinking greek coffee. After working for more than a year in a small web-design office as a layout designer, I moved on to Sentel technologies where i started as web designer and after 3 and half years I became design director. Huge fan of Top Gear Show and James May (aka Captain Slow)

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Read more! Here are our most recent articles:

View All Articles

Comments

  1. Darice de Cuba on 6 Nov, 2008 wrote:

    Excellent concept... I learned about the Golden Ratio(Phi) when I read The Da Vinci Code. It never occured to try make a layout/design using theg olden ratio. I have to give it a try sometime see how it turns out.

  2. yvonh on 6 Nov, 2008 wrote:

    Hello, nice article.
    Nicer is that we make the same typo mistake "ration" instead of "ratio". I make it all the time :-)

  3. crs on 6 Nov, 2008 wrote:

    Nice catch Yvonh! It's true! I make this mistake a couple of times.
    Thank you both for your comments :)

  4. cssglobe on 6 Nov, 2008 wrote:

    Fixed! Thanks for the heads up yvonh! Also thanks to Christos for great article.:)

  5. Dan Lee on 6 Nov, 2008 wrote:

    I feel as though this article on the golden ratio could have been more in depth. There is a lot to the golden ratio, including many of its different and useful aspects such as the golden triangle or even the Fibonacci Number when relating, for instance, the large box of the content to the location of the smaller boxes within the sidebars or navigation.

    This was a great subject, something that is taught and demonstrated across many forms of media\art. No disrespect but I feel you barely scraped the surface of this great tool. Perhaps some follow up with more detail and usage for web designers would really help.

    A simple google search is all it takes for those more interested in the uses of the golden ratio in relation to design in general.

  6. crs on 7 Nov, 2008 wrote:

    Thank you Dan for your proposals. Of course i barely scraped the surface, but i think it's a beginning. I wanted to give people the general idea of dividing dimensions.
    Now definitely there should be an article paying more attention to layout, especially with the use of the square sequence from the Fibonacci spiral.

  7. Online hry zdarma on 9 Nov, 2008 wrote:

    960px ?

  8. Emil Milanov on 14 Nov, 2008 wrote:

    Great article Greek brother :)
    I'm personally addict of grids and numbers, and also use 960px for layout width.

    Cheers!

  9. Raymond Selda on 2 Dec, 2008 wrote:

    Nice article. I use Atrise when I'm designing in Photoshop. They have lots of options for different grids including the Golden Ratio.

    http://www.atrise.com/golden-section/

  10. phil on 7 Dec, 2008 wrote:

    I found this earlier this year

    http://www.thismanslife.co.uk/main.asp?contentid=phiculator

    I like the theory behind the
    idea - but havn't yet properly used it

  11. Marek on 6 Jan, 2009 wrote:

    I will try this on my layouts. THX!

  12. Chris on 22 Jan, 2009 wrote:

    A great article! I got totally turned onto the golden ratio after reading about it Richard Bringhursts "The Elements of Typographic style". However this statement made me smile: "The golden ratio is a mathematical constant, approximately 1.6180339887". There's nothing approximate about that value, 1.618 might be considered approximate. The value you quote is extremely precise.

  13. Mustafa on 17 Feb, 2009 wrote:

    While you drinking "greek coffee" ? There is nothing called greek coffee. It is orginally Turkish Coffee.

  14. Adamn on 19 Apr, 2009 wrote:

    Nice article i too made the mistakes some times :P

  15. Marcello on 16 May, 2009 wrote:

    Loved this article... and it looks like I'm not the only one. Take a look a this article "by" a certain Lauryin: she made a very good copy/paste.

    http://www.italianwebdesign.it/progettazione-la-golden-ratio-o-sezione-aurea/

  16. Marcello on 18 May, 2009 wrote:

    uuuppss... I have to apologize, sorry about my previous comment, I didn't notice the disclaimer in that page. Really sorry.

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Subscribe to CSSG Feed

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend