posted on:November 6, 2008
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
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
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
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
The point is to try thinking of the 62% 38% analogy for
everything we need to divide.
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.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (16 Comments)
Sorry, the comment form is closed at this time.