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

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

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

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

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

Оглавление

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

Вернём­ся к ком­би­ни­ро­ван­но­му дизай­ну. Теперь посту­пим наобо­рот: поста­вим доми­ни­ру­ю­щую иллю­стра­цию сбо­ку, а вспо­мо­га­тель­ную — над текстом:

Хорошо

Это тоже про­стой чита­бель­ный вари­ант с явно доми­ни­ру­ю­щей иллю­стра­ци­ей. Тексто­вая часть долж­на быть очень короткой

Хорошо

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

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

Макет стра­ни­цы «Магази­на горя­щих путёвок»

Вернём­ся к ком­би­ни­ро­ван­но­му дизай­ну. Теперь посту­пим наобо­рот: поста­вим доми­ни­ру­ю­щую иллю­стра­цию сбо­ку, а вспо­мо­га­тель­ную — над текстом:

Хорошо

Это тоже про­стой чита­бель­ный вари­ант с явно доми­ни­ру­ю­щей иллю­стра­ци­ей. Тексто­вая часть долж­на быть очень короткой

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

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

Макет стра­ни­цы «Магази­на горя­щих путёвок»

Вертикальные иллюстрации

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

В ито­ге экран­ные дизай­не­ры не любят вер­ти­каль­ные фото­гра­фии, избе­га­ют их, боят­ся как огня. Новост­ные сай­ты и интер­нет‑газе­ты обре­за­ют вер­ти­каль­ные фото­гра­фии до гори­зон­таль­ных (или, может быть, про­сто выбра­сы­ва­ют?) А фото­при­ло­же­ния и соци­аль­ные сети чет­вер­ту­ют всех пого­лов­но — уро­дуя не толь­ко про­блем­ные вер­ти­каль­ные, но и невин­ные гори­зон­таль­ные фотографии.

«Насильно оквадраченные» вертикальные и горизонтальные фотографии в Фейсбуке и Твитере

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


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

Пора бы отдать долж­ное вер­ти­каль­ным картинкам.

Вертикальные иллюстрации

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

В ито­ге экран­ные дизай­не­ры не любят вер­ти­каль­ные фото­гра­фии, избе­га­ют их, боят­ся как огня. Новост­ные сай­ты и интер­нет‑газе­ты обре­за­ют вер­ти­каль­ные фото­гра­фии до гори­зон­таль­ных (или, может быть, про­сто выбра­сы­ва­ют?) А фото­при­ло­же­ния и соци­аль­ные сети чет­вер­ту­ют всех пого­лов­но — уро­дуя не толь­ко про­блем­ные вер­ти­каль­ные, но и невин­ные гори­зон­таль­ные фотографии.

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


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

Пора бы отдать долж­ное вер­ти­каль­ным картинкам.

«Насильно оквадраченные» вертикальные и горизонтальные фотографии в Фейсбуке и Твитере

Адапти­ру­ем при­ве­дён­ные выше вари­ан­ты вёрст­ки к вер­ти­каль­ным иллюстрациям.

Хорошо

«Блочный» вариант над текстом — очевидный и естественный

Плохо

Верти­каль­ный кир­пич сбо­ку полу­чит­ся слиш­ком уве­си­стым и потре­бу­ет слиш­ком мно­го тек­ста для одно­го модуля

Хорошо

«Комби­ни­ро­ван­ный» вари­ант с неболь­шой вер­ти­каль­ной фото­гра­фи­ей сбо­ку отлич­но подой­дёт, напри­мер, для сопро­во­ди­тель­но­го портрета

Хорошо

А так вер­ти­каль­ная фото­гра­фия доминирует

Плохо

Важно пом­нить о соот­но­ше­нии раз­ме­ров фото­гра­фий. Второ­сте­пен­ная фото­гра­фия не долж­на спо­рить с главной

Адапти­ру­ем при­ве­дён­ные выше вари­ан­ты вёрст­ки к вер­ти­каль­ным иллюстрациям.

Хорошо

«Блочный» вариант над текстом — очевидный и естественный

Плохо

Верти­каль­ный кир­пич сбо­ку полу­чит­ся слиш­ком уве­си­стым и потре­бу­ет слиш­ком мно­го тек­ста для одно­го модуля

Хорошо

«Комби­ни­ро­ван­ный» вари­ант с неболь­шой вер­ти­каль­ной фото­гра­фи­ей сбо­ку отлич­но подой­дёт, напри­мер, для сопро­во­ди­тель­но­го портрета

Хорошо

А так вер­ти­каль­ная фото­гра­фия доминирует

Плохо

Важно пом­нить о соот­но­ше­нии раз­ме­ров фото­гра­фий. Второ­сте­пен­ная фото­гра­фия не долж­на спо­рить с главной

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

Хорошо

Верти­каль­ная фото­гра­фия зани­ма­ет высо­ту двух гори­зон­таль­ных и выде­ля­ет­ся размером

Мы рас­смот­ре­ли ком­по­нов­ку доми­ни­ру­ю­щих и вспо­мо­га­тель­ных иллю­стра­ций вер­ти­каль­ных и гори­зон­таль­ных про­пор­ций. Все при­ме­ры под­хо­дят и для квад­рат­ных картинок.

Назад к вер­ти­ка­лям. Лента «Майспей­са»

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

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

Хорошо

Верти­каль­ная фото­гра­фия зани­ма­ет высо­ту двух гори­зон­таль­ных и выде­ля­ет­ся размером

Мы рас­смот­ре­ли ком­по­нов­ку доми­ни­ру­ю­щих и вспо­мо­га­тель­ных иллю­стра­ций вер­ти­каль­ных и гори­зон­таль­ных про­пор­ций. Все при­ме­ры под­хо­дят и для квад­рат­ных картинок.

Назад к вер­ти­ка­лям. Лента «Майспей­са»

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

Тест

Какой форме текста соответствует схема направления чтения?

Одноколоночной
Двухколоночной
Трёхколоночной
Многоколоночной
Любой

На иллю­стра­ции скрин­шот сай­та «Известий». Какие про­бле­мы вёрст­ки вы видите?

Нарушен принцип модульности
Ссылки и подписи соседних новостей в ленте стоят слишком близко друг к другу
«Левая подмышка» в ленте: иллюстрация отделяет заголовок от начала текста
Обтекание иллюстрации текстом справа в ленте

На иллю­стра­ции скрин­шот «Коммер­сан­та». Какие про­бле­мы вёрст­ки вы видите?

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

Какие варианты компоновки вам кажутся более удачными?

Выберите приемлемые варианты компоновки доминирующей и вспомогательной иллюстраций.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Какой форме текста соответствует схема направления чтения?

Одноколоночной
Двухколоночной
Трёхколоночной
Многоколоночной
Любой

На иллю­стра­ции скрин­шот сай­та «Известий». Какие про­бле­мы вёрст­ки вы видите?

Нарушен принцип модульности
Ссылки и подписи соседних новостей в ленте стоят слишком близко друг к другу
«Левая подмышка» в ленте: иллюстрация отделяет заголовок от начала текста
Обтекание иллюстрации текстом справа в ленте

На иллю­стра­ции скрин­шот «Коммер­сан­та». Какие про­бле­мы вёрст­ки вы видите?

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

Какие варианты компоновки вам кажутся более удачными?

Выберите приемлемые варианты компоновки доминирующей и вспомогательной иллюстраций.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать
Скрыто 60 разворотов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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