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

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.

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.

### 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 }

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.