Artem Gor­bunov

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 newspaperman, and a witty person

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

Artem Gor­bunov

Typography and layout

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

Typography and layout

Bureau Gorbunov Publishing
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.
ISBN 978‑5‑6041629‑7‑2

Table of contents

    Lay­out ba­sics 4

    Ba­sic el­e­ments 34

    Mod­ules 74

    Pages 115

    Con­clu­sion 155

© 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.
ISBN 978‑5‑6041629‑7‑2

Table of contents

    Layout basics 4

    Basic elements 34

    Modules 74

    Pages 115

    Conclusion 155

1
Layout
basics

the rule of the inner and the outer

modularity

rule of anchor objects

format, margins and line spacing

point, line and rectangle

from geometry to typography

The rule of the inner and the outer

Typographers have been searching for patterns of interactions between typographical elements for centuries. Letters and letter spacing, string 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 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 adjacent 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

1
Layout
basics

the rule of the in­ner and the outer

modularity

rule of an­chor objects

for­mat, mar­gins and line spacing

point, line and rectangle

from geom­e­try to typography

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 adjacent 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.

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 remembering one single principle and learn how to consistently apply it to all elements of layout design.

“The rule of the inner and the outer” 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, inner distances inside objects should be less than outer, giving them independent significance.

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

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

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 outer distance between it and neighboring letters. So, 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 the inner and the outer. Each letter has become important and independent, 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 a role of the “inner” and the space between words has a role of the “outer.” 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 inner and outer by reducing the “inner”—the spacing between letters. But it should not become smaller than the inner spacing between letter strokes. Always keep in mind that “inner” at one level is “outer” 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 string. 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 “outer”—the line spacing. The title has restored its imperial dignity.

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

Narrow letters contain smaller inner gaps, so they do not require much space 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 inner 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 own strings of the heading are to each other.

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

Let’s say our heading should fit on a plate with certain dimensions. The title is now in a conflict of the inner and the outer with its own frame.

We’ll have to climb down all levels and reduce inner spacing, preserving the contrast of the inner and the outer.


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

Basic rule of typography:

inner ≤ outer

of nat­ural sci­encesMu­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 the 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

Book­marks
Add book­marks
Noth­ing found