The Golden Ratio: Harmony That Feels Right — and Works Responsively

A guiding mathematical principle

The Golden Ratio (1:1.618) has been a guiding mathematical principle for artists throughout history. Dating back to ancient Greek mathematician called Euclid, it’s influence can be seen in many famous pieces of art. Examples include: The Parthenon, The Great Pyramid of Giza, Da Vinci’s ‘Vitruvian Man’, the Mona Lisa, the Notre Dame, and modern architecture such as Le Corbusier’s Modulor System.

The golden ratio’s appeal comes from its balance of asymmetry and harmony, which often results in compositions that feel natural and aesthetically pleasing to the human eye. So, it’s only natural that in modern web design, it guides how we structure layouts, scale elements, and balance composition.

Examples of the golden ratio in popular modern websites: www.apple.com, www.nytimes.com, open.spotify.com, www.nationalgeographic.com.

"...beautiful math"

You can see that these websites have: balanced white space according to the golden ratio so the page doesn’t feel cluttered; the typography is pleasing to the eye because font sizes and line heights often reflect the 1:1.618 ratio for easier reading; Images and accompanying text or CTAs are sized harmoniously; and, columns and rows often respect golden ratio proportions to build a natural flow.

But even this beautiful math must bend to real-world legibility and responsive needs.

Keyboard users must have a meaningful sequence in the content order, buttons need to stay large enough and have visible focus indicators regardless of proportions, and watch out for excessive page lengths, where users may feel disoriented.

Finally, the most innovative websites today use scroll animation responsibly to elevate the journey, apply the Golden Ratio for a natural rhythm that feels human, and embrace white space that breathes — while complying with WCAG 2.1 guidelines for spacing and readability. This intersection of aesthetics and accessibility isn’t just good design — it’s great UX. It tells users: this space was built with you in mind.

Head over to 'Part I: Scroll Animations, the Golden Ratio, White Space — and the Accessibility That Makes It Work', to read about the trend for scroll animations. Or, 'Part III:White Space: Not Just Stylish — Necessary' for a deeper look at Apple's famously clean aesthetic!