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

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

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

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

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

Оглавление

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

«Прямо­уголь­ни­ка­ми» высту­па­ют не толь­ко эле­мен­ты вёрст­ки, но и про­стран­ство меж­ду ними. Дизай­нер Сер­гей Серов пишет о швей­цар­ской типографике:


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

Разворот газеты «Ди Цайт»

Разво­рот газе­ты «Ди Цайт»

Разворот газеты «Ди Цайт»

«Прямо­уголь­ни­ка­ми» высту­па­ют не толь­ко эле­мен­ты вёрст­ки, но и про­стран­ство меж­ду ними. Дизай­нер Сер­гей Серов пишет о швей­цар­ской типографике:

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

Сайты и экран­ные интер­фей­сы состо­ят из раз­но­ка­ли­бер­ных эле­мен­тов: нави­га­ци­он­ных шапок, меню, кно­пок, ико­нок, пане­лей инстру­мен­тов, лент ново­стей, тизе­ров, форм вво­да, видже­тов и пла­шек. Тек­сты выво­дят­ся из базы дан­ных и име­ют непред­ска­зу­е­мую дли­ну. Попыт­ки впих­нуть совре­мен­ное экран­ное изда­ние в квад­рат­но‑гнез­до­вую систе­му швей­цар­ских модуль­ных сеток выгля­дят натуж­но и фор­маль­но, как на сай­те «Модуль­ная система».

Аккурат­но орга­ни­зо­вать инфор­ма­цию помо­га­ет гиб­кая модуль­ная вёрст­ка. Прин­цип: макет дол­жен быть «наре­зан» на акку­рат­ные непе­ре­се­ка­ю­щи­е­ся пря­мо­уголь­ные моду­ли. Напри­мер, как на облож­ке элек­трон­но­го жур­на­ла «Главбух».

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

Модульная вёрстка — это деление
прямоугольников

Модульная вёрстка — это деление прямоугольников

Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки

Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки

Сайты и экран­ные интер­фей­сы состо­ят из раз­но­ка­ли­бер­ных эле­мен­тов: нави­га­ци­он­ных шапок, меню, кно­пок, ико­нок, пане­лей инстру­мен­тов, лент ново­стей, тизе­ров, форм вво­да, видже­тов и пла­шек. Тек­сты выво­дят­ся из базы дан­ных и име­ют непред­ска­зу­е­мую дли­ну. Попыт­ки впих­нуть совре­мен­ное экран­ное изда­ние в квад­рат­но‑гнез­до­вую систе­му швей­цар­ских модуль­ных сеток выгля­дят натуж­но и фор­маль­но, как на сай­те «Модуль­ная система».

Аккурат­но орга­ни­зо­вать инфор­ма­цию помо­га­ет гиб­кая модуль­ная вёрст­ка. Прин­цип: макет дол­жен быть «наре­зан» на акку­рат­ные непе­ре­се­ка­ю­щи­е­ся пря­мо­уголь­ные моду­ли. Напри­мер, как на облож­ке элек­трон­но­го жур­на­ла «Главбух».

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

Модульная вёрстка — это деление прямоугольников

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

Правило якорных объектов

Якор­ные объ­екты — это самые замет­ные объ­ек­ты на стра­ни­це: иллю­стра­ции, заго­лов­ки, фак­то­и­ды, лого­ти­пы и пик­то­грам­мы. Про­стой абзац набор­но­го тек­ста тоже высту­па­ет якор­ным объ­ек­том, если он окру­жён пусто­той, или контрпространством.

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

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

Правило якорных объектов

Якор­ные объ­екты — это самые замет­ные объ­ек­ты на стра­ни­це: иллю­стра­ции, заго­лов­ки, фак­то­и­ды, лого­ти­пы и пик­то­грам­мы. Про­стой абзац набор­но­го тек­ста тоже высту­па­ет якор­ным объ­ек­том, если он окру­жён пусто­той, или контрпространством.

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

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

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

Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника

Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма

Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки

Общая конструкция сохранится, если соблюдать принцип модульности

Макет развалился

Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами

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

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

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

У пра­во­го края фла­го­во­го набо­ра все­гда долж­но быть допол­ни­тель­ное сво­бод­ное про­стран­ство. Тогда «флаг» выгля­дит фла­гом — как положено.

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

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

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

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

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

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

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

У пра­во­го края фла­го­во­го набо­ра все­гда долж­но быть допол­ни­тель­ное сво­бод­ное про­стран­ство. Тогда «флаг» выгля­дит фла­гом — как положено.

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

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

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

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

Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника

Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма

Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки

Общая конструкция сохранится, если соблюдать принцип модульности

Макет развалился

Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами

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

Такая при­вяз­ка выгля­дит спокойно.

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

Такая при­вяз­ка выгля­дит спокойно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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