running words around
design education and visual communication
authored by chris m hughes

A Blast of Canons

Tuesday, 30 November 2010

When it comes to gravity, the predictions made by Newton are known to be inaccurate, but they are sufficiently good approximations in most circumstances that classical mechanics is widely used instead of general relativity.

The same goes for certain aspects of graphic design, particularly when it comes to page layout.

Modern page layout techniques, and the software tools used to create them, are based around the ISO 216 sizings and the grid.

The grid was popularised by the Swiss typographers during the 1950's, and is the basis for contemporary print and web layout. So it's no surprise that it is central to the teaching curriculum in design schools.

But in the manner of classical mechanics, we are also obliged to investigate older ideas, and this means introducing students to the Canons of page construction.

These principles describe how (regardless of page size) the proportions, margins and type areas of books can be constructed based on a set of geometric ratios, rather than the exact measurements of vertical and horizontal guides in the grid.

Jan Tschichold popularised the notion of canons, which he termed 'laws of form', and was heavily influenced by the ideas of J. A. van de Graaf.

Van De Graaf Canon
The Van de Graaf canon is used to divide a page into pleasing proportions, and was used in medieval manuscripts and incunabula.

The canon works for any page width:height ratio, and enables the book designer to position the text body in a specific area of the page. The page proportions vary, but the most commonly used is the 2:3 proportion - a close approximation to the 'golden ratio'. The result is that the height of the text area equals the page width.

You can test this by grabbing a novel off the bookshelf and measuring the height of the text box and comparing it with the width of the page. For certain formats (specifically symmetrical page layouts), the rule holds, and these books are often the most pleasing to open and look at (typeface and content not withstanding).

A 'Van De Graaf diagram' is used to show the canon works:

Van De Graaf Diagram

The red rectangular text area is the same proportion as the page itself. The left and right margins are 2/9 and 1/9 respectively for the rectro (left) page, and are mirrored in the verso (right) page. Together, the inner margins form a centre margin of 1/9 + 1/9 = 2/9, equal to the outside edges. The actual text area is 6/9 of the page - a ratio of 2:3.

This diagram shows Tschichold's revision of the van de Graaf canon (on the left) and the later contribution of the Swiss designers, who converted the diagram into a 9X9 grid -


In Practice
Given a notion of the smallest pointsize of type to be used on the page, a designer can build a layout around the Van de Graaf canon, positioning headings, titles and body text. The overall result is a visual pattern which we see as balanced and meaningful.

The quickest way to do this is on a page in InDesign is to overlay the 9X9 grid, and draw your textbox one unit in and down from the top left edge, and two units in and up from the lower right corner. You can then drop in a baseline grid, setting the leading size of your choice from the top of the textbox.

Here's a doublepage spread based on the canon -

And here are the diagrams to confirm the proportions -

With the 9X9 grid in place, it's also easy to create a symmetrical layout, with both left margins of a spread double the size of the right ones. Just shunt the recto textbox across the grid to the same position as the verso.

And for those designers out there who prefer the more standard 6% margin rule and a 5, 6 or 12-column grid, go ahead and draw up a layout using that rule, and then overlay a Van De Graaf diagram, and you'll find that the diagonals still (approximately) run flush through the margin corners.

Van De Graaf Canon@wiki