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

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

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

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

 
между важными местами
Shift
между
разворотами

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

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

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

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

Изда­тель­ство Бюро Гор­бу­нова
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