Canons of page construction: The perfect proportions

It’s amazing how a well laid out book can appeal to your aesthetics or turn you off completely. It’s always best to not judge a book by its cover, but you know what? We do it anyway.

Now these days almost everyone is either stuck on a computer or glued to an e-reader, but there’s just something very fulfilling about holding a proper book in your hands. A well designed book with an appealing page layout will make a great impression the first time that will carry over to the content. So this got me thinking… Can I create a page template that anyone can use for their own work.

Before I went about doing this, I thought I’d start with what’s been around already. The canons of page construction rely heavily on not just visual aesthetic, but also a mathematical aesthetic. The proportions are often inspired by or are directly based on the Golden Ratio for many old texts and there is a very strong use of geometric shapes to get predictable results on even different sizes of parchment or paper.

I started with this image of the canon by Van de Graaf also called the “secret canon”.

The Van de Graaf canon is used in book design to divide a page in pleasing proportions. This canon is also known as the "secret canon" used in many medieval manuscripts and incunabula. The page proportions vary, but most commonly used is the 2:3 proportion. In this canon the text area and page size are of same proportions, and the height of the text area equals the page width.

What struck me the most is at how simple lines from point to point build up to create a complex layout. I took apart the design to figure out in which order the lines were drawn and afterwards, I numbered them for my own reference. Now unlike the medieval writers, I have access to Photoshop, so finding the perfect center of a layout is fairly simple. The original page designers would have used a 90 degree angle ruler to draw perfectly vertical lines from point to point using the edge of the paper as reference.

Order of the guides

Now we can translate this to an actual page we can use. Because 8.5 x 11 inches is the standard letter size in the U.S. although I have a feeling that legal size proportions (8.5 x 14 inches) would look even better if we’re doing a single page in portrait, but I went with letter size for now in landscape and translated these lines onto a blank image with a 300 dpi resolution.

Because I have the ability to find exact center later on thanks to technology, I saved the middle line for last and instead created a guide at the exact middle which was used as a reference for lines 3 and 4. By pressing the Shift key while drawing, you can create straight vertical or horizontal lines in Photoshop. I used this feature to create lines 5 and 7.

Drawing the corner to corner lines first make sense since the corners provide the perfect anchor. The center can be found in Photoshop if you’re using guides since they snap to the exact center of the image. Lines 3 and 4 can be drawn from the botton corners to the guide in the center. The “X” created by the crossing of lines 2 with 4 create a point on which to start line 5. By using the Shift key trick, we can draw a perfectly straight vertical line to the edge of the image. The point created by the intersection of the top edge and line 5 create an anchor to start line 6 which can then be drawn to the intersection of lines 1 and 3.

I also added extra lines on the bottom using the same points as reference because I want to include page numbers and a footer. I didn’t just want to copy the Van de Graaf analysis, but instead wanted to create something appealing for a book that would still look good. I started by extending the vertical lines of the text block on each side until they hit lines 1 and 2 so I can rule off of those. I can then use those to draw more lines horizontally that hit the additional guide lines as well as the other end of the text block vertical lines.

My interpretation

Now the content rectangle appears to have been elongated from the original, but I have plans for the extra space. First, I need to set the actual text region.

Layout blocks separated from the rest of the lines.

And when we momentarily hide the lines, we can see how well it will look.

Text blocks on page

Now that we have our text blocks, we can add some text to see how it will look. I’m going to use a triangle created at the bottom of the page as a reference point for the page numbers, while using the elongated rectangle from the main content as reference for a page footer/notes section. I used Century Old Style Standard as the text font and Calibri for the page numbers.

I wanted the content to look symmetrical as much as possible, so the footers are pushed to the center from both sides.

And let’s see what the final product looks like without the lines.

Looks good to me.

The great thing about using this method to find the perfect proportions is that it should be possible to do so with any paper size. You will still end up with a very nice looking layout for a book or single sheet print.

Enjoy!

7 thoughts on “Canons of page construction: The perfect proportions

    • Hi There, very sorry for the late reply. I was busy with… er… stuff.

      It can be used for any template that is rectangular. That is, a book, pamphlet and even letter. The right proportion really depends on the type of text you’re typing.

      If it tends to have long paragraphs, then the line spaces need to be increased. The font is 12Pt times New Roman.

  1. Pingback: Design Basics - Page 11 - DesignersTalk

  2. Hi Eksith,
    Are you aware of any software or application that can do this to a PDF file?

    It would be really nice if any PDF file can be printed with this layout. However, I was unfortunately not able to find a way to do it.

    Regards,
    Chinson

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s