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

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

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

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

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
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

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

Тест

Выберите неудачное положение гиперссылок в текстовом модуле.

Как добавить важности отдельно стоящей ссылке?

Выберите самый приемлемый вариант вёрстки текстового модуля.

Выберите плохие варианты вёрстки ленты.

Какая компоновка соответствует эталонной последовательности?

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

Тест

Выберите неудачное положение гиперссылок в текстовом модуле.

Как добавить важности отдельно стоящей ссылке?

Выберите самый приемлемый вариант вёрстки текстового модуля.

Выберите плохие варианты вёрстки ленты.

Какая компоновка соответствует эталонной последовательности?

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

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

Чело­век читает слева направо, сверху вниз.

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

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

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

Человек читает слева направо, сверху вниз.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

так себе

лучше

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

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

так себе

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

лучше

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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