Menu
Lets say I have 1000 px wide 2 column layout with 100 px gutter space (margin) and 50px on the left and right.. How do I apply the golden ratio to this layout?
Method One
c1+c2=800px;
c1/c2=1.618;
=>c1= 495px and c2= 305px
50px, column 1 (495px), 100px, column 2 (305px), 50px
Method two calculate the column widths ignoring the margins.
c1+c2=1000px
c1/c2=1.618
=>c1= 618px c2=392px
effective column width after adding the margins/paddings
c1=618px -100px = 518px
c2=392px -100px = 292px
50px, column 1 (51), 100px, column 2 (305px), 50px
% difference in two methods 518-495/518= 4%
The 4% difference would not make any any difference, but the % difference will be more when dealing with narrow layouts.
If you see this article, http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/
In the first example they took padding out of the golden ratio, and in the other they made padding part of the GR.
Can someone please suggest which method is better.
I'm developing this layout for a customizable wordpress theme, I'm providing an option to pick fluid layout. I cannot use the first method with golden ratio ( Can I ?? ).
Can I use method 2 without losing the harmony that GR brings to the design.
Please include the links and ref supporting your answer.
PS: I posted this question in graphic design section before, I was suggested to post it here. I hope I'm not violating any rules.
252
In general, use margins when you're adjusting the spacing of an element in relation to another element (i.e a div in relation to another div on the page), and padding when you're adjusting the look of an individual element (i.e the amount of pixels between the edge of a div and the text within it).
One very simple way to apply the Golden Ratio is to set your dimensions to 1:1.618.> For example, take your typical 960-pixel width layout and divide it by 1.618. You'll get 594, which will be the height of the layout. Now, break that layout into two columns using the Golden Ratio and voila!
Typography and defining hierarchy Let's say your body copy is 12px. If you multiply 12 by 1.618, you'll get 19.416, meaning a header text size of 19px or 20px would follow the Golden Ratio and balance the 12px body font size. If you want to figure out how big your body text size should be, you could do the opposite.
Padding - The inner space between the content and the border of your box. Border - The perimeter of the box. Borders can be invisible or they could be a thick colored line like the green one pictured above. Margin - The outer space (or lack of space) surrounding the box.
I can point you to this marvellous article about the golden ratio:
http://www.alistapart.com/articles/more-meaningful-typography/
It also contains a link to a useful tool to calculate numbers based on golden ratio and another couple of ratios. Here's the link for convenience:
http://modularscale.com/
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
