“A method to produce the perfect book.”
The perfect book. This is how designer-genius Jan Tschichold described this system. Not the ok book, nor the pretty good book, but the perfect book.
This method existed long before the computer, the printing press and even a defined measuring unit. No picas or points, no inches or millimeters. It can be used with nothing more than a straight edge, a piece of paper and a pencil.
And you can still use it. This is a system which is still as valid, beautiful and elegant with ultra-modern design as it ever was for the work of the scribes, Gutenberg and Tschichold.
The Secret Canon & Page Harmony
Books were once a luxury only the richest could afford and would take months of work to be brought to fruition.
And they were harmoniously beautiful.
The bookmakers knew the secret to the perfect book. They shared among themselves a system—a canon—by which their blocks of text and the pages they were printed on would “agree with one another and become a harmonious unit.”
So elegant is this method of producing harmony that a few designers saw to rediscover it. Even though it was considered a trade-secret, they all came to the same conclusion, hundreds of years apart, independent of one another, but each supported by the other.
They found the way to design a harmonious page. A perfect page.
There’s a dance to all this
Let’s look at this dance, shall we? In its simplest form, here is the canon, without the guides.
And here it is with them (using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio, which we’ll get into next).
The beauty of the textblock begins to soar through its position, size and the relationship it holds with the page upon which it rests.
Not only does the (Tschichold) canon and its rules lead the textblock to having the same ratio of the page, but it also positions it in perfectly whole units.
This is where the harmony is found.
Without anything more than a straight edge and a pencil, this process will give you—every single time—a textblock which is in a relatively exact position and size, with echoed margins, all of which are elegantly rational.
No matter the page size, you will always end up with a 9×9 grid, with the textblock 1/9th from the top and inside, and 2/9ths from the outside and bottom.
How is this dance beautiful? Oh, let me count the ways!
A module is to a grid, as a cell is to a table. Firstly, our 2:3 ratio is back! Right there! The inner margin is 2 to a 3 of the upper margin. Our outer margin and bottom margin? Double those! 4 to the outer and 6 to the bottom! And the modules? Oh how wonderfully the modules of our grid echos the 2:3 ratio!
Then there is the fact that on a spread, the textblocks on both pages will be the same distance apart, over the gutter, as they are from the outer edge of the page.
“… because we hold the book by the lower margin when we take it in the hand and read it” — Paul Renner. And yet another piece of practically beauty? The textblock sits in the upper section of the page, which is more inline with where our eyes rest on a page, as well as giving space at the bottom for our hands to hold the book open without covering any content. Small, but lovely.
And my favourite aspect of this page block? Where I believe the harmony comes to a wonderful climax? The height of the textblock is equal to the width of the page.
Oh how my heart leapt when I learned this! This simple, almost insignificant fact gives such joy that I understand why Tschichold spent years pouring over the manuscripts of the scribes! It brings a smile to my face because of the logic and reason it puts forth.
It’s a logic which gives way to grace, which leads to beauty — graphic design at its most beautiful.
The Canons of the Elegant
… Or how I learned to stop worrying and love four answers to the same question.
Earlier I made mention of a few designers who stumbled over this canon of page design and that they did that independently. What’s of real interest is that they came to the same conclusion differently.
Let’s dive into the minds of four creatives, shall we?
The J. A. Van de Graaf Canon
The easiest to draw and possibly the first to be explicitly used for the book, the Van de Graaf canon is the one most often seen when page canons are discussed.
Van de Graaf’s canon is the result of looking and understanding.
He gave his attention to the books printed over a fifty year period beginning with the first — Gutenberg’s Bible in 1455. Looking at the books of this time, Van de Graaf came to the conclusion that many books used some system in determining the position and size of the textblock.
The brilliance of the system that was used by these early book designers is that they had virtually no standard measuring unit. Yet the pages of their books were always laid out with the same spirit.
What Van de Graaf discovered was that no matter the size of the page, or the ratio it took, his canon will always result in the top left corner of the textblock being 1/9th form the top and 1/9th from the inside margin, ensuring that the textblock will be positioned consistency and with balance and harmony.
Villard de Honnecourt’s Diagram
Practicing in 13th century France, Honnecourt was an architect who used a similar principle to design the pages of his Workshop Record Book that he did when working on his structures.
It isn’t a diagram that Villard devised that’s of special mention, but the system he developed—known as Villard’s Figure—to divide a straight line into logical and harmonious parts consisting of thirds, fourths, fifths and so on, infinitely.
I mentioned earlier that you can always come to a 9×9 grid using these canons. This is an instance where you can also come to a grid of sixths, ninths, twelfths and so on.
Shown here is a reproduction of Villard’s Figure applied to a 2:3 page, and as expected, the textblock has the same features as the other canons. Beautiful, no?
If you were to apply the same practice that’s here on its self again, you would end up with a margin of 1/12th, and if again, 1/15th.
This is a moment in which the boundaries separating graphic design and architecture were blurred, showing that the development of pleasing ratios, shapes and sizes is not dependent on the medium, but the mind.
Raúl Rosarivo’s Gutenberg Canon
Much like Van de Graaf, but much more recently in 1947, Rosarivo looked at the books of Gutenberg and his contemporaries, including Peter Schöffer and Nicolaus Jenson, to find what secrets their pages held.
Using a compass, ruler (and, obviously, measuring units that were standard), Rosarivo found that there was a system to Gutenberg’s book that can be seen, understood and applied to any other page.
In short, the system works by dividing the height and width of the page into 9ths. The diagonal rules and circle helps to establish text block width and height, which is really a support system, should you use the 2:3 ratio.
This is of benefit because it shows how closely Gutenberg followed the lead of the scribes of the time, not only in texture of page and shape of letters, but in the design of the page too.
Tschichold’s Secret Canon
As well as a talented and passionate graphic designer and typographer, Tschichold was a skilled calligrapher who practiced throughout Europe during the early 20th century.
So passionate he was that he sought a new understanding “of book page construction as it was used during late Gothic times.”
The culmination of his work in 1953 resulted in Tschichold’s Golden Canon … Which through further research he found mirrored those which had come before.
But rather than be discouraged, he found reassurance. Tschichold even described Villard’s figure as “the final and most rewarding confirmation of my results.” And more than just stumble over repetitive results, he realised that a number of people, those mentioned here, had all come to the same conclusions through different means. He saw the string that ran through this history.
Tschichold had the benefit of modern tools and drawing systems, so his diagram isn’t obviously drawn like those of Graaf or Honnecourt, though they do support his findings.
In The Form of the Book, he expresses that “the key to this positioning of the type area is the division into nine pans of both the width and the height of the page [much like using Rosarivo's canon]. The simplest way to do this was found by J. A. van de Graaf.” So while Tschichold had established the blue-print of the Gothic manuscripts, he happily turned to the work of others to show how to draw it, seeing that their ideas and his own aligned perfectly.
However he did establish a new rule — the page ratio is best at 2:3.
This was the magic bullet that the other canons were missing. His reasoning was that it sits within the Fibonacci Sequence, as well as the Golden Ratio, and establishes that the textblock will be harmonious and proportional to the page — it’s how the height of it equals the width of the page.
He reveled in this elegance, as well as that of the margin proportions of 2:3:4:6 (inner, top, outer, bottom), equated to the margins of 9ths found by Honnecourt, Graaf and Rosarivo. It’s all so neat and holds reason.
Tschichold gave a harmony to the elegant.
The Dance of the Four Canons
Modern Examples
Though largely forgotten today, methods and rules upon which it is
impossible to improve have been developed for centuries.
To produce perfect books these rules have to be brought to life and applied.
—Jan Tschichold—
A PDF of all that’s found below is also available. While I do find a certain kind of beauty in the diagrams above, they aren’t much without a little aesthetic sensibility thrown in, are they? I quickly pulled together three examples of how the diagram might be used, in the hope of getting your mind ticking.
Minimal Magazine Spread
One with which I truly had some fun.
I worked to have the text play within the guides, rather than be manipulated by them. The baseline of the intro paragraph sits near the 1/6th intersection, the tower sits so the island upon which it stands is at the bottom of the textblock but the cross-page diagonal shoots right through the middle of it.
Annual Report Spread
Alright, so a fairly dull bit of content, but it shows how the grid can be used. The outer margins work so nicely for subheads and notes that I couldn’t pass up the chance to lay this out.
It is the empty space that works for this layout, as it often does for typography, especially as we have a bit of room to comfortably hold our hanging numbers — something always worth being happy about! I also tried to stick to Tschichold’s idea of holding about 10 words on average to a line, which I think works quite nicely here.
Those with keen eyes will notice the title Global Locations sits on the 1/12th line, while our textblock starts at the 1/9th. Even keener ones will notice the margin between the subhead and the textblock is equal to our leading. It’s this kind of little touch that helps separate ourselves from amateur and take a step toward professional.
Illustrated Title Page for Magazine
Almost purely by accident did this happen. Notice how the text sits within the rules, especially the N of No and the E of ate?
While I had the textblock guides showing, I didn’t have the Villard Diagram on — I simply placed the title text within the textblock in a way that felt balanced and even, with a little over hang here and there. Then when I turned the Diagram on, I was so pleased to see how it all landed!
I also really enjoy the way the intro text sits tightly between the bottom of the textblock and the 1/3rd vertical line.
You’ll also notice that I tried to have the main features of the face sit comfortably in the textblock also and so that the title text was balanced.
Gently Evoking
I look at these lines—these systems—and I hear the gentle sliding of a string quartet dancing from note-to-note.
This layout slides smoothly into position, much like the notes, gently evoking and beautifully striving so the heart of the content may dance.
Today, all this is far easier — but that isn’t the point, is it? The point is to have some sort of balance. Yeah, that’s it. Running through Tschichold’s Golden Canon or the Villard Figure is of little meaning, right?
Well. Maybe. Though … I do like the elegance and process of doing it as if I were using a pencil and straight edge digitally. It’s a lovely routine that gives me joy. But, this is also of little meaning in the end.
So then, what is of meaning? Simply put — what goes into the text block. What goes around it. What directs the eye to it and what we as designers and copy writers and illustrators do with this space.
Putting the text in the right place doesn’t make the text right to look at. It’s only the first—balanced and harmonious—foot forward.
REFERENCES & LINKS
Book Design by Andrew Haslam
My interest in this grid system began with this book. I can’t explain how impressed I am with this collection of practical design principles, practices and ideas, with the design of a book as the basis. Very much recommended!
The Form of the Book:
Essays on the Morality of Good Design by Jan Tschichold
An essay in here is where a lot of Tschichold’s perspective on these systems can be found — a must have.
Canons of Layout from 51 Elliot
A great article on the page canons with thoughts on how to apply them to web design.
Villard diagram from Daniele Capo
It’s always fun reading people who are a lot smarter than you, and Daniele is definitely a lot smarter than I am. This is a quick word on the Villard Diagram (or Figure, as I referred to it).
Van de Graaf canon in John Baskervill´s work
A great video illustrating the canon as employed by Baskervill.
Comments
108 pieces of brilliance put forth by the audience
Stuart Thursby
13th of July, 2010 • www twitter
This is a highly informative and interesting read. Thanks for posting it, Alex.
I was a bit concerned that, in practice, it would lend itself much more to book interior design than magazine design, but as you proved here, it can work well as both. The “footer” gutter (I’m sure there’s a proper term for that…) may be a bit too large and “empty” for mass-market consumer magazine sensibilities, but put it in the right editorial hands and it gives the content just enough room to breathe.
Lisa Manson
13th of July, 2010 • www twitter
Beautifully written Alex.
I’ve really enjoyed rediscovering a lot of these theories of late as most of this type of information was glossed over when I was at Uni. I absolutely love the history & passion of early typography & design.
BTW I love the inclusion of the louvre image in the annual report sample… ties in very nicely :)
Alexander Ross Charchar
13th of July, 2010 • www twitter
I’m happy to hear that you both enjoyed the article!
As you said Stuart, in the right hands, that kind of margin could be well looked after… good space for a pull quote, a table/info graphic/side note.. I’m sure something could be worked out! And if not, it’s just a starting point, something to perhaps consider while laying out your page and using to help establish a balance and harmony, perhaps?
Glad to hear I’m not the only one going through these old ideas, Lisa! I think a lot of people who are new to the industry spend too much time reading blogs instead of books .. I’d hate to think that all these ideas will be almost lost in the next decade or so because of this.
I have a lot of fun finding out these new (to me) topics and then sharing them with fine folk, like yourself!
Thanks for the comments :)
Matt Ward
14th of July, 2010 • www twitter
This was a really wonderful and interesting read! I don’t have the chance to do too much of this sort of design (I focus more on web and identity), but the next time a layout project comes along I will definitely be keeping what I learned here in mind!
Awesome stuff.
Also, just for the heck of it, I took a couple different size blank pages and used some of these techniques. There’s just something so incredibly satisfying about using a pencil and a ruler to find the exact placement and dimensions of that magical text area!
Alexander Ross Charchar
14th of July, 2010 • www twitter
Haha, I did the same as you Matt, when I first learned about all this. I’d just get out my ruler at work and start drawing random rectangles and go through the process .. a lot of fun!
Ever since I wrote this article (and another one coming up in a couple of weeks on geometry), I’ve been wondering how to apply the same ideas to screen and web design .. i think for something like the iPad (so magazines/books), you could really do some cool stuff as the size is standard … but for browsers — that’ll be an interesting challenge!
Design Informer
15th of July, 2010 • www twitter
Hi Alex, just wanted to say that this article was phenomenal. I learned so much from it. We definitely need more articles like these in the community.
Being self-taught, I didn’t have a chance to learn this stuff as there’s not a lot of posts like this on the internet. Looking forward to reading more of your articles, especially ones like this where you give a history lesson as well as something practical for us to apply to our designs as well.
Dan O’Neill
15th of July, 2010 • www twitter
What a really excellent read!
As a developer (with an interest in Design) I’ve never come across this before. But even while reading it I could see the absolute wisdom in the methods. In just feels right when you look at it. And even more right when you take out a pen and piece of paper! :)
Thank you for this article and thanks @smashingmag for sending me here.
Alexander Ross Charchar
15th of July, 2010 • www twitter
Hey Jad, I’m so glad you enjoyed it! It means a lot that this article is being well received, as it’s a lot … mmm.. not the usual kind of stuff online for most design blogs, is it? So glad that people such as yourself are enjoying it!
I actually didn’t learn any of this kind of stuff when studying … in fact, most of what I’ve learned about graphic design, especially anything historical, I’ve picked up after graduating — a lot of time with my head in books and getting up to page 28 of Google search results looking for the smallest nugget that I can connect to other things I’ve read. It’s a lot of work, but absolutely worth it!
Hi Dan, thanks for stopping past and leaving a comment!
I’m a designer and hadn’t really come across it until I started researching it, and even then it took a bit of work to find it all out! You should see my notes! A lot of “No, this doesn’t make sense” scratched out with “Oh, of course!” with an explanation next to it, which would then be scratched out again with “… no, doesn’t make sense.”
I had seen the canon as a whole a few times, but never really understood it, where it came from or that multiple people had attempted it .
I’m glad you liked learning about this little moment in history :)
Aaron Blakeley
15th of July, 2010 • www twitter
I love this I have been musing over my own weird cross boundary job where I design and develop website bridging the gap between designer and developer. This got me to musing about how designers don’t really see the science behind what they do. They just know it intrinsically at times. Thanks for the great article it has revved me up for the day.
Ted Thompson
16th of July, 2010 • www
Fantastic article. An education!
Alexander Ross Charchar
16th of July, 2010 • www twitter
So glad you liked it Aaron! I couldn’t agree more and it’s something I want to explore a little more — the way so much of what we define as fundamental is often closely aligned with what most designers do anyway … I read a while ago that a lot of layout theory is simply a solidification of what the designer already knows from practice and critical thought. The theory just sharpens the tips of the intrinsic knowledge … instinct, baby!
Thanks for dropping past Ted!
Brandon Sheppard
17th of July, 2010 • www twitter
Hey Alex!
It’s taken me some time for me to get a chance to comment, been so busy this week!
I love this article. It’s great, I like the way you write. It’s sad that so many “top 10 photoshop brushes” websites get more attention than great sites like yours, and drawar and the like.
This kind of article is crucial! It’s great to learn about the history of design as well as some design principals simultaneously, your blog has taught me a lot.
I look forward to the Retinart design book! ;)
Peace out, my friend.
Alexander Ross Charchar
18th of July, 2010 • www twitter
haha, this site is so much work that the idea of a book would put me in a coma!
So happy to hear that you liked the article and I agree that it’s a shame that theory seems to come second place after things like Photoshop brushes, but hey, that’s the way it is! I’ve been noticing a lot more text-heavy sites getting more attention lately, and it puts me in good spirits! Though it is a lot more competition.
I’ve been thinking more and more about how to combine history/theory/practice in an interesting way .. recently decided that while I like doing artists profiles, I might stop writing “First they were born here, then they went to school there” kind of profiles and instead look at the ideas that made the lives of various designers so interesting … hopefully they’ll continue to hit the right spot for you!
Thanks for dropping past!
Douglas T
22nd of July, 2010 • www twitter
Beautifully done. I was prepared to disagree with you when I saw the story title, but I just can’t do it. Your descriptions and examples are very well done.
Unrelated comment: I love the labels on the comment fields. Very clever.
xeduarda
22nd of July, 2010 • www twitter
This is the kind of treasures I really immerse myself and the delicacy of the forgotten just takes a life of its own. I will use this not only within design boundaries, also linking this to all those harmonies re-emerging from those shouting echoes that histories are to be re-written in endless cycles always returning us to where we started. Really thanks for sharing this!
Jose
22nd of July, 2010 • www twitter
Whoa. I’ve never been this excited to read any article since… EVER! The elegance with which you describe the similarities of the canons matches that of the layout itself. And the samples! It’s like marrying coincidence and brilliance whenever a focus element sits on one of the lines. My mind = blown.
This is so going into my InDesign workflow.
Bex White
22nd of July, 2010 • www twitter
Alex,
I adore grid and layout theory and this article has brightened my morning. I have also sent it around my junior designers to have a look over. The animations and overlays on real designs really clearly show how the divisions and proportions work. This page will be my tool for explaining the basic beauty of the theories for some time. It’s like a shorthand version of all the theory books on my shelves, but with animation added for good measure.
I would love to see a similar article exploring how these apply to other modern applications such as web design, this really shows how the theories apply to media which was yet to be invented when the theory was written. Good design is good design in any time and in any format.
Thanks.
Bex.
http://www.bubblegumkitten.com
@bubblegumkitten
Alexander Ross Charchar
22nd of July, 2010 • www twitter
Thanks Douglas! I still love hearing people say they enjoyed this article.. it was a lot of work trying to get my head around it all but I think it was worth it in the end!
And believe it or not, but the Comment form labels probably took as long as any other single element of the site! I think I rewrote each one a dozen times!
Hi Xeduarda, I know exactly how you feel. When I finally gathered all the materials I needed for this article I was completely lost in the pages and ideas!
A blown mind, hey Jose? Great! I still love these systems and am continually blown away by the elegance of them. Might just be a few simple little lines, but when they dance together, something brilliant is given to the page! So happy to hear you feel the same!
Hello Bex, thanks for stopping past. I think we’re now even as your comment brightened my evening :)
A part of me loves the idea of teaching and hearing that you passed it around to your junior’s makes me feel as if I’m somewhat achieving that, if only a little bit.
I’ve been wondering (and spoken to a couple people) about how to go about applying this kind of theory to the screen/web. The only problem is that I’m not a web person as print is where my passion lays. I hate the idea of trying to adapt this kind of theory to a medium I don’t know instinctively.
Thees Peereboom
23rd of July, 2010 • www twitter
Thank you very much for laying out so clearly that what actually matters and is underestimated by so many. Getting ones thoughts accepted is more influenced by the way it is presented than many realise. Design matters a lot! I sincerely hope that articles like yours do increase awareness – ‘a thing of beauty is a joy forever’
Alexander Ross Charchar
23rd of July, 2010 • www twitter
I think you’re right Thees, this is the kind of thing that makes it easy to justify a design decision to a client — it shows that we actually do think about our profession and it’s not just putting images and text on a page where ever we think it’ll look prettiest.
Tess Elliott
26th of July, 2010 • www twitter
Greetings!
Am an artist who has had a lifetime love of books, especially the great ones hailing mostly from from Bruges and the Celtic world. Have often wondered about the larger margins and thought they were there as room for the occasional glossing, though I see the glossing just tool advantage of the beautiful negative space. My thrill was finally getting to buy a copy of the English translation of “Hypnerotomachia Poliphili” which was the early printed style book of the Renaissance. They went to a lot of trouble to typeset it to look like the first masterpiece by Aldus Minutius in Venice, with that beautiful large margin space (I hate to say it, but the artist in me wants to gloss it). They reproduced the text block and woodcuts exactly as it was done in the original book. I have been thrilled reading it, and thinking about how it set the Renaissance on its course of re-discovering classical history and art. You are right about those handmade illuminated manuscripts being perfection–and also how those of us who can appreciate it long for that sort of perfection in our world. I look at a magazine, and I see bottom line thinking, without beauty. Instead, we get aggressive, money-oriented design that I find tiresome and really ugly. Negative space is worth its weight in gold, where beauty is concerned. Thanks for the elegant and entertaining diagrams, too!
Alexander Ross Charchar
26th of July, 2010 • www twitter
Hi Tess,
Thanks for stopping by and leaving such a great comment :)
I hadn’t heard of the Hypnerotomachia Poliphili before (I have a lot to learn) but after looking it up, I can’t help but think of it as utterly beautiful! This spread is so beautiful I want to wrap my self up in it! Thank you for letting me know of it, I think I’m going to have to get one of the books about it off Amazon.
Magazines and books are about business these days. And that’s fine as there are enough books and magazines around that have the extra love and attention given to them so that they are something beautiful and wonderful. They will last, even if the runs are only a couple thousand, and the money driven ones will eventually die and be forgotten.
Nicholas van der Walle
26th of July, 2010 • www twitter
A wonderfully written and explained article that could have been proudly published in many a top-end design magazine or book. Thank you for taking the time to share these very important and interesting principles.
Tess Elliott
27th of July, 2010 • www twitter
Am glad you liked reading about the book. No one seems to agree about who really wrote it (the stated author seems to be a puzzle) but legends abound that Leon Battista Alberti had something to do with it–he was like the style guru who was an early important thinker. I studied a lot of art history while getting my MFA, but for all of my early years, there was no English translation of this book. I would read quotes from it everywhere & it drove me nuts. When I heard there was an English translation at last, no matter how expensive it was, my order went in right away! It is filled with classical references on every page–like mythological name dropping–and like modern magazines, Poliphili intensely describes every scene and object he comes across that Renaissance wannabes rushed to collect or commission for themselves. It will force anyone to really read up on the classical world, and my poor old Oxford Dictionary of the Classical World got the most use in all the years it’s been in my library. The woodcuts are wonderful, and the whole book is like an insiders guide to the Renaissance right along with Macchiavelli’s “The Prince.” A good book that is also beautiful is a bit like time travel for me. And of course, for those days, it is also a Romance! It’s hard reading, but interesting once you mentally get yourself into Poliphili’s world. The title means “The Strife of Love in a Dream” (as in a highly educated aristocrat’s dream). Would love to hear what you think about it when you’ve read your own copy. Love that Zappa quote, too!
Alexander Ross Charchar
27th of July, 2010 • www twitter
Hi Nicholas, thank you for taking the time to leave such an encouraging comment :)
Hey again Tess!
I know what you mean about finding English translations. As a number of immensely important books on design were written in German during the early 20th century, I always get excited when I find there’s been an English translation. Of course I worry that something’s been lost in the translation, but it’s great having those books on your shelf as you know the majority of the points being made come across without any issue — it’s just the subtleties that the original authors might have put into the language that can possibly be lost.
I’ll have to look up The Prince now :)
Steve Laskevitch
27th of July, 2010 • www twitter
And I thought 2:3 died with 35mm film…ha.
Shall I clear my calculator’s memory with 1.6180339887498948482? Guess so,
Seriously, thanks for taking the time to write so informative a piece and have so lovely site for it.
Joy Sebastian
28th of July, 2010 twitter
Who do I thank first, you or StumbleUpon? It is a learning process every day, and this was new subject for me. Brilliant paper.
Design ideas
28th of July, 2010 • www twitter
Absolutely unique article. Thanks for useful lesson
Alexander Ross Charchar
28th of July, 2010 • www twitter
Hey Steve, Joy and Design Ideas. Thanks for stopping past and taking the time to leave a comment! I’m glad you liked the article, I hope I’ll be able to put up a few more articles you enjoy ;)
Jerald Blackstock
28th of July, 2010 • www
Like Picasso said, If you know what’s going to happen why do it? To me, perfection is boring, and perfectionists are anxious and hostile, that’s why they force ‘harmony’ on an imperfect and unharmonious world, to medicate anxiety. I prefer ‘accidents’. The search for ‘Harmony’ is a way of saying I can’t handle uncertainty, which is a goddamn lie.
Douglas T
28th of July, 2010 • www twitter
A harmonious layout is not always the perfect solution for a design.
However, an understanding of what makes a harmonious layout is important to making something disharmonious, dynamic, and interesting.
Nancy Lozano
30th of July, 2010
it´s wonderful page
David Ch…
30th of July, 2010 • www twitter
Few of us think about readabilty when we write.
Writers think a lot about the words they use. It’s amazing that the page layout makes such a difference. I’ll encourage my friends and clients to adopt this technique.
Thanks!
Alan
30th of July, 2010 twitter
I loved this piece
C. Kaufman
31st of July, 2010 • www
I wonder how or why the first book makers came up with the height x width ratio of a book page that they settled on?
Why are the pages taller than they are wide?
Why not wider than tall?
Why not square pages?
Was it because it was easier to bind a book when the pages were taller than they are wide?
Douglas T
31st of July, 2010 • www twitter
Whenever you want to know why something was done a particular way, think of what came before.
Why are modern books taller than they are wide? Scrolls were commonly written that way. Handwritten books were done that way too, and likely for most of the same reasons. I believe it has something to do with writing in short horizontal lines being easier to keep clean than longer lines. Less chance to smudge.
Alexander Ross Charchar
31st of July, 2010 • www twitter
Jerald
I know how you feel as I use to feel the same, but the old adage that to know the rules you must break them rings true when it comes to design. One of my favorite designers is THS (slightly NSFW), whose work is a passionate expression and is often the complete opposite of the kind of thing like this system. Yet it always, always grabs me and makes me smile just as wide as this stuff does.
Also, this kind of system is about working within a framework, with which you can play and throw your work and ideas against in an effort to make it more interesting and reasoned. The system, which is barely the base of the design, shouldn’t even be noticed and is the smallest of a starting point. But it’s worth using it to help develop a design that is aesthetically pleasing and satisfying to our eyes and mind.
But in the end, it’s just an option and an idea, much like any grid system. The best designed books and magazines in the world all use grids, but as creatives, we don’t open up their pages and say “oh look! a grid is here, therefore it’s beautiful” we say “oh look! how beautiful!”
David
Of course! The most important thing a design should do is look after the words that it houses! Thanks for dropping past :)
C. Kaufman
Thanks again for tackling this one Douglas :)
Books going as far back as Gutenberg’s are based on golden ratio sizes, and would be applied to a portrait page, as if it were landscape, binding two landscape pages together would cause the book to be awfully painful to bind, illustrate, illuminate and simply handle. As Douglas mentioned, I’d say it’s from what was around before hand.
Which is probably based on the simple fact that there is a width of text which is optimal to read, and we read down a page more comfortably than we do across it.
John
1st of August, 2010 • www twitter
Alexander – that’s a lovely article – thank you for taking the time to write it. I’ll be passing it on to a lot of my friends.
To Jerald – working within constraints (like haiku, or following the rules of poetry when it comes to meter and scansion) can be incredibly invigorating to ones creativity, in my experience. If you have only 100 words to express something in, or a short amount of time to speak, every word, every phrase must be meaningful.
This to me is much the same.
Alexander Ross Charchar
1st of August, 2010 • www twitter
Thanks for adding that John, the examples of the haiku and 100 words of expression are great.
It’s kind of ironic. So much of the time we wish our clients gave us more freedom (less restraints, requirements, better budget, etc), but it’s those things that help us develop something wonderful and truly creative. It’s a lot easier to whip up something when you have an infinite number of options, but when it’s limited, it can be a lot tougher.
silicon
7th of August, 2010 • www twitter
Brilliant, kudos!
Deko Web
15th of August, 2010 • www
Thank you nice post..
Freeman Zygote
21st of August, 2010 • www
One of the best pieces I have seen in years! This will be most helpful (and encouraging) to those interested in excellent book design.
Thanks very much for putting this altogether! Really well done!
Victor
21st of August, 2010 • www twitter
Insightful, the best part is the examples all work as living pages you would be proud to see someone reading. Your question about browsers is very valid, as yet have not seen anything that is as elegant as this.
Thank you
Victor
Joe Moran
22nd of August, 2010
Dear Alex,
Tried it with standard US letter size paper — 8.5×11 inches (or tabloid for a spread–11×17) and the height of the text block doesn’t equal the width of the page.
Can do the Van de Graaf, Villard de Honnecourt and Rosarivo’s Gutenberg divisions to get a “harmonious” area relative to 9×9. But Tschichold’s “secret” circle doesn’t work.
What is the page size they were using? Curious.
Very Respectfully,
Alexander Ross Charchar
23rd of August, 2010 • www twitter
Freeman Zygote
Thank you very much! There’s so much to learn about how people have designed books throughout the years and what can still be put into use today – I’m planing on exploring a few more topics like this one!
Victor
Thank you, Victor :)
I found the concepts and examples I found of these systems very interesting, but I thought to really explore the topic, I’d have to whip a few up as examples – so I very much appreciate the notice you took of them!
Joe Moran
Hey, thanks for coming back to ask the question rather than just fobbing it off as a load of nothingness!
As you said, you’ll get the harmony using any of the canons (Except Tschichold’s, but we didn’t so much develop a canon as he rediscovered them in use) on any page size. But proportion is another matter all together – to get the proportional text block that relates to the page size, the page needs to hold a ratio of 2:3 – so no standard document size is going to work out perfectly – that’s what Tschichold realised. 2:3 is the key!
frejus
24th of August, 2010 • www
Wonderful article – thank you. Love anything that requires a ruler and have been fascinated by Fibonacci and all that emanates from his work for years. Off to find out if it works with landscape orientation. Looking forward to more like this, please. Thanks to Blurb.com for directing me here.
Stephen Tiano
24th of August, 2010 • www twitter
Very nice piece. And good expo of one of the really classic interior page dimension/text area set-ups.
I tend to thing exclusively in terms of books. And so that’s strictly where my recommended reading leads.
So if you’re interested in further reading on page design, although Haslam is very good–and Tschichold … well, I’ve written a number of times about him; I have a complicated respect for him, even as he renounced some of his own earliest pronouncements on design–I suggest the following, my “bibles of book design”: Robert Bringhurst’s The Elements of Typographic Style; Jost Hochuli and Robin Kinross’s Design books: practice and theory; and Richard Hendel’s On Book Design.
I also invite you to take a gander at my blog, at http://www.tianobookdesign.com/blog
Vance Bell
25th of August, 2010 • www twitter
A post well received.
Off to find a ruler.
Will return.
Alexander Ross Charchar
26th of August, 2010 • www twitter
Frejus
You’re very much welcome :) Thank you for taking the time to read it and leave a comment!
It’ll always work (the circle harmony is dependent on a 2:3 ratio page as mentioned above though, don’t forget that!), no matter the page size! It’s not always beautiful or appropriate, but it’ll work!
I saw blurb.com pop up in my referrals and visited it for the first time because of it – absolutely love it!
Stephen Tiano
Thanks Stephen! I really appreciate yo utaking the time to suggest some further reading! Bringhurt’s Typographic Style hasn’t left my side since I started to gain an interest in design and typography a number of years ago! It’s easily the best purchase I’ve ever made in relation to graphic design.
Vance Bell
Haha! It’s a lot of fun oddly!
beanwave
27th of August, 2010 • www twitter
Nothing new to add to the above comments, but just wanted to say thanks! Glad it came my way.
Johnofthetower
27th of August, 2010 • www
Great article. Thanks a lot for sharing. As a photographer and newbie designer, I’m deeply interested about anything about composition.
The question now would be to translate those model to a blog page, web site, and so on…
Alexander Ross Charchar
27th of August, 2010 • www twitter
Beanwave
You’re very welcome :)
John of the Tower
I’ve wondered the same and have considered it quite a bit! Would be quite easy on something like an iPad publication as the screen size is always the same, but something liquid? Tricky!
World’s Top 10
29th of August, 2010 • www
Excellent share, thanks for sharing
Stephen Tiano
29th of August, 2010 • www twitter
You know, thinking about your take on Mr. Tschichold’s take on the perfect page got to be like an itch I couldn’t scratch. God knows I’ve tried before, as I’ve written about him and Die neue Typographie before on my blog. But some of my musings were lost over a year ago when my blog and Twitter account were hacked into. So I gathered my thoughts again and said a few more words about him at http://tianobookdesign.com/blog/?p=290. I’ve mellowed mostly and have come to appreciate what he means to typography.
Alexander Ross Charchar
30th of August, 2010 • www twitter
Stephen Tiano
Hello again :)
Just read your piece! I think you should have spent the money on The Form of the Book! I think you’re right about Tshcichold being suspicious about page/text ratios that he didn’t consider, but I also think he mellowed in later years and would have been open to the ideas of others.
You also inspired me to have a better look at Bringhurst’s page ratios!
Stephen Tiano
30th of August, 2010 • www twitter
I dunno–it was a mighty good bottle f scotch, that 30-year old. I nursed it for over two years, taking it out for special occasions with my dad and a buddy or two of mine.
As for Tschichold mellowing … perhaps. But I never heard that he changed to allow questions when he spoke.
Guess the Lighting
31st of August, 2010 • www twitter
Thanks for this. Never knew of the theory. Interesting that the bottom quarter of the page is never used.
Cheers,
GuessTheLighting.com
Paddy Herbert
7th of September, 2010 • www
This article is simply stunning, incredibly useful and inspirational, thank you.
Alexander Ross Charchar
7th of September, 2010 • www twitter
Having never seen Tschichold give a talk, I find it kind of amusing that he didn’t allow questions – though I think if I were part of the audience I’d find it less amusing and more infuriating, especially if he was presenting (then) radical ideas and was so adamant about their being the only way to do things ;)
Not a problem Ted (Guess the lighting) and Paddy Glad you liked the article :)
Stephen Tiano
7th of September, 2010 • www twitter
There was, without a doubt, a certain not-amusing quality to Tschichold. I can’t imagine being one of his students, having a question and not being permitted to ask it. But that is exactly how he operated. The only question I have is whether he changed that when some of his other views. Certainly it was just as giant a change from his position that the ideal book text body type was a plain, unadorned sans serif to designing one of the really great serif text faces, Sabon.
Alexander Ross Charchar
7th of September, 2010 • www twitter
There’s one book that I’m really eager to read – the Tschichold biography by Rurai McLean, who was his friend and a knowledgeable design writer. I’d like to think that’d give a good balance of Tschichold as a person and Tschichold as a designer. I don’t know why, but I couldn’t imagine he was always ‘not-amusing’.. in fact, I can’t help but think that someone as passionate about design would generally be quite a happy and joyful person… and perhaps those moments of “no questions allowed” were just to avoid direct jabs at what he would have just spoken about.. didn’t want to have what he might have seen as a debate.
Though, I’m sure I’m just romanticizing about a creative whose legacy I’ve grown to admire :)
What do you think?
Stephen Tiano
7th of September, 2010 • www twitter
Read all about him. Ruari McLean did the Intro to the translated edition (not the recent one) of Tschichold’s Die neue Typographie and gave a pretty thorough—I thought—sense of the bigness of his personality and the closed quality to his point of view. Tho’ there was his renunciation of some of his more strident views. And, again, certainly Sabon was a real switcheroo from his earlier positions. See what you find out. Then come back and tell us. Hell, if you’d like, you can do a guest turn on my blog.
Sidewallfusion
8th of September, 2010 • www twitter
Forsooth, enlightenment comes along but once in a while and today it graced me with this fantastic notion. thanks for a great read.
Abdulsalam
8th of September, 2010 • www twitter
This very artical for ART.
Thankyuo very much
Alexander Ross Charchar
8th of September, 2010 • www twitter
Stephen Tiano
That’s a great point! After our discussions, I’ll have to go back and reread the intro in Die neue Typographie.
I always thought his design for Sabon was more like he was returning to his earlier roots in calligraphy and perhaps even ornament. I did recently pick up another one of his books (Treasury of Alphabets and Lettering) and found it to be a fantastic insight into his opinions on lettering.
And i might have to take you up on the guest posting!
You’re welcome Sidewallfusion and Abdulsalam
njmehta
13th of September, 2010 • www
The secret law of page harmony
John of the tower
15th of September, 2010 • www
Would you agree if I translate your excellent article in french and publish it with your name on my blog ? I would surely link the post with this article as the source. I proposed to many friends to read it but many cannot read english easely.
Also, do you know a bit about Pythagoricians speculations ? I’d like to understand what made for them a proportion holy. Also the link between their rationalism and their pure mysticism.
Last, and back to composition, did you ever heard about chinese concept of “Wu Wei” in visual art ? It means more or less “emptiness and fillness” (fillness ? Is that correct ?) . In Taoïsm, it is also acting/non acting.
This concept is the Grâal of Chinese composition. It is valid for graphical composition as much as for geography or physionomy of a landscape (as in Feng Shui). In this vision, it is not purely formal as it underly the natural circulation of shi or energy. The perfect expression of it being naturally the Yin Yang circle.
Different vision but definitely interesting, isn’t ?
Alexander Ross Charchar
21st of September, 2010 • www twitter
John
I would be more than happy for you to translate the article, that would be really flattering! As you’ve already said you would, all I’d like to see is my name and a link back to this page!
I don’t know much about Pythagoricians speculations, but I have been thinking a great deal of Wu Wei lately and other Taoism ideas that could be used within graphic design. The little reading I’ve done the topic has been really, really interesting and I’m looking forward to doing a few experiments my self!
I’m hoping to write a few articles on the topic before the end of the year actually, so you’ll have to come back and let me know what you think of them!
profeivan
28th of September, 2010 • www twitter
Great article!!!! Also, I Would like to translate into Spanish (obviously with all the credits and links to your page).
Punkah
4th of November, 2010
i think the headline of the article is pretty much exagerated and sensacionalist.
thats a pretty standard (golden or any other) and boring ratio page, far from a “perfect page”, pratically speaking. depending on the century, the concept of what a perfect page should be changes drastically. so does the proportions and tricks to acquire the margins, page width x lenght, type leading and so on,
the margins and proportions of all those examples doesnt fit 95% of todays design projects, even dough understanding the theory behind those pages may lead to some better understadind of editorial design process. you may find some classic and sometimes ugly books using those same proportions and tricks (most of them using a fake column with extra info to fill those huge outer margins), but the truth is the great majority of the designers that have studied and know that formula do not use any page resembling this, ever. instead, they prefer to build the page based in post modern aestethics and functionality, mixing relations and proportion separately to properly fit the aesthetics and functionality they have choosen first. or choose any other “perfect” or “classic” page layout thats prettier than this.
i strongly recommend anyone interested in this topic to read more bout the subject (there are several books about it), so that the designer can apply the ideas behind the “classic” or even “medieval” proportions to modern work.
Alexander Ross Charchar
8th of November, 2010 • www twitter
Punkah
Hi Punkah :)
It sounds as though the biggest problem you have with the article is the title of it, which is meant to be a little tongue in cheek. Of course there is more than one way to achieve a so called “perfect” layout, I was simply playing off what others had called it before. Is this the only way to discover harmony or the margins of a page? Of course not, I’d call anyone who would honestly suggest such a thing quite naive.
One of the reasons I thought this was such an interesting topic, and I think why so many others have enjoyed it, is because it isn’t the modernist way of designing a page that we are bombarded with today, one which we all know about and enjoy. It’s just another way to look at things and, I think, an interesting way to decide upon a layout.
I agree with you too – the reason we read about these kind of philosophies and theories behind design, no matter the age, era or technology it is born from, is so we can learn of the the ideas that went into them. The end result is almost immaterial and of no use (I said almost), as it’s the idea that produced that work that is of true value. All this was an attempt to show a few people one of those ideas.
I do have a request – rather than simply say “I strongly recommend anyone interested in this topic to read more about the subject (there are several books about it)”, why not suggest a few of those books? There’s no point in pointing out what you consider the flaws in this article, and telling us all there are better sources out there, if you don’t mention what they are? None of us really learn anything than what you’re dismissive opinion is, no?
Tess Elliott
9th of November, 2010 • www twitter
Have really enjoyed the continued dialog emanating from your study of historical design. This is actually manifest in the everyday world of teaching, and student rebellion, old guard and new guard, which will always clash and and bring new interesting ideas. You have an excellent way of responding. Did you ever get the book “Hypnerotmachia Poliphili?” I am still wading through mine trying to comprehend the mindset of the classical obsession which sparked the Renaissance. It seems anachronistic to care so much about skill at a time when it does not seem appreciated. Have you read “The Craftsman” by Richard Sennett? Was left with a rather bleak view of the value of skill these days, but it was good for me to know this perspective.
Emily
15th of January, 2011
It’s so cute!
Connie Malamed
17th of February, 2011 • www twitter
I find your article inspiring and worth studying. Thanks so much. It got me to thinking how this could be applied to the design of slides. If slides were designed with elegance, what a world this would be. Curious about your thoughts on this.
Vicky
18th of February, 2011
Lovely!@
thanks for sharing!
Sanjay
12th of March, 2011 • www twitter
wonderfully evocative piece :) I spend so much time obsessing over the perfection of a web page, that I give/gave little thought to the perfection of the printed page…until now!
Not only did you inspire me to pick up a book again, but I’ll always do so with a more critical/appreciative eye – for that matter, a magazine, an ad or even a 10-k report!
Hayden CHambers
13th of March, 2011
This of course is the visual layout, not the practical one because a significant amount gets lost in the bind
Stanislav
25th of April, 2011
Hi, Alex,
First of all, thanks for a great article. Animated gifs explaining canons helped a lot – thank you for taking your time to make them.
I wonder if the same principle can be used in web design. But the screen height varies wildly, so even with a fixed-width design we could hardly ever achieve the necessary ratio. Have you tried to use these techniques when designing web pages?
Nikos Chatzigeorgiadis
10th of May, 2011 • www twitter
This is very wonderful and interesting. Congrats!
Page Harmony | blakeherberger
27th of May, 2011 • www
[...] Retinart’s Secret of Page Harmony [...]
baran abtahi
27th of June, 2011
this information is very complet and profit for me as though I am a graphic designer. thanks.
Canon of the Page « Printers
29th of June, 2011 • www
[...] and it’s a harmonious page. That’s to say, its proportional margins approach a certain timeless alignment. It appears the way books have been paginated since . . . well, since there have been printed [...]
Anamika
5th of July, 2011 • www twitter
This was so educative :)
¿sabes como diseñar con armonía? « Koi Pixel
14th of July, 2011 • www
[...] diseño editorial y no entendemos como es que se ve tan bien proporcionado, bueno pues en este post esta el secreto de dise [...]
El secreto del libro perfecto « Notas y apuntes sobre fotografía
22nd of July, 2011 • www
[...] de un artículo en RetinArt: The Secret Law of Page Harmony. Me pareció interesante por tratar sobre un método de diseñar las páginas que se remonta a [...]
Perfect Page Layout « Dan Hindmarsh
29th of July, 2011 • www
[...] The Secret Law of Page Harmony | Retinart. [...]
The Power of Proportion « MickMac
15th of August, 2011 • www
[...] More information can found here. [...]
Jay
19th of August, 2011 • www
very nice breakdown
Karen
19th of August, 2011 • www
wonderfully evocative piece…really helpful to those of us who are perfectionist
Martin
29th of August, 2011 • www twitter
The information is very complet and profit for me as though I am a graphic designer! Very Nice!
Deepak
13th of September, 2011
Nice article….loved it!
azlif
9th of November, 2011 • www
What am i learning in my university? deadlines? attendance? not really sure!!
This is my graphic design education right here. Kudos Mr.
-A design student from the Maldives studying in UK.
Mar
11th of November, 2011 • www twitter
slick.. I’m VERY impressed.. going to do some tests too ;)
Jaime
4th of January, 2012
…I’m not impressed…just totally overwhelmed…
How To Design In An Unknowable Canvas | Van SEO Design
23rd of January, 2012 • www
[...] years designers have been following the canon of page construction put forth by Jan Tschichold. The construction works well in print where the canvas is fixed and [...]
How To Design In An Unknowable Canvas / Weblog – Hans van Goor
23rd of January, 2012 • www
[...] years designers have been following the canon of page construction put forth by Jan Tschichold. The construction works well in print where the canvas is fixed and [...]
Szymon Czepiel (szymoncz) | Pearltrees
25th of January, 2012 • www
[...] The Secret Law of Page Harmony | Retinart It’s a logic which gives way to grace, which leads to beauty — graphic design at its most beautiful. The Canons of the Elegant [...]
Jay
30th of January, 2012 • www
great way for people to see the mindset of a designer
esmaltes
8th of February, 2012 • www
I was simply playing off what others had called it before. Is this the only way to discover harmony or the margins of a page
Alexander Charchar
8th of February, 2012 • www twitter
Hi Esmaltes,
No, not at all. Picking up any book on grids, typography or page design will reveal an array of ways to go about establishing harmony and margins from numerous sources. This is just one (albeit fun) way of going about it!
Deepak
9th of February, 2012
@Jay
Yes…but to break the law, you need to know it well ;)
Applying timeless page design principles to the web | Timothy Comeau
14th of February, 2012 • www
[...] morning I found Alex Charchar’s page on ‘the secret canon & page harmony’ as presented in the past by Jan [...]
Josh McCoy
7th of March, 2012 • www
I like this website. You’re the explaination exellent content exists on the Internet.
Grid Readings « JCCC :: Typography
22nd of March, 2012 • www
[...] The Secret Law of Page Harmony [...]
Yngve Moe (yngvem) | Pearltrees
25th of March, 2012 • www
[...] It’s a logic which gives way to grace, which leads to beauty — graphic design at its most beautiful. The Secret Law of Page Harmony | Retinart [...]
Danish Chiragh
19th of April, 2012 • www twitter
Simply Amazing!
I was going to pull my hair out after reading so much about all the Golden stuff because there weren’t any examples just diagrams and theory which is very hard for me to grasp.
Thank you for such a great article!
Any chance you could shed light on Golden ratio, triangle, rectangle, ratio with examples? Pretty please with a Phi on top ;)
Thank You once again!
D
Storm
4th of May, 2012 • www twitter
Greetings!
I was obsessed with typography and book design the first time I learned about them, and was always obsessed with geometry, ratios and harmony in those. I am now developing my own page construction concepts, either by using the Van de Graaf canon as a starting point and trying to derive other page elements such as header, footer, side note etc. from it, or trying to achieve slightly smaller borders to use the page better and accommodate to modern standards while trying to save as much of the classical harmony as possible. I just stumbled upon this article recently, and I must say it is perfectly done. I will most likely simply link to this page if I ever have to describe the classical canons in the descriptions of my concepts.
Thank you for creating this, and especially for the modern examples. People should realize that although many hundred years old, these principles still can, and should be applies today.
I really hope that the art of book creation will rise once again, and instead of small, equal margins and lack of harmony, w will see artistically designed books once again. And I hope I will be able to do my part in that.
Best wishes,
Storm
P.s.: I had a website once where the content areas were actually designed with the golden ratio in mind, I even added some – from a webdesigner viewpoint – unusually thick margins to make the page look a bit like a book page, used parchment texture as background of the main content area and drop caps. :) Sadly that site is no more, but one day I will rebuild it.
Link List, volume 26 | Suite Creative
8th of May, 2012 • www
[...] The Perfect Page: Grids that create harmony. [...]
Shall you delight, entertain & enlighten
us with your own thoughts?