The Golden Rectangle, which is based on the Golden Ratio, is considered to be the most beautiful shape in the world. This is so for a reason. Many forms in nature follow the Golden Ratio, from the proportions of the human face, to the branches of trees, the patterns of sunflower seeds, or the cross sections of sea shells. The Golden Ratio is found in ancient architecture and design from the Parthenon to Zen gardens.

The Golden Ratio is expressed mathematically as (a+b)/a = a/b = φ. This simple mathematical statement is marvelously elegant. It simply says that the sum of parts a and b are to the larger part a, what a itself is to the smaller part b. Now, if a and b are taken to be quadrilaterals, the presence of two dimensions produces a curious phenomenon: the proportions of the rectangle b are identical to the proportions of the rectangle (a+b). This is known as the Golden Rectangle, and it is a Fibonacci series. It’s recursive. Therefore b is also a Golden Rectangle, and can be divided into c and d, where (c+d)/c=c/d. And so on and so forth, ad infinitum. And therein we find the elegant spiral of the nautilus, the radiating pattern of the seeds of a sunflower, the rings of Saturn, a butterfly’s wing, or as Leonardo Da Vinci’s Vetruvian Man illustrates, the shape of the human body (some adhering a little more closely to the Golden Ratio than others, I hasten to add).

On to another canon of page design. There was a design sometimes known as “the Secret Canon” that was used in many medieval incunabula. It was used by Gutenburg, for example, and features margins of 1/9, 2/9 and a text area of the same proportions as the page.

There are a number of more (relatively) modern interpretations of how this ancient and beautiful layout were acheived, one of the more common being the Van de Graaf Canon, seen here.

The dark lines have been used to reconstruct the proportions of the Secret Canon. Here is an interesting challenge: see if you can determine in which order these diagonal lines had to be drawn in order to come up with the red text boundary. It’s a great exercise to go through; it will make you start thinking like a page designer.

Notice how the red rectangular text area is the same proportion as the page itself (only smaller). Also notice the left and right magins, being 2/9 and 1/9 respectively for the left page, and how the left and right page together form a center margin of 1/9 + 1/9 = 2/9, equal to the outside edges.

There are a number of other canons for page design, many approximating the Golden Ratio or it’s convergents.

Tschichold’s Interpretation of the Golden Canon

Raul Rosarivo’s Interpretation of the Golden Canon compared with Tschichold’s Golden Canon.

*why*the margin is the width it is. If you can’t find any logical reason why a margin has it’s particular width, consider it a mistake. It

*should*be that particular width because it forms part of a repeating pattern or adheres to a discernible ratio.

Eventually somebody is going to come along and write a book on Canons of Digital Page Design. That person is not going to be me. So until that book comes out, I hope this article was interesting for you and will give you some ideas next time you have to shoot a photo, hang some paintings on a wall, dig a flowerbed, or design a web page. Good luck and have fun!