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
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.
Modules can be separated by empty space or rules, surrounded by frames, or filled with color. But each module has its own margins—on the sides, top, and bottom. Layout designer always controls the relations of the margins with each other and with the content of the module.
Window display of the Nordic Museum. Layout design: Stockholm Design Lab
I invite the reader to check out these proportions in the example on the right. A window serves as a medium of its own format.
Novice designers should remember that by adding color boxes, rules, or frames they always create a new format with its own content and proportions of margins. Vertical and horizontal margins of the format should not be equal, and the bottom margin should be bigger than the upper one.
An important consequence is that distances around horizontal boundaries between the modules can not be equal: for example, spacing above and below a horizontal rule, above and below the edge of a color box.
Modules can be separated by empty space or rules, surrounded by frames, or filled with color. But each module has its own margins—on the sides, top, and bottom. Layout designer always controls the relations of the margins with each other and with the content of the module.
I invite the reader to check out these proportions in the example on the right. A window serves as a medium of its own format.
Window display of the Nordic Museum. Layout design: Stockholm Design Lab
Novice designers should remember that by adding color boxes, rules, or frames they always create a new format with its own content and proportions of margins. Vertical and horizontal margins of the format should not be equal, and the bottom margin should be bigger than the upper one.
An important consequence is that distances around horizontal boundaries between the modules can not be equal: for example, spacing above and below a horizontal rule, above and below the edge of a color box.
Anton Kulikov addressed the “Tips” with a question about line spacing and vertical distances: “What can I do with line spacing in text blocks with different font sizes? How do I find and maintain a ‘vertical rhythm’?” On the right is a picture sent by Anton.
First, let’s remove the baseline grid. Before main relations between layout elements are settled, the grid only imposes unnecessary restrictions.
Line spacing is influenced by type size, length of the line and dimensions of the format. The longer the line by number of words, the more line spacing is required. Vice versa, too narrow column with short lines looks ugly even with standard line spacing. In that case, line spacing should be slightly reduced.
The format is a module, a framing rectangle, or a page on which the type is set. By the rule of the inner and the outer, margins around text should be larger than spacing between its lines. Therefore, if the format is too small, as on the given example, font size and line spacing should not be too big: there is no room for large margins.
In the left version, the font size is so big that the lines look short and ragged on the right, and the text block is too tight for large type characters. So, let’s use the version on the right as a starting point.
The headline violates the rule of the inner and the outer. It should be visually connected with the text, but is placed halfway between the text and the picture.
Let’s move it closer. By the rule of the inner and the outer, space between the underlining of the headline link and the text should not be less than line spacing of the text, so the headline would not interfere with line spacing of the text and intrude its territory.
Note the pink rectangle.
This small rectangle determines the impression that layout produces, as it defines the relation of upper and side margins. Proven technique is to make the proportions of this rectangle correspond to the format. If the format—a color box or a page—is vertically shaped, let the rectangle be vertical. If the format is horizontally shaped—let the rectangle be horizontal. It is not necessary to strictly follow this rule. What is more important is making the proportions meaningful. But in any case, a plain square in the corner is a possible sign of a weak, amateurish, careless layout design.
Let me remind you the sequence: the length of the line → line spacing → the distance to the headline → left margin → upper margin → repeat if necessary.
I would recommend to make the extra‑thick frames more discreet.
Or maybe even remove them completely. But now that the text at the bottom has lost its frames and own margins, it is no longer perceived as an independent module. Thus, the illustration and the text compose a single rectangle that looks disproportionately high.
To “reconcile” the picture with the text, let’s simply reduce line spacing and margins, while checking and adjusting the proportions of the inner and the outer.
Anton Kulikov addressed the “Tips” with a question about line spacing and vertical distances: “What can I do with line spacing in text blocks with different font sizes? How do I find and maintain a ‘vertical rhythm’?” On the right is a picture sent by Anton.
First, let’s remove the baseline grid. Before main relations between layout elements are settled, the grid only imposes unnecessary restrictions.
Line spacing is influenced by type size, length of the line and dimensions of the format. The longer the line by number of words, the more line spacing is required. Vice versa, too narrow column with short lines looks ugly even with standard line spacing. In that case, line spacing should be slightly reduced.
The format is a module, a framing rectangle, or a page on which the type is set. By the rule of the inner and the outer, margins around text should be larger than spacing between its lines. Therefore, if the format is too small, as on the given example, font size and line spacing should not be too big: there is no room for large margins.
In the left version, the font size is so big that the lines look short and ragged on the right, and the text block is too tight for large type characters. So, let’s use the version on the right as a starting point.
The headline violates the rule of the inner and the outer. It should be visually connected with the text, but is placed halfway between the text and the picture.
Let’s move it closer. By the rule of the inner and the outer, space between the underlining of the headline link and the text should not be less than line spacing of the text, so the headline would not interfere with line spacing of the text and intrude its territory.
Note the pink rectangle.
This small rectangle determines the impression that layout produces, as it defines the relation of upper and side margins. Proven technique is to make the proportions of this rectangle correspond to the format. If the format—a color box or a page—is vertically shaped, let the rectangle be vertical. If the format is horizontally shaped—let the rectangle be horizontal. It is not necessary to strictly follow this rule. What is more important is making the proportions meaningful. But in any case, a plain square in the corner is a possible sign of a weak, amateurish, careless layout design.
Let me remind you the sequence: the length of the line → line spacing → the distance to the headline → left margin → upper margin → repeat if necessary.
I would recommend to make the extra‑thick frames more discreet.
Or maybe even remove them completely. But now that the text at the bottom has lost its frames and own margins, it is no longer perceived as an independent module. Thus, the illustration and the text compose a single rectangle that looks disproportionately high.
To “reconcile” the picture with the text, let’s simply reduce line spacing and margins, while checking and adjusting the proportions of the inner and the outer.