The Golden Ratio – A Basic Intro And A Pedantic Question

It’s cool to know that when you put together a web page design you’re still using inspiration from two and half millennia ago. Yes, that blog you’re coding is drawing on the principles that went into the design of the Parthenon, principles of Euclidean geometry. Automatically makes you feel smarter just to hear that, doesn’t it? I’m talking about the “golden ratio ”, used by artists and architectures for centuries to define the dimensional relationships of their work.

Many people probably first heard of the golden ratio in Dan Brown’s faux cerebral Da Vinci Code. It’s noted there as 1.618 / 1. That’s a slightly simplified version, like saying Pi is simply 3.14, but close enough (like Pi, you can go on indefinitely with your decimals). From a design standpoint, simply put, things look naturally good if their dimensional ratio are close to this – e.g. a rectangle that’s 1.618 metres long and 1 metre wide.

Easy Web Implementation

The most obvious way to implement the golden ratio in web design is when you have a two column layout for a website. You have your main column and your sidebar. So why not use the golden ratio to determine the widths of each section? Easily done in any fixed width design. I prefer fixed width as a designer (an entirely subjective choice, the fixed vs fluid argument will run forever), so I utilize the golden ratio regularly.

It works like this. I’m designing a size that’s going to be 960 pixels wide, with a main column and a sidebar. So I head off to one of those wonderfully useful pages you find on the web sometimes, goldenratiocalculator.com. I enter 960 as my width, and the calculator tells me that my sidebar should be 367 pixels wide, and my main content should be 593 pixels wide. Quickly and easily I’ve got a solid aesthetic basis for my site.

You can extend the use of the golden ratio far more widely. You can use it for line-height vs font-size for example, for margins of headers, for input boxes vs label width in forms. Clearly it’s not the only design choice you ever need make, but it’s proven over millennia to be a great one.

Overly Pedantic Question

This is one for the designers out there. Do you add margins before or after you calculate the golden ratio for your columns?

If we just made our sidebar 367 pixels wide and the main content 593 pixels wide there’d be no margin. The text in the sidebar would run up against the content without a gap. And it’s always been clear that good margins and white space in general can really improve the visual impact of a web design. So we’re going to need margins.

Let’s say we’re going to have a 30 pixel margin between our sidebar and our main content. If we’ve already made the golden ratio division, that means subtracting 15 pixels each from the width of our two columns. So the sidebar is 352 pixels wide and the main content is 578 pixels.

Except that isn’t the golden ratio any more. It’s pretty close, but it’s not exact. Of course, we could just say “screw it”, because the difference is minimal, but sometimes I like to be pedantic. As display screens and resolutions get larger, the importance of an accurate reflection of the golden ration might get more important in any case.

I tend to assume that the margin is outside of the scope of the golden ratio. I know that I’m going to have a margin of 30 pixels out of a total width of 960 pixels. That means I need to work out my golden ratio on the basis of 930 and not 960. That gives me a sidebar width of 355 pixels and a content width of 575 pixels. OK, we’re talking about a 3 pixel difference here, barely noticeable, but still.

Anyone else have a preference on this one way or another? Or is it too anal to even care about it?!