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

8 pages omitted

Rec­tan­gles serve not only as el­e­ments of lay­out but as the space be­tween them. De­signer Sergey Serov wrote about Swiss typography:


Kak.ru

“Here we ‘save on week­days, go big on hol­i­days.’ We ac­cu­mu­late grey tone in one place, sav­ing it drop by drop in each string, then shoot with black and white in an­other. We cre­ate a de­scent for a sec­tion, al­lo­cate a spe­cial white box for a head­line, sub­head, pic­ture cap­tion or any other ty­po­graph­i­cal el­e­ment and that au­to­mat­i­cally gives it ex­cep­tional vi­sual importance.”

Die Zeit newspaper spread

Die Zeit newspaper spread

Rectangles serve not only as elements of layout but as the space between them. Designer Sergey Serov wrote about Swiss typography:

“Here we ‘save on weekdays, go big on holidays.’ We accumulate grey tone in one place, saving it drop by drop in each string, then shoot with black and white in another. We create a descent for a section, allocate a special white box for a headline, subhead, picture caption or any other typographical element and that automatically gives it exceptional visual importance.”

Kak.ru

Web page and user in­ter­face el­e­ments come in all shapes and sizes: nav­i­ga­tion bars, menus, but­tons, icons, tool­bars, news feeds, teasers, in­put fields, wid­gets, and side­bars. Text is out­put from the data­base and has un­pre­dictable length. At­tempts to square off con­tem­po­rary on­line me­dia into Swiss mod­u­lar grids look strained and for­mal, like on The Grid Sys­tem website.

A way to or­ga­nize in­for­ma­tion neatly is flex­i­ble mod­u­lar lay­out. Prin­ci­ple: lay­out de­sign should be “sliced” into neat, non‑over­lap­ping rec­tan­gu­lar mod­ules. For ex­am­ple, like on the cover of Glavbukh on­line magazine.

The mod­ules should not over­lap or cram into each other. They should be rec­tan­gu­lar, have aligned width and height, and com­pose the over­all rec­tan­gle of a page or a screen. It is not nec­es­sary to com­pletely fill the mod­ules with in­for­ma­tion⁠—it is more im­por­tant to make rec­tan­gles read­able. White space, or neg­a­tive space, is a right­ful mem­ber of lay­out de­sign that should have a sim­ple rec­tan­gu­lar shape too. Lay­out el­e­ments in mod­ules should fol­low the rule of an­chor objects.

Modular layout
is about dividing rectangles

Version of The Grid System web page.
Elements don’t fit into the cells of the grid

Cover of Glavbukh online magazine

Version of The Grid System web page.
Elements don’t fit into the cells of the grid

Cover of Glavbukh online magazine

Web page and user interface elements come in all shapes and sizes: navigation bars, menus, buttons, icons, toolbars, news feeds, teasers, input fields, widgets, and sidebars. Text is output from the database and has unpredictable length. Attempts to square off contemporary online media into Swiss modular grids look strained and formal, like on The Grid System website.

A way to organize information neatly is flexible modular layout. Principle: layout design should be “sliced” into neat, non‑overlapping rectangular modules. For example, like on the cover of Glavbukh online magazine.

The modules should not overlap or cram into each other. They should be rectangular, have aligned width and height, and compose the overall rectangle of a page or a screen. It is not necessary to completely fill the modules with information⁠—it is more important to make rectangles readable. White space, or negative space, is a rightful member of layout design that should have a simple rectangular shape too. Layout elements in modules should follow the rule of anchor objects.

Modular layout
is about dividing rectangles

The visual center is placed higher than the geometrical to compensate the percepted effect of gravity

Rule of anchor objects

Anchor objects are the most substantial objects on a page: illustrations, headlines, factoids, logos, and icons. A simple paragraph of text also acts as an anchor object if it is surrounded by emptiness, or negative space.

Rectangle is the basic shape of modular layout. All modules of layout design should be rectangular, jointly composing the bounding rectangle of the page or the screen.

The rule states that any anchor object should tend to or settle in one of the corners or in the visual center of the rectangle.

Rule of anchor objects

An­chor ob­jects are the most sub­stan­tial ob­jects on a page: il­lus­tra­tions, head­lines, fac­toids, lo­gos, and icons. A sim­ple para­graph of text also acts as an an­chor ob­ject if it is sur­rounded by empti­ness, or neg­a­tive space.

Rec­tan­gle is the ba­sic shape of mod­u­lar lay­out. All mod­ules of lay­out de­sign should be rec­tan­gu­lar, jointly com­pos­ing the bound­ing rec­tan­gle of the page or the screen.

The rule states that any an­chor ob­ject should tend to or set­tle in one of the cor­ners or in the vi­sual cen­ter of the rectangle.

The visual center is placed higher than the geometrical to compensate the percepted effect of gravity

Anchor objects tend to one of the corners or to the visual center of their rectangle

Binding of anchor objects is obvious if there is “air” around them

Note how the form of the large checkmark obstructs its anchoring in the corner

Secondary elements of the module attach to anchor objects and shift them from their anchoring points

The overall construction will be preserved if you follow the principle of modularity

Layout has collapsed

The headline and the icon have lost contrast. The checkmark and the address have become anchor objects

Each of the rectangles to the right looks alright.

The principle requires that the anchoring position of the object is obvious. For this purpose, the “free floating” sides of the anchor object should be surrounded by white space or less dense and visible objects.

In my experience, the most common beginner mistake is to forget about the “air.”

There should always be some free space on the ragged right side of the text. Then, the “rag” looks the way it should⁠—like a rag.

In real life, you rarely have to design a page with a single object. Secondary elements of the module attach to anchor objects and sometimes even slightly shift them from their anchoring points.

The objects bead on each other, like a necklace. The overall construction will be preserved if you follow the principle of modularity: align the objects by width and height and keep the rectangular shape of modules.

But anchor objects always jump out of layout. If they are not anchored, the layout will collapse.

An element can suddenly become an anchor object, i. e. a more substantial one, not only when enlarged, but with the change of colors.

Each of the rec­tan­gles to the right looks alright.

The prin­ci­ple re­quires that the an­chor­ing po­si­tion of the ob­ject is ob­vi­ous. For this pur­pose, the “free float­ing” sides of the an­chor ob­ject should be sur­rounded by white space or less dense and vis­i­ble objects.

In my ex­pe­ri­ence, the most com­mon be­gin­ner mis­take is to for­get about the “air.”

There should al­ways be some free space on the ragged right side of the text. Then, the “rag” looks the way it should⁠—like a rag.

In real life, you rarely have to de­sign a page with a sin­gle ob­ject. Sec­ondary el­e­ments of the mod­ule at­tach to an­chor ob­jects and some­times even slightly shift them from their an­chor­ing points.

The ob­jects bead on each other, like a neck­lace. The over­all con­struc­tion will be pre­served if you fol­low the prin­ci­ple of mod­u­lar­ity: align the ob­jects by width and height and keep the rec­tan­gu­lar shape of modules.

But an­chor ob­jects al­ways jump out of lay­out. If they are not an­chored, the lay­out will collapse.

An el­e­ment can sud­denly be­come an an­chor ob­ject, i. e. a more sub­stan­tial one, not only when en­larged, but with the change of colors.

Anchor objects tend to one of the corners or to the visual center of their rectangle

Binding of anchor objects is obvious if there is “air” around them

Note how the form of the large checkmark obstructs its anchoring in the corner

Secondary elements of the module attach to anchor objects and shift them from their anchoring points

The overall construction will be preserved if you follow the principle of modularity

Layout has collapsed

The headline and the icon have lost contrast. The checkmark and the address have become anchor objects

An­chor ob­ject can be at­tached not only to the point but to one of the sides of the rectangle.

An­chor­ing to sides looks calm.

Anchor object can be attached not only to the point but to one of the sides of the rectangle.

Anchoring to sides looks calm.

57 pages omitted
Book­marks
Add book­marks
Noth­ing found