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

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

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

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

 
между важными местами
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

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

Если текст разбит на колонки, то дочитав одну колонку, человек ищет наверху начало следующей. При этом сохраняется движение слева направо, сверху вниз.

Направление чтения по колонкам изобразим горизонтальной стрелкой.

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

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

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

Направ­ле­ние чте­ния по колон­кам изоб­ра­зим гори­зон­таль­ной стрелкой.

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

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

В матрице из текстовых блоков направление чтения не так очевидно и предсказуемо.

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

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

Если «сломать» выравнивание, текст снова объединится в колонки.

В мат­рице из тек­сто­вых бло­ков направ­ле­ние чте­ния не так оче­видно и предсказуемо.

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

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

Если «сло­мать» вырав­ни­ва­ние, текст снова объ­еди­нится в колонки.

так себе

лучше

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

Такие списки лучше раз­бить на колонки и поста­вить друг под друга. Кстати, колонки будет гораздо легче выров­нять по высоте.

так себе

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

лучше

Такие списки лучше разбить на колонки и поставить друг под друга. Кстати, колонки будет гораздо легче выровнять по высоте.

Положение иллюстрации относительно текста тоже задаёт направление.

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

Так себе

«Траектория» взгляда должна описывать простую линию без непредсказуемых поворотов.

Лучше

Поло­же­ние иллю­стра­ции отно­си­тельно тек­ста тоже задаёт направление.

Так себе

Так себе

Лучше

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

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

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

В модульной вёрстке связанные элементы согласованы по ширине и высоте, и благодаря этому визуально объединяются в прямоугольный модуль.

Верно и обратное: случайное выравнивание создаёт новый псевдомодуль.

Новостной блок имеет вид шахматной доски: статьи справа подозрительно связались с крупной фотографией Кудрина, а заголовок заметки о нём — с авторской колонкой Дениса Самсонова.

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

В модуль­ной вёрстке свя­зан­ные эле­менты согла­со­ваны по ширине и высоте, и бла­го­даря этому визу­ально объ­еди­ня­ются в пря­мо­уголь­ный модуль.

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние создаёт новый псевдомодуль.

Новост­ной блок имеет вид шах­мат­ной доски: ста­тьи справа подо­зри­тельно свя­за­лись с круп­ной фото­гра­фией Куд­рина, а заго­ло­вок заметки о нём — с автор­ской колон­кой Дениса Самсонова.

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

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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