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

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

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

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

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

Оглавление

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

было

стало

Этажей меньше, кегль крупнее, конструкция проще и крепче

было

стало

Этажей мень­ше, кегль круп­нее, конст­рукция проще и крепче

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Витрина Музея северных стран. Дизайн — Стокгольм­ская лаборатория дизайна

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

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

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

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

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

Витрина Музея северных стран. Дизайн — Стокгольм­ская лаборатория дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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