Authored by
Alexander Ross Charchar
13th of July, 2010 
Graphic Design 58 Comments
“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.
Found beauty in the words given?
then perhaps subscribe to the rss feed.
• Comments •
58 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
Outer Margin TypExperiments (via Four Fifths Design) | Marilyn Grando
3rd of September, 2010 • www
[...] Tyler Mammone: The Secret Law of Page Harmony – Retinart (retinart.net) [...]
Shall you delight, entertain & enlighten
us with your own thoughts?