Artem Gorbunov

Typography and layout

It is convenient to leaf through a book not only with mouse scrolling, but also with arrow keys:

http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
between important places
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
Shift
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
between
spreads

To my grandfather–Valery Gorbunov, a writer, a journalist and a witty person

Artem Gorbunov

Typography and layout

Bureau Gorbunov Publishing
2017

© 2017 Artem Gorbunov

Published by Bureau Gorbunov

All rights reserved. No part of this book may be reproduced in any form without written permission of the copyright owner.

Table of contents

1
Layout
basics

Rule of internal and external

Typographers have been searching for patterns of interactions between the elements of type for centuries. Letters and letter spacing, line length and height, type area and page margins⁠—each finding took its place in the bottomless pool of “golden rules”:

Typographers have been searching for patterns of interactions between the elements of type for centuries. Letters and letter spacing, line length and height, type area and page margins⁠—each finding took its place in the bottomless pool of “golden rules”:

increase letter spacing of text in all caps
reduce letter spacing of text in lowercase
letters should be spaced so that their vertical strokes stand at equal intervals
spacing between uppercase letters should be less than line spacing
spacing between lines of text in all caps should not be less than the height of the letters
line spacing should be bigger than spacing between words
when line spacing is minimal, descending and ascending strokes of adjacent lines almost touch
the longer the line of text, the more line spacing it requires
line spacing should not be bigger than external margins of text
list elements should have additional space between them that is bigger than standard line spacing
page number should be placed closer to the type area than to the edge of the page
heading in the text should be closer to the next paragraph than to the previous one
distance between the heading and the paragraph should not be less than line spacing in the heading

Nowadays, designers have to collect the scattered clues of meaning from books, their colleagues and art directors.

It is difficult to remember even the abovementioned rules, and if a designer somehow manages to memorize his own set of guidelines, there will always be those that he has never heard of⁠—because the pool of knowledge is bottomless.

It is one thing to learn a huge set of rules, but completely another is to be able to consistently apply them to each part of layout design. And in reality, a novice layout designer commits dozens of mistakes even if he deals with a simple page consisting of a headline and a text.

Instead of memorizing a thousand rules, I suggest to remember one single principle and learn how to consistently apply it to all elements of layout design.

“The rule of internal and external” is a basic principle of typography that works at all levels: from a single letter to a page spread.

This rule is a special case of gestalt laws. Every typographic object at any level consists of other objects. Letters are built of character strokes, words of letters, strings of words, paragraphs of strings.

To separate letters, words, strings and paragraphs from their neighbors, internal distances inside objects should be less than external, giving them independent significance.

of natural sciences Museum
Museum
of natural sciences
New York
Museum
of natural sciences

Let’s have a look at a heading set in all capital letters.

The strokes of each letter serve as boundaries for its inner space. Empty space inside letter U in the middle of the word is bigger than external distance between it and neighboring letters. Because of it, there is a feeling that these letters have invaded each other’s personal space, and the whole title looks jammed.

Let’s increase spacing between letters to change the proportion of internal and external. Each letter has gained importance and independence, and the heading has obtained architectural solemnity.

Let’s add some words to the heading. They are separated by spaces. The space between letters in each word plays the role of “internal” and the space between words plays the role of “external”. Because this space is only a little bigger than the spacing between letters, the words look jammed again.

First, let’s try to change the proportion of internal and external by reducing the “internal”—the spacing between letters. But it should not become smaller than inner spacing between letter strokes. Always keep in mind that “internal” at one level is “external” at the other.

Now, instead of reducing the letter spacing, let’s try to separate words in a different way⁠—by moving them to the next line. Line spacing is comparable to spacing between letters. Because of this, the letters of the title form an ugly chessboard-like pattern.

Let’s increase the “external”—the line spacing. The title has restored its imperial dignity.

And what if instead of increasing the line height we use a narrower font?

Narrow letters contain smaller internal gaps, so they do not require big spacing around them. With the same type size and line spacing, words are better separated from each other. The title has become more compact without damage to the internal space.

Let’s return to the “imperial style” title and add a subhead to it. The subhead has invaded the line spacing of the heading: it is closer to the heading than the heading’s own lines are to each other.

No problem, let’s increase the “external”.

Let’s say our heading should fit on a plate of fixed dimensions. The title has entered into a conflict of internal and external with its own frame.

We’ll have to walk down all levels and reduce internal spacing, preserving the contrast of internal and external.


Let’s note that for the same font size we have obtained different acceptable proportions of internal and external spacing. Contrast is more important than the specific ratio⁠—this gives flexibility to layout designer. The “perfect typography” is just a page with the smallest effective contrast of the inner and the outer of typographic elements for calm and comfortable reading. As the contrast between the internal and external increases, the text becomes more noticeable and expressive.

Basic rule of typography:

internal ≤ external
Empty space inside letter U in the middle of the word is bigger than external distance between it and neighboring letters
Each letter has gained importance and independence, and the heading has obtained architectural solemnity
For each word, the spacing between letters has a role of “internal”, and the space between words has a role of “external”
Spacing is the same, but now it’s enough to separate words
Line spacing is comparable to spacing between letters. Because of this, the letters of the title form an ugly chessboard pattern
The title has restored its imperial dignity
Line spacing is comparable to spacing between letters. Because of this, the letters of the title form an ugly chessboard pattern
Instead of increasing the line height let’s use a narrower font
With the same type size and line spacing, words are better separated from each other
The subhead invaded the line spacing of the heading: it is closer to the heading than the headingʼs own lines are to each other
Let’s move the subhead to a distance not less than the spacing between the heading’s lines
The title has entered into a conflict of internal and external with its own frame
Contrast of internal and external at all levels⁠—from spaces inside letters to outer edges of the title