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

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

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

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

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

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

плохо

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

Хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

Однако допустимо совмещать функции разных элементов, уменьшая их количество.

плохо

хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

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

Однако допу­стимо сов­ме­щать функ­ции раз­ных эле­мен­тов, умень­шая их количество.

Заголовок

Заго­ло­вок — базо­вый эле­мент вёрстки.

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

Заго­ло­вок — не про­сто фор­маль­ное резюме тек­ста, иначе от него сто­ило бы изба­виться как от лиш­него повтора.

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

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

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

Заго­ло­вок слу­жит якор­ным объ­ек­том, орга­ни­зует стра­ницу и её отдель­ные части. Обо­зна­чает и даёт форму бло­кам тек­ста, направ­ляет чте­ние. Раз­меры заго­лов­ков пока­зы­вают срав­ни­тель­ную важ­ность или логи­че­скую вло­жен­ность текстов.

Заголовок

Заголовок — базовый элемент вёрстки.

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

Заголовок — не просто формальное резюме текста, иначе от него стоило бы избавиться как от лишнего повтора.

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

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

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

Заголовок служит якорным объектом, организует страницу и её отдельные части. Обозначает и даёт форму блокам текста, направляет чтение. Размеры заголовков показывают сравнительную важность или логическую вложенность текстов.

Простейший заголовок — это крупная однородная надпись строчными буквами с прописной в начале и без точки в конце.

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

плохо

хорошо

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

Жизнь и приключения Робинзона Крузо

Про­стей­ший заго­ло­вок — это круп­ная одно­род­ная над­пись строч­ными бук­вами с про­пис­ной в начале и без точки в конце.

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

плохо

Жизнь и удивительные приключения Робинзона
Крузо

хорошо

Жизнь и удивительные приключения Робинзона Крузо

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

Заголовок — синтаксически самостоятельный цельный элемент. Сегодня плохой тон визуально дробить его на части стилями:

Этот приём подходит в редких случаях вроде книжного титула или плаката. Даже «безобидное» выделение жирным части заголовка в декоративных целях часто выдаёт любительскую вёрстку:

Это не значит, что заголовок не может быть составным. Дополнительные элементы заголовка помогают сделать его основное тело короче и заметнее, сориентировать и заинтересовать читателя.

Бирка

Подзаголовок

Двойной заголовок

Графика, маркер или знак

Заго­ло­вок — син­так­си­че­ски само­сто­я­тель­ный цель­ный эле­мент. Сегодня пло­хой тон визу­ально дро­бить его на части стилями:

Жизнь
и уди­ви­тель­ные при­клю­че­ния
Робин­зона Крузо

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

Жизнь и уди­ви­тель­ные приключения
Робин­зона Крузо

Бирка

Подзаголовок

Двойной заголовок

Графика, маркер или знак

Это не зна­чит, что заго­ло­вок не может быть состав­ным. Допол­ни­тель­ные эле­менты заго­ловка помо­гают сде­лать его основ­ное тело короче и замет­нее, сори­ен­ти­ро­вать и заин­те­ре­со­вать читателя.

Заголовок обычно «накрывает» текстовый модуль, к которому относится, и принимает его форму. Заголовок помогает отделить соседние модули и подсказать направление чтения, например, в этом горизонтальном модуле.

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

В таких случаях приходится дополнительно отделять модули, например линейками.

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

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

В таких слу­чаях при­хо­дится допол­ни­тельно отде­лять модули, напри­мер линейками.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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