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

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

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

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

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

Оглавление

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

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

Хорошо

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

Плохо

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

Хорошо

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

Хорошо

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

Плохо

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

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

Хорошо

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

Плохо

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

Хорошо

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

Хорошо

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

Плохо

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

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

Хорошо

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

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

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

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

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

Хорошо

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

4
Страницы

4
Страницы

С модульной сеткой

Части стра­ни­цы могут дро­бить­ся каж­дая по‑сво­е­му, и при этом соблю­дать прин­цип модуль­но­сти, удач­но рас­по­ла­гать якор­ные объ­ек­ты и гра­мот­но чере­до­вать ритм. Страни­ца без сет­ки может выгля­деть вполне прилично.

Без сетки

С модульной сеткой

Части стра­ни­цы могут дро­бить­ся каж­дая по‑сво­е­му, и при этом соблю­дать прин­цип модуль­но­сти, удач­но рас­по­ла­гать якор­ные объ­ек­ты и гра­мот­но чере­до­вать ритм. Страни­ца без сет­ки может выгля­деть вполне прилично.

Без сетки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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