Proportion

by Zack on May 18, 2009

Proportion

Everything on the screen is relative. Elements looks big only when it is next to smaller elements. Your headings are big because they are bigger than your text. It is all about proportion.

golden_spiral

The most common proportion in design is the golden ratio. You might remember that from grade school as the Fibonacci number sequence. Each number is derived by adding the previous two numbers. The ratio is about 1 to 1.61.

You can express this ratio using growing rectangles or a spiral. The classic example from nature is a nautilus shell. This ratio is used to determine the ratio of width to height in design, architecture and all over nature.

Font sizes

If you are designing a website this ratio often comes up when picking font sizes. Typographers from 400 years ago created a standardized set of font sizes influenced by the golden ratio and we are using them today.

6  7  8  9  10  11  12  14  16  18  21  24  36  48  60  72

Fonts sizes chosen from this list are pleasing to the eye. They relate to each other well. For example, a 12 point font with an 18 point headers works nicely.

36 point level one heading

21 point level two heading

18 point level three heading

14 point text.

Section Sizes

You can also apply the golden ration to section sizes. Pages with a 300 pixel wide navigation bar and a 500 pixel wide content area can work well. The two section work together with a clear center focus and no competition.

golden_ratio

Further Reading

Want to know more about proportion and the golden ration? Check out Jason Santa Maria’s article What’s Golden.

{ 1 comment… read it below or add one }

Robb May 28, 2009 at 10:56 am

In my own design work I enjoy using multiples of 12 because they scale to other sizes well (dividing evenly by 2, 3, 4, or 6). I notice that many of the type sizes in the Golden Ratio either evenly divide 12 or are multiples of 12.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: