Артём Горбунов

Типографика и вёрстка

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

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
между важными местами
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
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая кни­га Издатель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фи­ке и вёрст­ке с акцен­том на маке­ти­ро­ва­нии для экра­на. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

К сожа­ле­нию, из мно­го­чис­лен­ных книг о типо­гра­фи­ке и модуль­ных сет­ках оста­ёт­ся непо­нят­но, как имен­но собрать выра­зи­тель­ный макет с проч­ной кон­струк­ци­ей. В луч­шем слу­чае дизай­не­ру оста­ёт­ся выужи­вать кру­пи­цы смыс­ла и копи­ро­вать удач­ные примеры.

«Типогра­фи­ка и вёрст­ка» после­до­ва­тель­но отве­ча­ет на вопрос как. Автор вво­дит прин­ци­пы модуль­но­сти и якор­ных объ­ек­тов, пра­ви­ло внут­рен­не­го и внеш­не­го. Затем шаг за шагом нагляд­но объ­яс­ня­ет, как добить­ся акку­рат­ной и плот­ной вёрст­ки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15

Оглавление

удк 655.262
ббк 85.15
г67
г67
Гор­бу­нов А. С.
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая кни­га Издатель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фи­ке и вёрст­ке с акцен­том на маке­ти­ро­ва­нии для экра­на. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

К сожа­ле­нию, из мно­го­чис­лен­ных книг о типо­гра­фи­ке и модуль­ных сет­ках оста­ёт­ся непо­нят­но, как имен­но собрать выра­зи­тель­ный макет с проч­ной кон­струк­ци­ей. В луч­шем слу­чае дизай­не­ру оста­ёт­ся выужи­вать кру­пи­цы смыс­ла и копи­ро­вать удач­ные примеры.

«Типогра­фи­ка и вёрст­ка» после­до­ва­тель­но отве­ча­ет на вопрос как. Автор вво­дит прин­ци­пы модуль­но­сти и якор­ных объ­ек­тов, пра­ви­ло внут­рен­не­го и внеш­не­го. Затем шаг за шагом нагляд­но объ­яс­ня­ет, как добить­ся акку­рат­ной и плот­ной вёрст­ки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15

Оглавление

Скрыто 14 разворотов

Афиша
Андрея
Коржица

Применение модульности и якорных объектов

В руб­ри­ку «сове­ты» на сай­те бюро обра­тил­ся Андрей Кор­жиц с прось­бой помочь улуч­шить афишу:

«Хоте­лось бы узнать ваши заме­ча­ния по раз­ме­ще­нию тек­сто­вой инфор­ма­ции. Исполь­зо­ва­лось три кег­ля (не счи­тая офи­ци­аль­ной обя­за­тель­ной над­пи­си вни­зу вось­мым кег­лем) и две гарнитуры».

Применение модульности и якорных объектов

В руб­ри­ку «сове­ты» на сай­те бюро обра­тил­ся Андрей Кор­жиц с прось­бой помочь улуч­шить афишу:

«Хоте­лось бы узнать ваши заме­ча­ния по раз­ме­ще­нию тек­сто­вой инфор­ма­ции. Исполь­зо­ва­лось три кег­ля (не счи­тая офи­ци­аль­ной обя­за­тель­ной над­пи­си вни­зу вось­мым кег­лем) и две гарнитуры».

Афиша
Андрея
Коржица

Подпись автора должна быть скромной, но без неё нельзя

Обложка журнала «Афиша‑Еда»

В про­шлой гла­ве мы объ­яви­ли, что все бло­ки — моду­ли маке­та — долж­ны иметь пря­мо­уголь­ную фор­му и состав­лять вме­сте общий пря­мо­уголь­ник стра­ни­цы или экра­на, кото­рым они огра­ни­че­ны. Это не зна­чит, что любой макет дол­жен быть запол­нен инфор­ма­ци­ей, как ван­ная ком­на­та плит­кой — глав­ное, чтобы пря­мо­уголь­ни­ки чита­лись. В вёрст­ке пол­но­прав­но участ­ву­ет пусто­та, или контр­про­стран­ство, а эле­мен­ты вёрст­ки в моду­лях долж­ны сле­до­вать пра­ви­лу якор­ных объектов.

Макет устро­ен по прин­ци­пу сендвича.

Сосед­ние слои бутер­бро­да кон­тра­сти­ру­ют друг с дру­гом, и это хоро­шо. Если не исполь­зо­вать прин­цип чере­до­ва­ния, слои нач­нут сли­вать­ся, и тогда не спа­сут ни линей­ки, ни допол­ни­тель­ные отступы.

Но сло­ёв‑моду­лей слиш­ком мно­го — целых девять. Из‑за это­го афи­ша выгля­дит дроб­ной и сложной.

Кроме того, сами моду­ли не пря­мо­уголь­ны и име­ют раз­ные раз­ме­ры. Поэто­му они пло­хо сты­ку­ют­ся друг с дру­гом и не состав­ля­ют общий пря­мо­уголь­ник макета.

Я реко­мен­дую начи­нать с самых круп­ных и важ­ных, якор­ных объ­ек­тов. В дан­ном слу­чае это заго­ло­вок акции. Якор­ные объ­ек­ты долж­ны нахо­дить­ся либо у кра­ёв сво­е­го пря­мо­уголь­ни­ка, либо в визу­аль­ном цен­тре. Посколь­ку мы пред­по­ла­га­ем, что моду­лей будет несколь­ко, пока выбе­рем про­из­воль­ную высо­ту. Заголо­вок, под­за­го­ло­вок и нача­ло тек­ста луч­ше не разрывать.

Доба­вим иллю­стра­цию. Корич­не­вую лужу сра­зу заме­ним на зелё­ную травку.

На самом деле, кар­тин­ку заме­тят рань­ше тек­ста, поэто­му для есте­ствен­но­го чте­ния иллю­стра­цию луч­ше ста­вить выше заголовка.

Поста­вив кар­тин­ку и заго­ло­вок, мы отве­ти­ли на вопрос что. Отве­тим на вопро­сы когда и где, доба­вив этаж с датой и адре­сом. Обрати­те вни­ма­ние, что колон­ки ново­го моду­ля име­ют оди­на­ко­вую высоту.

Доба­вим стро­ки куль­тур­ной про­грам­мы. Один из эле­мен­тов спис­ка явно выби­ва­ет­ся по длине.

Конеч­но, мож­но попы­тать­ся сокра­тить первую строч­ку. Но в ней содер­жит­ся важ­ное сооб­ще­ние о бес­плат­ных кон­суль­та­ци­ях и назва­ние спонсора.

Почему бы не выде­лить «фичу» из обще­го ряда, к тому же есть и дру­гая — палат­ка помощи. Получа­ет­ся слиш­ком мно­го эта­жей — а ведь мы ещё не раз­ме­сти­ли всю информацию.

Переста­вим и под­кра­сим фичи в боко­вой колон­ке, при­дав ей высо­ту модуля.

Назва­ния и адре­са орга­ни­за­ций рас­ста­вим в под­ва­ле в виде коло­но­чек оди­на­ко­вой высо­ты. Лого­тип тоже под­чи­ним модулю.

Освобо­дим место для теле­фо­нов, под­няв иллю­стра­цию и тек­сто­вую часть. Телефо­ны ста­ли частью под­валь­но­го моду­ля, поэто­му лого­тип подрос.

Итак, мы собра­ли кон­струк­цию — полу­чи­лась тра­ди­ци­он­ная афи­ша собы­тия с датой.

Попро­бу­ем поста­вить при­зыв к дей­ствию в более логич­ное место — в конец.

Получа­ет­ся непло­хо по смыс­лу — сна­ча­ла что, потом уже когда и куда. Однако нару­ша­ют­ся сра­зу все прин­ци­пы хоро­шей кон­струк­ции: якор­ные объ­ек­ты — заго­ло­вок и даты — рас­плы­лись по маке­ту, сосед­ние эта­жи не кон­тра­сти­ру­ют, боль­шая часть маке­та пре­вра­ти­лась в гру­ду текста.

Поэто­му мы оста­но­вим­ся на преды­ду­щей ком­по­нов­ке и зай­мём­ся нюансами.

Поста­ра­ем­ся согла­со­вать эле­мен­ты маке­та, сде­лав его более цельным.

Пусть наша иллю­стра­ция поиг­ра­ет с тек­стом, при­вле­чёт к нему вни­ма­ние. Выдви­нем папи­ну голо­ву в модуль с датой, для это­го не грех скор­рек­ти­ро­вать картинку.

Обратим­ся к заго­лов­ку. Отце­пим сло­во «акция», изба­вим­ся от кавы­чек и набе­рём заго­ло­вок круп­нее. Слово «акция» при­кле­им к нача­лу заголовка.

Назо­вём такую кон­струк­цию заго­лов­ка «бир­кой». Сове­тую её запом­нить: она удоб­на для выде­ле­ния руб­рик и клю­че­вых слов. Бирка дела­ет заго­ло­вок закон­чен­ным, оде­тым и более доро­гим. Бирка для заго­лов­ка — то же, что засеч­ка для бук­вы, кар­низ для зда­ния, под­пись для кар­тин­ки. Как пра­ви­ло, бир­ка кон­тра­сти­ру­ет с заго­лов­ком: жир­ный с нежир­ным, капи­тель со строчными.

Теперь смыс­ло­вая тек­сто­вая часть. Разве­се­лим по‑афи­шев­ски (т. е. в сти­ле жур­на­лов «Афиши») стро­ки спис­ка цве­та­ми и сти­ля­ми. Одну из «фич» выде­лим зелё­ной трав­кой в сти­ле иллю­стра­ции, чтобы допол­ни­тель­но объ­еди­нить части макета.

Заодно систе­ма­ти­зи­руем вер­ти­каль­ные отсту­пы и интер­ли­нья­жи по «пра­ви­лу внут­рен­не­го и внешнего».

Лого­тип в под­ва­ле сто­ит умень­шить. Заодно при­ве­дём к обще­му зна­ме­на­те­лю цве­то­вой акцент в телефонах.

В про­шлой гла­ве мы объ­яви­ли, что все бло­ки — моду­ли маке­та — долж­ны иметь пря­мо­уголь­ную фор­му и состав­лять вме­сте общий пря­мо­уголь­ник стра­ни­цы или экра­на, кото­рым они огра­ни­че­ны. Это не зна­чит, что любой макет дол­жен быть запол­нен инфор­ма­ци­ей, как ван­ная ком­на­та плит­кой — глав­ное, чтобы пря­мо­уголь­ни­ки чита­лись. В вёрст­ке пол­но­прав­но участ­ву­ет пусто­та, или контр­про­стран­ство, а эле­мен­ты вёрст­ки в моду­лях долж­ны сле­до­вать пра­ви­лу якор­ных объектов.

Макет устро­ен по прин­ци­пу сендвича.

Сосед­ние слои бутер­бро­да кон­тра­сти­ру­ют друг с дру­гом, и это хоро­шо. Если не исполь­зо­вать прин­цип чере­до­ва­ния, слои нач­нут сли­вать­ся, и тогда не спа­сут ни линей­ки, ни допол­ни­тель­ные отступы.

Но сло­ёв‑моду­лей слиш­ком мно­го — целых девять. Из‑за это­го афи­ша выгля­дит дроб­ной и сложной.

Кроме того, сами моду­ли не пря­мо­уголь­ны и име­ют раз­ные раз­ме­ры. Поэто­му они пло­хо сты­ку­ют­ся друг с дру­гом и не состав­ля­ют общий пря­мо­уголь­ник макета.

Я реко­мен­дую начи­нать с самых круп­ных и важ­ных, якор­ных объ­ек­тов. В дан­ном слу­чае это заго­ло­вок акции. Якор­ные объ­ек­ты долж­ны нахо­дить­ся либо у кра­ёв сво­е­го пря­мо­уголь­ни­ка, либо в визу­аль­ном цен­тре. Посколь­ку мы пред­по­ла­га­ем, что моду­лей будет несколь­ко, пока выбе­рем про­из­воль­ную высо­ту. Заголо­вок, под­за­го­ло­вок и нача­ло тек­ста луч­ше не разрывать.

Доба­вим иллю­стра­цию. Корич­не­вую лужу сра­зу заме­ним на зелё­ную травку.

На самом деле, кар­тин­ку заме­тят рань­ше тек­ста, поэто­му для есте­ствен­но­го чте­ния иллю­стра­цию луч­ше ста­вить выше заголовка.

Поста­вив кар­тин­ку и заго­ло­вок, мы отве­ти­ли на вопрос что. Отве­тим на вопро­сы когда и где, доба­вив этаж с датой и адре­сом. Обрати­те вни­ма­ние, что колон­ки ново­го моду­ля име­ют оди­на­ко­вую высоту.

Доба­вим стро­ки куль­тур­ной про­грам­мы. Один из эле­мен­тов спис­ка явно выби­ва­ет­ся по длине.

Конеч­но, мож­но попы­тать­ся сокра­тить первую строч­ку. Но в ней содер­жит­ся важ­ное сооб­ще­ние о бес­плат­ных кон­суль­та­ци­ях и назва­ние спонсора.

Почему бы не выде­лить «фичу» из обще­го ряда, к тому же есть и дру­гая — палат­ка помощи. Получа­ет­ся слиш­ком мно­го эта­жей — а ведь мы ещё не раз­ме­сти­ли всю информацию.

Переста­вим и под­кра­сим фичи в боко­вой колон­ке, при­дав ей высо­ту модуля.

Назва­ния и адре­са орга­ни­за­ций рас­ста­вим в под­ва­ле в виде коло­но­чек оди­на­ко­вой высо­ты. Лого­тип тоже под­чи­ним модулю.

Освобо­дим место для теле­фо­нов, под­няв иллю­стра­цию и тек­сто­вую часть. Телефо­ны ста­ли частью под­валь­но­го моду­ля, поэто­му лого­тип подрос.

Итак, мы собра­ли кон­струк­цию — полу­чи­лась тра­ди­ци­он­ная афи­ша собы­тия с датой.

Попро­бу­ем поста­вить при­зыв к дей­ствию в более логич­ное место — в конец.

Получа­ет­ся непло­хо по смыс­лу — сна­ча­ла что, потом уже когда и куда. Однако нару­ша­ют­ся сра­зу все прин­ци­пы хоро­шей кон­струк­ции: якор­ные объ­ек­ты — заго­ло­вок и даты — рас­плы­лись по маке­ту, сосед­ние эта­жи не кон­тра­сти­ру­ют, боль­шая часть маке­та пре­вра­ти­лась в гру­ду текста.

Поэто­му мы оста­но­вим­ся на преды­ду­щей ком­по­нов­ке и зай­мём­ся нюансами.

Поста­ра­ем­ся согла­со­вать эле­мен­ты маке­та, сде­лав его более цельным.

Пусть наша иллю­стра­ция поиг­ра­ет с тек­стом, при­вле­чёт к нему вни­ма­ние. Выдви­нем папи­ну голо­ву в модуль с датой, для это­го не грех скор­рек­ти­ро­вать картинку.

Обратим­ся к заго­лов­ку. Отце­пим сло­во «акция», изба­вим­ся от кавы­чек и набе­рём заго­ло­вок круп­нее. Слово «акция» при­кле­им к нача­лу заголовка.

Назо­вём такую кон­струк­цию заго­лов­ка «бир­кой». Сове­тую её запом­нить: она удоб­на для выде­ле­ния руб­рик и клю­че­вых слов. Бирка дела­ет заго­ло­вок закон­чен­ным, оде­тым и более доро­гим. Бирка для заго­лов­ка — то же, что засеч­ка для бук­вы, кар­низ для зда­ния, под­пись для кар­тин­ки. Как пра­ви­ло, бир­ка кон­тра­сти­ру­ет с заго­лов­ком: жир­ный с нежир­ным, капи­тель со строчными.

Теперь смыс­ло­вая тек­сто­вая часть. Разве­се­лим по‑афи­шев­ски (т. е. в сти­ле жур­на­лов «Афиши») стро­ки спис­ка цве­та­ми и сти­ля­ми. Одну из «фич» выде­лим зелё­ной трав­кой в сти­ле иллю­стра­ции, чтобы допол­ни­тель­но объ­еди­нить части макета.

Заодно систе­ма­ти­зи­руем вер­ти­каль­ные отсту­пы и интер­ли­нья­жи по «пра­ви­лу внут­рен­не­го и внешнего».

Лого­тип в под­ва­ле сто­ит умень­шить. Заодно при­ве­дём к обще­му зна­ме­на­те­лю цве­то­вой акцент в телефонах.

Подпись автора должна быть скромной, но без неё нельзя

Обложка журнала «Афиша‑Еда»

было

стало

Этажей меньше, кегль крупнее, конструкция проще и крепче

было

стало

Этажей мень­ше, кегль круп­нее, конст­рукция проще и крепче

Формат, поля и интерлиньяж

Типо­граф­ская вёрст­ка поме­ще­на в пря­мо­уголь­ный фор­мат: на книж­ную стра­ни­цу, пла­кат, экран или даже пря­мо на сте­ну. Собствен­но, вёрст­ка начи­на­ет­ся с выяс­не­ния отно­ше­ний двух пря­мо­уголь­ни­ков — содер­жа­ния и формата.

На ощу­ще­ние от вёрст­ки реши­тель­но вли­я­ет соот­но­ше­ние верх­не­го и боко­во­го полей. Одина­ко­вые вер­ти­каль­ные и гори­зон­таль­ные поля — при­знак сла­бой, люби­тель­ской, невни­ма­тель­ной вёрст­ки. Пропор­ции полей могут быть мате­ма­ти­че­ски свя­за­ны с про­пор­ци­я­ми фор­ма­та или даже букв иcполь­зу­е­мо­го шриф­та, могут быть вытя­ну­ты на глаз в шири­ну или в высоту.

Ниж­нее поле сде­ла­ем боль­ше верх­не­го, чтобы под­со­зна­тель­но ском­пен­си­ро­вать «вес» содержания.

Формат, поля и интерлиньяж

Типо­граф­ская вёрст­ка поме­ще­на в пря­мо­уголь­ный фор­мат: на книж­ную стра­ни­цу, пла­кат, экран или даже пря­мо на сте­ну. Собствен­но, вёрст­ка начи­на­ет­ся с выяс­не­ния отно­ше­ний двух пря­мо­уголь­ни­ков — содер­жа­ния и формата.

На ощу­ще­ние от вёрст­ки реши­тель­но вли­я­ет соот­но­ше­ние верх­не­го и боко­во­го полей. Одина­ко­вые вер­ти­каль­ные и гори­зон­таль­ные поля — при­знак сла­бой, люби­тель­ской, невни­ма­тель­ной вёрст­ки. Пропор­ции полей могут быть мате­ма­ти­че­ски свя­за­ны с про­пор­ци­я­ми фор­ма­та или даже букв иcполь­зу­е­мо­го шриф­та, могут быть вытя­ну­ты на глаз в шири­ну или в высоту.

Ниж­нее поле сде­ла­ем боль­ше верх­не­го, чтобы под­со­зна­тель­но ском­пен­си­ро­вать «вес» содержания.

Удвоим базо­вый фор­мат,  перейдём к «бисистеме» — развороту:

Книж­ный раз­во­рот — это цель­ная систе­ма, как дву­ствол­ка или двух­ко­лёс­ный вело­си­пед. Его поло­вин­ки тра­ди­ци­он­но согла­со­ва­ны — поля сим­мет­рич­ны, текст стре­мит­ся к центру.

Книжный канон Ван де Граафа

Удвоим базо­вый фор­мат, перейдём к «бисистеме» — развороту:

Книжный канон Ван де Граафа

Книж­ный раз­во­рот — это цель­ная систе­ма, как дву­ствол­ка или двух­ко­лёс­ный вело­си­пед. Его поло­вин­ки тра­ди­ци­он­но согла­со­ва­ны — поля сим­мет­рич­ны, текст стре­мит­ся к центру.

Скрыто 152 разворота

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015