Artem Gorbunov

Typography and layout

It is con­ve­nient to leaf through a book us­ing the mouse scrolling and ar­row 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
be­tween im­por­tant 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
be­tween
spreads

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

Artem Gor­bunov

Typography and layout

Bu­reau Gor­bunov Pub­lish­ing
2017

© 2017 Artem Gorbunov

Pub­lished by Bu­reau Gorbunov

All rights re­served. No part of this book may be re­pro­duced in any form with­out writ­ten per­mis­sion of the copy­right owner.

Table of contents

1
Layout
basics

The rule of the inner and the outer

Ty­pog­ra­phers have been search­ing for pat­terns of in­ter­ac­tions be­tween ty­po­graph­i­cal el­e­ments for cen­turies. Let­ters and let­ter spac­ing, string length and height, type area and page mar­gins⁠—each find­ing took its place in the bot­tom­less pool of “golden rules”:

Ty­pog­ra­phers have been search­ing for pat­terns of in­ter­ac­tions be­tween ty­po­graph­i­cal el­e­ments for cen­turies. Let­ters and let­ter spac­ing, string length and height, type area and page mar­gins⁠—each find­ing took its place in the bot­tom­less pool of “golden rules”:

increase letter spacing of text in all caps
reduce letter spacing of text in lowercase
letters should be placed so that their vertical strokes stand at equal intervals
spacing between all caps letters should be less than line spacing
spacing between strings 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 neighboring lines almost touch
the longer the string of text, the more line spacing it requires
line spacing should not be bigger than outer margins of text
list elements should have additional indents between them that are bigger than line spacing
page number should be placed closer to the type area than to the edge of the page
headline of the text should be closer to the next paragraph than to the previous one
distance between the headline and the paragraph should not be less than line spacing of the headline

Nowa­days, de­sign­ers have to col­lect the scat­tered clues of mean­ing from books, their col­leagues and art directors.

It is dif­fi­cult to re­mem­ber even the above­men­tioned rules, and if a de­signer some­how man­ages to mem­o­rize his own set of guide­lines, there will al­ways be those that he has never heard of⁠—be­cause the pool of knowl­edge is bottomless.

It is one thing to learn a huge set of rules, but com­pletely an­other is to be able to con­sis­tently ap­ply them to each part of lay­out de­sign. And in re­al­ity, a novice lay­out de­signer com­mits dozens of mis­takes even if he deals with a sim­ple page con­sist­ing of a head­line and a text.

In­stead of mem­o­riz­ing a thou­sand rules, I sug­gest re­mem­ber­ing one sin­gle prin­ci­ple and learn how to con­sis­tently ap­ply it to all el­e­ments of lay­out design.

“The rule of the in­ner and the outer” is a ba­sic prin­ci­ple of ty­pog­ra­phy that works at all lev­els: from a sin­gle let­ter to a page spread.

This rule is a spe­cial case of gestalt laws. Every ty­po­graphic ob­ject at any level con­sists of other ob­jects. Let­ters are built of char­ac­ter strokes, words of let­ters, strings of words, para­graphs of strings.

To sep­a­rate let­ters, words, strings and para­graphs from their neigh­bors, in­ner dis­tances in­side ob­jects should be less than outer, giv­ing them in­de­pen­dent significance.

of nat­ural sci­ences Mu­seum
Mu­seum
of nat­ural sci­ences
New York
Mu­seum
of nat­ural sci­ences

Let’s have a look at a head­ing set in all caps.

The strokes of each let­ter serve as bound­aries for its in­ner space. Empty space in­side let­ter U in the mid­dle of the word is big­ger than outer dis­tance be­tween it and neigh­bor­ing let­ters. So, there is a feel­ing that these let­ters have in­vaded each other’s per­sonal space, and the whole ti­tle looks jammed.

Let’s in­crease spac­ing be­tween let­ters to change the pro­por­tion of the in­ner and the outer. Each let­ter has be­come im­por­tant and in­de­pen­dent, and the head­ing has ob­tained ar­chi­tec­tural solemnity.

Let’s add some words to the head­ing. They are sep­a­rated by spaces. The space be­tween let­ters in each word plays a role of the “in­ner” and the space be­tween words has a role of the “outer”. Be­cause this space is only a lit­tle big­ger than the spac­ing be­tween let­ters, the words look jammed again.

First, let’s try to change the pro­por­tion of in­ner and outer by re­duc­ing the “in­ner”—the spac­ing be­tween let­ters. But it should not be­come smaller than the in­ner spac­ing be­tween let­ter strokes. Al­ways keep in mind that “in­ner” at one level is “outer” at the other.

Now, in­stead of re­duc­ing the let­ter spac­ing, let’s try to sep­a­rate words in a dif­fer­ent way⁠—by mov­ing them to the next string. Line spac­ing is com­pa­ra­ble to spac­ing be­tween let­ters. Be­cause of this, the let­ters of the ti­tle form an ugly chess­board‑like pattern.

Let’s in­crease the “outer”—the line spac­ing. The ti­tle has re­stored its im­pe­r­ial dignity.

And what if in­stead of in­creas­ing the height of the string we use a nar­rower font?

Nar­row let­ters con­tain smaller in­ner gaps, so they do not re­quire much space around them. With the same type size and line spac­ing, words are bet­ter sep­a­rated from each other. The ti­tle has be­come more com­pact with­out dam­age to the in­ner space.

Let’s re­turn to the “im­pe­r­ial style” ti­tle and add a sub­head to it. The sub­head has in­vaded line spac­ing of the head­ing: it is closer to the head­ing than own strings of the head­ing are to each other.

No prob­lem, let’s in­crease the “outer”.

Let’s say our head­ing should fit on a plate with cer­tain di­men­sions. The ti­tle is now in a con­flict of the in­ner and the outer with its own frame.

We’ll have to climb down all lev­els and re­duce in­ner spac­ing, pre­serv­ing the con­trast of the in­ner and the outer.


Let’s note that for the same font size we have ob­tained dif­fer­ent ac­cept­able pro­por­tions of in­ner and outer spac­ing. Con­trast is more im­por­tant than the spe­cific ra­tio⁠—that way lay­out de­signer has flex­i­bil­ity. The “per­fect ty­pog­ra­phy” is just a page with the small­est pos­si­ble con­trast be­tween the in­ner and the outer of ty­po­graphic el­e­ments for a calm and com­fort­able read­ing. As the con­trast be­tween the in­ner and the outer grows, the text be­comes more no­tice­able and expressive.

Ba­sic rule of typography:

in­ner ≤ outer
Empty space inside letter U in the middle of the word is bigger than outer 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 the “innner”, and the space between words has a role of the “outer”
Space 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 has invaded the line spacing of the heading: it is closer to the heading than own strings of the heading are to each other
Let’s move the subhead to a distance not less than the spacing between the strings of the heading
The title is now in conflict of the inner and the outer with its own frame
Contrast of the inner and the outer at all levels⁠—from spaces inside letters to outer edges of the title