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

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

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

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

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

Оглавление

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

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

В модуль­ной вёрст­ке свя­зан­ные эле­мен­ты согла­со­ва­ны по ширине и высо­те, и бла­го­да­ря это­му визу­аль­но объ­еди­ня­ют­ся в пря­мо­уголь­ный модуль.

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние созда­ёт новый псевдомодуль.

Новост­ной блок име­ет вид шах­мат­ной дос­ки: ста­тьи спра­ва подо­зри­тель­но свя­за­лись с круп­ной фото­гра­фи­ей Кудри­на, а заго­ло­вок замет­ки о нём — с автор­ской колон­кой Дениса Самсонова.

На маке­те пла­ка­та под­пись к верх­ней иллю­стра­ции с про­цен­та­ми — «В Рос­сии совер­ша­ет­ся 49% абор­тов» — выров­не­на по вер­ху изо­бра­же­ния рекла­ми­ру­е­мо­го пре­зер­ва­ти­ва, а сло­ган — по низу. Эти две над­пи­си и изо­бра­же­ние упа­ков­ки обра­зу­ют модуль, и фра­за об абор­тах увя­зы­ва­ет­ся с това­ром. Как буд­то это пре­зер­ва­ти­вы во всём виноваты.

В модуль­ной вёрст­ке свя­зан­ные эле­мен­ты согла­со­ва­ны по ширине и высо­те, и бла­го­да­ря это­му визу­аль­но объ­еди­ня­ют­ся в пря­мо­уголь­ный модуль.

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние созда­ёт новый псевдомодуль.

Новост­ной блок име­ет вид шах­мат­ной дос­ки: ста­тьи спра­ва подо­зри­тель­но свя­за­лись с круп­ной фото­гра­фи­ей Кудри­на, а заго­ло­вок замет­ки о нём — с автор­ской колон­кой Дениса Самсонова.

На маке­те пла­ка­та под­пись к верх­ней иллю­стра­ции с про­цен­та­ми — «В Рос­сии совер­ша­ет­ся 49% абор­тов» — выров­не­на по вер­ху изо­бра­же­ния рекла­ми­ру­е­мо­го пре­зер­ва­ти­ва, а сло­ган — по низу. Эти две над­пи­си и изо­бра­же­ние упа­ков­ки обра­зу­ют модуль, и фра­за об абор­тах увя­зы­ва­ет­ся с това­ром. Как буд­то это пре­зер­ва­ти­вы во всём виноваты.

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

Макет меню содер­жит слиш­ком мно­го эле­мен­тов и выгля­дит пло­хо. Элемен­ты слу­чай­но вырав­ни­ва­ют­ся и зри­тель­но объ­еди­ня­ют­ся в пере­се­ка­ю­щи­е­ся псевдомодули.

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

Красно­ва­тым пока­за­ны обла­сти пересечения.

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

Прави­ла модуль­ной вёрстки

  • Модуль име­ет фор­му пря­мо­уголь­ни­ка или фор­ми­ру­ет его антипространством.

  • Внутрен­ние эле­мен­ты моду­ля согла­со­ва­ны по направ­ле­нию чтения.

  • Вырав­ни­ва­ние шири­ны, высо­ты и поло­же­ния эле­мен­тов созда­ёт новый модуль (или псевдомодуль).

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

  • Сосед­ние моду­ли не долж­ны вво­дить чита­те­ля в заблуждение.

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

Макет меню содер­жит слиш­ком мно­го эле­мен­тов и выгля­дит пло­хо. Элемен­ты слу­чай­но вырав­ни­ва­ют­ся и зри­тель­но объ­еди­ня­ют­ся в пере­се­ка­ю­щи­е­ся псевдомодули.

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

Красно­ва­тым пока­за­ны обла­сти пересечения.

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

Прави­ла модуль­ной вёрстки

  • Модуль име­ет фор­му пря­мо­уголь­ни­ка или фор­ми­ру­ет его антипространством.

  • Внутрен­ние эле­мен­ты моду­ля согла­со­ва­ны по направ­ле­нию чтения.

  • Вырав­ни­ва­ние шири­ны, высо­ты и поло­же­ния эле­мен­тов созда­ёт новый модуль (или псевдомодуль).

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

  • Сосед­ние моду­ли не долж­ны вво­дить чита­те­ля в заблуждение.

Доминирующие и вспомогательные иллюстрации

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

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

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

Так себе

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

Лучше

Домини­ру­ю­щая иллю­стра­ция одно­знач­но ука­зы­ва­ет: «Здесь нача­ло осмот­ра». Но осталь­ные ил­люстра­ции по‑преж­не­му без­успеш­но спо­рят друг с другом

Хорошо

Взгляд сво­бод­но и уве­рен­но сколь­зит по стра­ни­це с явной визу­аль­ной иерархией

Доминирующие и вспомогательные иллюстрации

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

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

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

Так себе

Лучше

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

Домини­ру­ю­щая иллю­стра­ция одно­знач­но ука­зы­ва­ет: «Здесь нача­ло осмот­ра». Но осталь­ные ил­люстра­ции по‑преж­не­му без­успеш­но спо­рят друг с другом

Хорошо

Взгляд сво­бод­но и уве­рен­но сколь­зит по стра­ни­це с явной визу­аль­ной иерархией

Для нача­ла попро­бу­ем про­стой спо­соб — поста­вить иллю­стра­ции рядом в общий пря­мо­уголь­ный блок:

Сойдёт

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

Гораз­до реже попа­да­ет­ся вёрст­ка иллю­стра­ций друг под дру­гом сбо­ку от текста:

Непривычно

При такой ком­по­нов­ке слож­нее сохра­нить доми­ни­ру­ю­щую иллю­стра­цию, а ниж­няя име­ет не очень есте­ствен­ные пропорции

Если дове­сти идею до абсур­да, «пирог» из узких иллю­стра­ций пре­вра­ща­ет­ся в инте­рес­ную деко­ра­цию, как на сай­те ком­па­нии «Реатон»:

Сайт ком­па­нии «Реатон»

А бутер­брод из двух иллю­стра­ций над тек­стом — неудач­ная идея:

Плохо

Иллюстра­ции обра­зу­ют мас­сив­ный кир­пич­ный блок, слиш­ком уда­лён­ный от текста

Для нача­ла попро­бу­ем про­стой спо­соб — поста­вить иллю­стра­ции рядом в общий пря­мо­уголь­ный блок:

сойдёт

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

Гораз­до реже попа­да­ет­ся вёрст­ка иллю­стра­ций друг под дру­гом сбо­ку от текста:

Непривычно

При такой ком­по­нов­ке слож­нее сохра­нить доми­ни­ру­ю­щую иллю­стра­цию, а ниж­няя име­ет не очень есте­ствен­ные пропорции

Если дове­сти идею до абсур­да, «пирог» из узких иллю­стра­ций пре­вра­ща­ет­ся в инте­рес­ную деко­ра­цию, как на сай­те ком­па­нии «Реатон».

А бутер­брод из двух иллю­стра­ций над тек­стом — неудач­ная идея:

Плохо

Иллюстра­ции обра­зу­ют мас­сив­ный кир­пич­ный блок, слиш­ком уда­лён­ный от текста

Сайт ком­па­нии «Реатон»

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

А теперь ском­би­ни­ру­ем два базо­вых дизай­на: поста­вим вспо­мо­га­тель­ную кар­тин­ку сбо­ку от тек­ста, а свер­ху накро­ем модуль доми­ни­ру­ю­щей иллюстрацией:

Хорошо

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

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

Хорошо

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

Хуже

Старый дизайн лен­ты Фейсбу­ка

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

А теперь ском­би­ни­ру­ем два базо­вых дизай­на: поста­вим вспо­мо­га­тель­ную кар­тин­ку сбо­ку от тек­ста, а свер­ху накро­ем модуль доми­ни­ру­ю­щей иллюстрацией:

Хорошо

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

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

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

Хорошо

Хуже

Старый дизайн лен­ты Фейсбу­ка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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