What Is the Golden Ratio?

The golden ratio (≈ 1.618) is a mathematical ratio found in nature, art, and design.

• It's often symbolized by the Greek letter φ (phi).

• When one quantity is divided by another smaller one, and the ratio between them is the same as the ratio of their sum to the larger one — that's the golden ratio.

Golden Rectangle

A golden rectangle is a rectangle whose side lengths are in the golden ratio.

• This shape is considered extremely aesthetically pleasing.

• It forms the basis of the golden spiral.

Using the Golden Ratio in UI Design

Want to apply it to your interface design? Here’s how:

Font Sizing and Hierarchy

Use the golden ratio to create a natural text hierarchy:

• Start with your base body text size.

• Multiply by 1.618 to get your subheading size.

• Multiply again for your headline.

Alternatively:

• Divide your largest text size by 1.618 repeatedly until you get all levels — headline, subheading, body.

Example:
32px (heading) → 19.8px (subheading) → 12.2px (body)

Other Typography Standards

Many designers also size fonts using:

• Multiples of 4 or 8 (e.g. 12, 16, 24, 32)

• These systems are easier to scale and align visually in grid-based designs.

Downside of the Golden Ratio

While elegant, the golden ratio isn’t always practical:

• It often gives you decimal values for sizes.

• You’ll need to decide whether to round up or down based on your layout and platform needs.