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!
This page intentionally left ugly 