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

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

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

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

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

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

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

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

плохо

хорошо

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

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

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

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

плохо

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

хорошо

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

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

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

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

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

Бирка

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

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

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

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

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

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

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

Бирка

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

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

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

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

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

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

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

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

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

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

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

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

плохо

хорошо

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

О вертикальных расстояниях у заголовков:

  • О правиле внутреннего и внешнего 4

  • Формат, поля и интерлиньяж 21

плохо

хорошо

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

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

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

О вертикальных расстояниях у заголовков:

  • О правиле внутреннего и внешнего 4

  • Формат, поля и интерлиньяж 21

Графомания, на первый взгляд, отражает мелодический полифонический роман, но не рифмами. Стилистическая игра отражает холодный цинизм, именно поэтому голос автора романа не имеет никаких преимуществ перед голосами персонажей.

Текст

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

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

Гра­фо­ма­ния, на пер­вый взгляд, отра­жает мело­ди­че­ский поли­фо­ни­че­ский роман, но не риф­мами. Сти­ли­сти­че­ская игра отра­жает холод­ный цинизм, именно поэтому голос автора романа не имеет ника­ких пре­иму­ществ перед голо­сами персонажей.

Текст

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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