Laura Diane Hamilton

Technical Product Manager at Groupon

Resumé

The Golden Ratio and Typography

This post is inspired by the talk that Nick Meccia gave yesterday at Refresh.

In his talk, Nick explained how to use mathematics to inform typography choices.


Modular Scale

When designing a website, you'll want to use a variety of different font sizes in order to establish hierarchy within your document. <h1>, for example, should be quite large. <h2> should be smaller, and then the should be smaller still—a normal text size.

It's good practice to use what's known as a modular scale to determine the font sizes for various text elements.

The basic idea is that the font sizes form a geometric series that increases by a factor of between 1.2 and 2.0 from one font size to the next.

The advantage of using a geometric series (as opposed to an arithmetic series) is that each size up is a constant factor size increase. There's a clear hierarchy, and the sizes are different from each other in a uniform way.

For example, if I were to use a modular scale with a ratio of 1.5—a solid choice—my font sizes would be as follows: 16px, 24px, 36px, 54px


The Golden Ratio

In mathematics there is a constant known as phi (Φ), which represents the golden ratio. Φ is an irrational number that is approximately equal to 1.618.

Φ has a number of interesting mathematical properties. In particular, consider adjacent line segments a and b, where the ratio of a:b is the golden ratio. For example, let's say line segment b is 1" and line segment a is 1.618". Then the entire line segment (a+b) will be 2.618", which is 1.618 times as long as segment a.

In other words, there is a natural sort of completeness inherent in objects designed with the golden ratio.

There is something inherently orderly and beautiful about the golden ratio. Take a look at the Fibonacci spiral below—it's perfectly proportioned and calming:

The golden ratio is frequently used in architecture. For example, many of the proportions of the Parthenon exhibit the golden ratio.

The golden ratio is also found frequently in nature. This drawing of a man's body in a pentagram indicates that bodily proportions exhibit the golden ratio.

Because the golden ratio is found so often in nature—and it has this beautiful sort of mathematical completenes—it is a satisfying choice as a modular scale typography ratio.

If you use the golden ratio to build your geometric series, your website will have a natural sort of completeness.

Here is an example of a golden-ratio based typography size progression, starting with a 16px base font: 16px, 25.9px, 41.9px, 67.8px

You can use this handy modular scale calculator to calculate different font sizes both in pixels and in ems.

You should also check out Nick's post on the subject, "Designing Irrationally".

Update: There is some debate about whether the Parthenon actually uses the golden ratio.

Lauradhamilton.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.