It is convenient to leaf through a book using the mouse scrolling and arrow keys:
spreads
To my grandfather–Valery Gorbunov , a writer, a newspaperman, and a witty person
To my grandfather–Valery Gorbunov , a writer, a newspaperman, and a witty person
Typography and layout
Typography and layout
© 2017 Artem Gorbunov
Published by Bureau Gorbunov
Table of contents
Layout basics 4
Basic elements 34
Modules 74
Pages 115
Conclusion 155
© 2017 Artem Gorbunov
Published by Bureau Gorbunov
Table of contents
Layout basics 4
Basic elements 34
Modules 74
Pages 115
Conclusion 155
There should be the author’s signature, but it should be modest
Afisha Food magazine cover
In the previous chapter, we announced that all the page blocks—layout modules—should be rectangular and jointly compose the bounding rectangle of the page or the screen. This does not mean that any layout design should be fully tiled with information. The priority is to make rectangles distinguishable. White space, or negarive space, is a rightful participant of layout design, while layout elements in modules should follow the rules of anchor objects.
This is a layered sandwich‑like layout.
Adjacent layers of the sandwich contrast each other, and that’s good. If the principle of alternation is ignored, the layers will blend into each other, and additional spacing or dividing rules won’t help.
But there are too many module layers—as much as nine. Therefore, the poster looks fragmented and complex.
In addition, the modules are not rectangular and have different sizes. As a result, they align poorly with each other and do not compose the bounding rectangle of the layout.
I recommend starting with the largest and most important anchor objects. In this case, it is the headline of the event. Anchor objects should be placed either at the edges of their rectangle, or in the visual center of an image. Since we assume that there are going to be several modules, we will set the vertical position arbitrarily. It is better not to divide the headline, the subhead and the beginning of the text.
Let’s add an illustration. The brown puddle should turn into green grass right away.
Normally, the reader scans the illustration before the text, so, to support the natural flow of reading, it is preferable to put it above the headline.
Having placed the illustration and the headline, we’ve answered the what question. Let’s answer the when and where questions by adding a layer with date and address. Note that the columns of the new module have the same height.
Let’s add lines that describe the cultural program. One of the elements of the list looks unsettled because of its length.
Of course, you may try to shorten the text of the first line. But it contains the important message about free consulting and the name of the sponsor.
Why not single out the feature from the overall range? Besides, there is another one—the Help booth. Now, there are too many layers—and we have not placed all the information yet.
Let’s replace and tint the features in the side column, aligning its height with the module.
The names and addresses of the organizations go to the footer, creating tiny columns of the same height. The logo subordinates to the module, too.
We free some space for phone numbers by lifting the illustration and the text. Now, the numbers have become a part of the footer module, so the logo has grown up a little.
Thus, we have composed the layout—it looks like a traditional poster of an event with a date.
Let’s attempt to place the call to action more logically—at the end.
Makes sense: the what goes first, followed by when and where. But now we violate all the principles of good layout design: anchor objects—date and headline—have smeared on the layout, neighboring layers have lost contrast, the largest part of the layout design has turned into a pile of text.
Therefore, we stick with the previous layout and take care of the nuances.
Let’s try to coordinate layout design elements, making it more consistent.
Let our illustration play with text, attract attention to it. We move the dad’s head into the date module. It is okay to adjust the illustration for that purpose.
Now, to the headline. Let’s detach the “event” word, change it to “charity playground,” get rid of the quotes and set the headline in a larger font size. The “charity playground” sticks to the top of the headline.
Let’s call such headline design a “label.” I suggest remembering it: it is useful for highlighting headlines and keywords. The label makes the headline look complete, dressed up, and more expensive. Label for a headline is the same as a serif for a type character, a cornice for a high building, a caption for an image. Usually, a label contrasts the headline: bold with regular, small caps with lower case.
Now, to the textual part. Let’s make colors and styles look like they do in Russian Afisha magazine. Then we highlight one of the features with “green grass,” following the style of illustration, to additionally connect parts of the layout.
Along the way, we organize vertical distances and line spacing according to the rule of the inner and the outer.
It is better to reduce the logo in the footer. Finally, let’s make the color accent on the phone numbers match the whole design.
In the previous chapter, we announced that all the page blocks—layout modules—should be rectangular and jointly compose the bounding rectangle of the page or the screen. This does not mean that any layout design should be fully tiled with information. The priority is to make rectangles distinguishable. White space, or negarive space, is a rightful participant of layout design, while layout elements in modules should follow the rules of anchor objects.
This is a layered sandwich‑like layout.
Adjacent layers of the sandwich contrast each other, and that’s good. If the principle of alternation is ignored, the layers will blend into each other, and additional spacing or dividing rules won’t help.
But there are too many module layers—as much as nine. Therefore, the poster looks fragmented and complex.
In addition, the modules are not rectangular and have different sizes. As a result, they align poorly with each other and do not compose the bounding rectangle of the layout.
I recommend starting with the largest and most important anchor objects. In this case, it is the headline of the event. Anchor objects should be placed either at the edges of their rectangle, or in the visual center of an image. Since we assume that there are going to be several modules, we will set the vertical position arbitrarily. It is better not to divide the headline, the subhead and the beginning of the text.
Let’s add an illustration. The brown puddle should turn into green grass right away.
Normally, the reader scans the illustration before the text, so, to support the natural flow of reading, it is preferable to put it above the headline.
Having placed the illustration and the headline, we’ve answered the what question. Let’s answer the when and where questions by adding a layer with date and address. Note that the columns of the new module have the same height.
Let’s add lines that describe the cultural program. One of the elements of the list looks unsettled because of its length.
Of course, you may try to shorten the text of the first line. But it contains the important message about free consulting and the name of the sponsor.
Why not single out the feature from the overall range? Besides, there is another one—the Help booth. Now, there are too many layers—and we have not placed all the information yet.
Let’s replace and tint the features in the side column, aligning its height with the module.
The names and addresses of the organizations go to the footer, creating tiny columns of the same height. The logo subordinates to the module, too.
We free some space for phone numbers by lifting the illustration and the text. Now, the numbers have become a part of the footer module, so the logo has grown up a little.
Thus, we have composed the layout—it looks like a traditional poster of an event with a date.
Let’s attempt to place the call to action more logically—at the end.
Makes sense: the what goes first, followed by when and where. But now we violate all the principles of good layout design: anchor objects—date and headline—have smeared on the layout, neighboring layers have lost contrast, the largest part of the layout design has turned into a pile of text.
Therefore, we stick with the previous layout and take care of the nuances.
Let’s try to coordinate layout design elements, making it more consistent.
Let our illustration play with text, attract attention to it. We move the dad’s head into the date module. It is okay to adjust the illustration for that purpose.
Now, to the headline. Let’s detach the “event” word, change it to “charity playground,” get rid of the quotes and set the headline in a larger font size. The “charity playground” sticks to the top of the headline.
Let’s call such headline design a “label.” I suggest remembering it: it is useful for highlighting headlines and keywords. The label makes the headline look complete, dressed up, and more expensive. Label for a headline is the same as a serif for a type character, a cornice for a high building, a caption for an image. Usually, a label contrasts the headline: bold with regular, small caps with lower case.
Now, to the textual part. Let’s make colors and styles look like they do in Russian Afisha magazine. Then we highlight one of the features with “green grass,” following the style of illustration, to additionally connect parts of the layout.
Along the way, we organize vertical distances and line spacing according to the rule of the inner and the outer.
It is better to reduce the logo in the footer. Finally, let’s make the color accent on the phone numbers match the whole design.
There should be the author’s signature, but it should be modest
Afisha Food magazine cover
before
after
Less of the layers, the font size bigger, the layout simpler and more solid
before
after
Less of the layers, the font size bigger, the layout simpler and more solid
Format, margins, and line spacing
Typographic layout is placed on a rectangular medium of a specific format: a book page, poster, screen, or even a wall. In fact, layout starts with defining the relations of two rectangles—content and medium.
The impression that layout design produces is strongly influenced by the relation of the upper and left side margins. Equal vertical and horizontal margins are likely a sign of weak, amateurish, careless layout. Proportions of margins may mathematically correspond to the proportions of the format or even of the letters of the used font, or may be reshaped intuitively in breadth or height.
Let’s make the lower margin bigger than the upper one to compensate the percepted “weight” of the content.
Format, margins, and line spacing
Typographic layout is placed on a rectangular medium of a specific format: a book page, poster, screen, or even a wall. In fact, layout starts with defining the relations of two rectangles—content and medium.
The impression that layout design produces is strongly influenced by the relation of the upper and left side margins. Equal vertical and horizontal margins are likely a sign of weak, amateurish, careless layout. Proportions of margins may mathematically correspond to the proportions of the format or even of the letters of the used font, or may be reshaped intuitively in breadth or height.
Let’s make the lower margin bigger than the upper one to compensate the percepted “weight” of the content.
Let’s double the basic format and switch to a dual structure—the book spread:
Book spread is an integral system, like a double‑barreled shotgun, or a two‑wheeled bike. Its halves are traditionally equal—margins are symmetric, the text tends to the center.
Van de Graaf’s book canon
Let’s double the basic format and switch to a dual structure—the book spread:
Van de Graaf’s book canon
Book spread is an integral system, like a double‑barreled shotgun, or a two‑wheeled bike. Its halves are traditionally equal—margins are symmetric, the text tends to the center.
But if we imagine a booklet folded in four, we will in fact get four formats. In this case, symmetry would be pointless, but every subformat preserves the selected relation of margins.
Finally, modular layout suggests not physical but logical division of format into smaller formats—modules.
But if we imagine a booklet folded in four, we will in fact get four formats. In this case, symmetry would be pointless, but every subformat preserves the selected relation of margins.
Finally, modular layout suggests not physical but logical division of format into smaller formats—modules.