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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

Типографская вёрстка помещена в прямоугольный формат: на книжную страницу, плакат, экран или даже прямо на стену. Собственно, вёрстка начинается с выяснения отношений двух прямоугольников — содержания и формата.

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

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

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

Типо­граф­ская вёрстка поме­щена в пря­мо­уголь­ный фор­мат: на книж­ную стра­ницу, пла­кат, экран или даже прямо на стену. Соб­ственно, вёрстка начи­на­ется с выяс­не­ния отно­ше­ний двух пря­мо­уголь­ни­ков — содер­жа­ния и формата.

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

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

Удвоим базовый формат,   перейдём к «бисистеме» — развороту:

Книжный разворот — это цельная система, как двустволка или двухколёсный велосипед. Его половинки традиционно согласованы — поля симметричны, текст стремится к центру.

Книжный канон Ван де Граафа

Удвоим базо­вый фор­мат, перейдём к «бисистеме» — развороту:

Книжный канон Ван де Граафа

Книж­ный раз­во­рот — это цель­ная система, как дву­стволка или двух­ко­лёс­ный вело­си­пед. Его поло­винки тра­ди­ци­онно согла­со­ваны — поля сим­мет­ричны, текст стре­мится к центру.

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

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

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

Наконец, модульная вёрстка предполагает уже не физическое, а логическое деление формата на форматы меньшего размера — модули.

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

Пред­ла­гаю чита­телю само­сто­я­тельно про­ана­ли­зи­ро­вать соот­но­ше­ния на иллю­стра­ции. Внеш­ним фор­ма­том слу­жит окно.

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

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

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

Предлагаю читателю самостоятельно проанализировать соотношения на иллюстрации. Внешним форматом служит окно.

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

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

В «Советы» обратился Антон Куликов с вопросом об интерлиньяже и отступах: «Как работать с межстрочным расстоянием в блоках с разным размером текста? Как найти и соблюдать „вертикальный ритм“»? Здесь картинка, которую прислал Антон.

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

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

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

В левом варианте кегль настолько крупный, что строки короткие и прыгающие, а буквам тесно в блоке. Поэтому возьмём за основу правый пример.

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

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

Обратите внимание на розовый прямоугольник.

Этот маленький прямоугольник задаёт ощущение от вёрстки, поскольку определяет соотношения верхнего и бокового поля. Проверенный приём — чтобы пропорции этого прямоугольника соответствовали формату. Если формат — плашка или страница — вытянуты в высоту, пусть и прямоугольник будет вертикальным. Если формат горизонтальный — пусть он будет горизонтальным. Необязательно следовать этому правилу, главное, чтобы пропорции были осмысленны. Но квадрат в углу — признак слабой, любительской, невнимательной вёрстки.

Напомню логику рассуждений: длина строки → интерлиньяж → расстояние до заголовка → левое поле → верхнее поле → повторить. То есть сначала нужно построить текстовый прямоугольник, найти длину строки и интерлиньяж, а затем аккуратно поставить «в угол». И снова перепроверить все соотношения.

Я посоветовал бы «обинтеллигентить» толстенные рамки.

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

Чтобы «подружить» картинку с текстом, просто уменьшим интерлиньяж и поля, проверив и скорректировав соотношения внутреннего и внешнего.

В «Советы» обра­тился Антон Кули­ков с вопро­сом об интер­ли­ньяже и отсту­пах: «Как рабо­тать с меж­строч­ным рас­сто­я­нием в бло­ках с раз­ным раз­ме­ром тек­ста? Как найти и соблю­дать „вер­ти­каль­ный ритм“»? Справа кар­тинка, кото­рую при­слал Антон.

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

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

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

В левом вари­анте кегль настолько круп­ный, что строки корот­кие и пры­га­ю­щие, а бук­вам тесно в блоке. Поэтому возь­мём за основу пра­вый пример.

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

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

Обра­тите вни­ма­ние на розо­вый прямоугольник.

Этот малень­кий пря­мо­уголь­ник задаёт ощу­ще­ние от вёрстки, поскольку опре­де­ляет соот­но­ше­ния верх­него и боко­вого поля. Про­ве­рен­ный приём — чтобы про­пор­ции этого пря­мо­уголь­ника соот­вет­ство­вали фор­мату. Если фор­мат — плашка или стра­ница — вытя­нуты в высоту, пусть и пря­мо­уголь­ник будет вер­ти­каль­ным. Если фор­мат гори­зон­таль­ный — пусть он будет гори­зон­таль­ным. Необя­за­тельно сле­до­вать этому пра­вилу, глав­ное, чтобы про­пор­ции были осмыс­ленны. Но квад­рат в углу — при­знак сла­бой, люби­тель­ской, невни­ма­тель­ной вёрстки.

Напомню логику рас­суж­де­ний: длина строки → интер­ли­ньяж → рас­сто­я­ние до заго­ловка → левое поле → верх­нее поле → повто­рить. То есть сна­чала нужно постро­ить тек­сто­вый пря­мо­уголь­ник, найти длину строки и интер­ли­ньяж, а затем акку­ратно поста­вить «в угол». И снова пере­про­ве­рить все соотношения.

Я посо­ве­то­вал бы «обин­тел­ли­ген­тить» тол­стен­ные рамки.

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

Чтобы «подру­жить» кар­тинку с тек­стом, про­сто умень­шим интер­ли­ньяж и поля, про­ве­рив и скор­рек­ти­ро­вав соот­но­ше­ния внут­рен­него и внешнего.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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