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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Изда­тель­ство
Бюро Гор­бу­нова, 2015

Оглавление

    Основы 4

    Базо­вые эле­менты 34

    Модули 74

    Стра­ницы 115

    Заклю­че­ние 155

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

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

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

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

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Издательство
Бюро Горбунова, 2015

Оглавление

    Основы 4

    Базовые элементы 34

    Модули 74

    Страницы 115

    Заключение 155

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

3
Модули

текст без иллюстраций

лента

текст с иллюстрациями

форма тек­ста и поря­док чтения

доми­ни­ру­ю­щие
и вспо­мо­га­тель­ные иллюстрации

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

Текст без иллюстраций

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

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

3
Модули

текст без иллюстраций

лента

текст с иллюстрациями

форма текста и порядок чтения

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

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

Текст без иллюстраций

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

Модульная страница состоит из смысловых блоков. Рассмотрим текстовые блоки без иллюстраций.

Эта­лон­ный модуль — это заго­ло­вок, кото­рый накры­вает текст.

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

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

Эталонный модуль — это заголовок, который накрывает текст.

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

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

Ссылки для продолжения чтения логично встают в конец блока.

Заголовок и главная ссылка могут быть объединены, если это не нарушит единообразие остальных блоков на странице.

Если в блоке нет текста, но есть несколько ссылок, у него есть шанс вытянуться в строку.

Или вовсе редуцироваться до отдельно стоящей ссылки.

Но если важная ссылка смотрится одиноко, можно вспомнить о составных заголовках и добавить ей бирку или подпись.

Ссылки для про­дол­же­ния чте­ния логично встают в конец блока.

Заго­ло­вок и глав­ная ссылка могут быть объ­еди­нены, если это не нару­шит еди­но­об­ра­зие осталь­ных бло­ков на странице.

Если в блоке нет тек­ста, но есть несколько ссы­лок, у него есть шанс вытя­нуться в строку.

Или вовсе реду­ци­ро­ваться до отдельно сто­я­щей ссылки.

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

лучше

Блоки приобрели форму, смысл текста восстановлен

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

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

лучше

Блоки приобрели форму, смысл текста восстановлен

Направим мутации эталона в сторону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

Напра­вим мута­ции эта­лона в сто­рону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось