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

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

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

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

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

Оглавление

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

Тест

Определите по макету возможное число колонок в сетке. Макеты на иллюстрациях ко всем вопросам строго соблюдают модульную сетку и занимают целое число колонок.

Три
Четыре
Пять
Семь
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Девять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять
Тринадцать

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Семь
Восемь

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Выберите приемлемые варианты компоновки страницы без иллюстраций.

Выберите приемлемые варианты компоновки страницы c иллюстрациями.

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

Стена
Фоторама
Мозаика
Плитка
Рубрикатор
Классификатор
Лента
Фотолента

На иллю­стра­ции скрин­шот страницы «Вашингтон Пост». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Классификатор

На иллю­стра­ции скрин­шот главной страницы «Вольво». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея

Как вы оцениваете информативность листалки на этой же странице?

Высокая
Низкая

На иллю­стра­ции скрин­шот страницы «Мир» на сайте Ильи Бирмана. Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея
Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Определите по макету возможное число колонок в сетке. Макеты на иллюстрациях ко всем вопросам строго соблюдают модульную сетку и занимают целое число колонок.

Три
Четыре
Пять
Семь
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Девять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять
Тринадцать

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Семь
Восемь

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Выберите приемлемые варианты компоновки страницы без иллюстраций.

Выберите приемлемые варианты компоновки страницы c иллюстрациями.

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

Стена
Фоторама
Мозаика
Плитка
Рубрикатор
Классификатор
Лента
Фотолента

На иллю­стра­ции скрин­шот страницы «Вашингтон Пост». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Классификатор

На иллю­стра­ции скрин­шот главной страницы «Вольво». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея

Как вы оцениваете информативность листалки на этой же странице?

Высокая
Низкая

На иллю­стра­ции скрин­шот страницы «Мир» на сайте Ильи Бирмана. Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея
Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

5
Заключение

Выход из прямоугольника

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

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

5
Заключение

Выход из прямоугольника

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

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

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

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

Карта Германии. Адольф Стилер. Атлас всех частей света.
Гота: Юстус Пертес, 1875

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

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

Карта Германии. Адольф Стилер. Атлас всех частей света.
Гота: Юстус Пертес, 1875

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

Строки с назва­ни­ями пиков акку­ратно оги­бают рельеф, откло­ня­ются от легенды, а когда нужно — пре­ры­вают её. Одним сло­вом — выхо­дят из прямоугольника.

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

Строки с назва­ни­ями пиков акку­ратно оги­бают рельеф, откло­ня­ются от легенды, а когда нужно — пре­ры­вают её. Одним сло­вом — выхо­дят из прямоугольника.

Абстракт­ное мыш­ле­ние не пред­по­ла­га­ет бук­валь­ное изо­бра­же­ние при­ро­ды и пред­ме­тов. Но абстракт­ные объ­ек­ты тоже мно­го­мер­ны и тре­бу­ют пред­став­ле­ния на плоскости.

Матема­ти­ка выхо­дит из прямоугольника. Из рукописей Исаака Ньютона.
Архив Кембриджского университета

Абстракт­ное мыш­ле­ние не пред­по­ла­га­ет бук­валь­ное изо­бра­же­ние при­ро­ды и пред­ме­тов. Но абстракт­ные объ­ек­ты тоже мно­го­мер­ны и тре­бу­ют пред­став­ле­ния на плоскости.

Матема­ти­ка выхо­дит из прямоугольника. Из рукописей Исаака Ньютона.
Архив Кембриджского университета

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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