Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Golden ratio, with or without padding/margin?

Tags:

css

grid

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.

like image 252
Satish Gandham Avatar asked Jun 21 '11 13:06

Satish Gandham


People also ask

Is it better to use padding or margin?

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).

How do you design the golden ratio?

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!

How do you use the golden ratio in typography?

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.

What is the difference between padding margin and borders?

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.


1 Answers

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/

like image 70
Matteo Mosca Avatar answered Nov 15 '22 01:11

Matteo Mosca