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

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

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

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

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

Оглавление

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Точка, линия и прямоугольник

Точ­ка, линия и пря­мо­уголь­ник — при­ми­ти­вы вёрст­ки, кото­рые состав­ля­ют гео­мет­рию любой страницы.

Точка

Идеаль­но­му точеч­но­му объ­ек­ту соот­вет­ству­ет круг — самая эго­и­стич­ная фигу­ра на све­те. Круг име­ет соб­ствен­ный центр и мгно­вен­но при­вле­ка­ет внимание:

Но круг не любит кон­ку­рен­ции, его сто­ит исполь­зо­вать огра­ни­чен­но и с осторожностью.

Интерфейс Бейскемпа атакует кругами

Точка, линия и прямоугольник

Точ­ка, линия и пря­мо­уголь­ник — при­ми­ти­вы вёрст­ки, кото­рые состав­ля­ют гео­мет­рию любой страницы.

Точка

Идеаль­но­му точеч­но­му объ­ек­ту соот­вет­ству­ет круг — самая эго­и­стич­ная фигу­ра на све­те. Круг име­ет соб­ствен­ный центр и мгно­вен­но при­вле­ка­ет внимание:

Но круг не любит кон­ку­рен­ции, его сто­ит исполь­зо­вать огра­ни­чен­но и с осторожностью.

Интерфейс Бейскемпа атакует кругами

Номер страницы, кружок‑фактоид и фотография на белом фоне играют роль точек на полосе «Афиши‑Еды»

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

В вёрст­ке при­ме­ни­мы любые точеч­ные объ­ек­ты: отдель­ные бук­вы и циф­ры, зна­ки, лого­ти­пы, пик­то­грам­мы. Они име­ют раз­но­об­раз­ную фор­му, но в отли­чие от линий и пря­мо­уголь­ни­ков, «цен­тро­стре­ми­тель­ны». У точеч­но­го объ­ек­та один фокус вни­ма­ния, он созда­ёт на стра­ни­це акцент.

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

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


Замет­ность объ­ек­та‑точ­ки зави­сит от его раз­ме­ра, плот­но­сти, кон­тра­ста к фону, окру­жа­ю­ще­го сво­бод­но­го про­стран­ства. И, конеч­но, все­гда изме­ря­ет­ся отно­си­тель­но сосед­них элементов.

Точеч­ные объ­ек­ты в вёрст­ке часто высту­па­ют в каче­стве якор­ных объ­ек­тов, тяго­те­ют к углам и кра­ям сво­их модулей.

В вёрст­ке при­ме­ни­мы любые точеч­ные объ­ек­ты: отдель­ные бук­вы и циф­ры, зна­ки, лого­ти­пы, пик­то­грам­мы. Они име­ют раз­но­об­раз­ную фор­му, но в отли­чие от линий и пря­мо­уголь­ни­ков, «цен­тро­стре­ми­тель­ны». У точеч­но­го объ­ек­та один фокус вни­ма­ния, он созда­ёт на стра­ни­це акцент.

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

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


Замет­ность объ­ек­та‑точ­ки зави­сит от его раз­ме­ра, плот­но­сти, кон­тра­ста к фону, окру­жа­ю­ще­го сво­бод­но­го про­стран­ства. И, конеч­но, все­гда изме­ря­ет­ся отно­си­тель­но сосед­них элементов.

Точеч­ные объ­ек­ты в вёрст­ке часто высту­па­ют в каче­стве якор­ных объ­ек­тов, тяго­те­ют к углам и кра­ям сво­их модулей.

Номер страницы, кружок‑фактоид и фотография на белом фоне играют роль точек на полосе «Афиши‑Еды»

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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