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

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

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

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

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

Оглавление

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

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева. Хайно Энгель. Параметры и конструкция японского дома

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

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

Япон­ский ков­рик «тата­ми» — пря­мо­уголь­ник с про­пор­ци­я­ми двух квад­ра­тов. Татами вме­ща­ет двух сидя­щих или одно­го спя­ще­го чело­ве­ка, но со вре­ме­нем полы ком­нат ста­ли покры­вать цели­ком, укла­ды­вая маты в раз­ных комбинациях.

Повсе­мест­ное про­из­вод­ство тата­ми при­ве­ло к стан­дар­ти­за­ции их раз­ме­ров. А стан­дар­ти­за­ция тата­ми при­ве­ла к осо­бой систе­ме мер и про­пор­ций все­го япон­ско­го дома. Это при­мер модуль­но­го дизай­на в архитектуре.

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

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

Япон­ский ков­рик «тата­ми» — пря­мо­уголь­ник с про­пор­ци­я­ми двух квад­ра­тов. Татами вме­ща­ет двух сидя­щих или одно­го спя­ще­го чело­ве­ка, но со вре­ме­нем полы ком­нат ста­ли покры­вать цели­ком, укла­ды­вая маты в раз­ных комбинациях.

Повсе­мест­ное про­из­вод­ство тата­ми при­ве­ло к стан­дар­ти­за­ции их раз­ме­ров. А стан­дар­ти­за­ция тата­ми при­ве­ла к осо­бой систе­ме мер и про­пор­ций все­го япон­ско­го дома. Это при­мер модуль­но­го дизай­на в архитектуре.

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева.
Хайно Энгель. Параметры и конструкция японского дома

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

Галилео Галилей. Звездный вестник. Венеция, 1610

Немате­ри­аль­ная инфор­ма­ция полу­чи­ла физи­че­скую пря­мо­уголь­ную фор­му — «флет­ланд» в тер­ми­но­ло­гии Эдварда Тафти.

В 20 веке типо­гра­фы при­ду­ма­ли делить стра­ни­цу на неви­ди­мые пря­мо­уголь­ни­ки — изоб­ре­ли модуль­ную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

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

Галилео Галилей. Звездный вестник. Венеция, 1610

Немате­ри­аль­ная инфор­ма­ция полу­чи­ла физи­че­скую пря­мо­уголь­ную фор­му — «флет­ланд» в тер­ми­но­ло­гии Эдварда Тафти.

В 20 веке типо­гра­фы при­ду­ма­ли делить стра­ни­цу на неви­ди­мые пря­мо­уголь­ни­ки — изоб­ре­ли модуль­ную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

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

Унифи­ци­ро­ва­ли раз­ме­ры не толь­ко иллю­стра­ций, но даже их частей.

Новая компания. № 12, 1974

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

Унифи­ци­ро­ва­ли раз­ме­ры не толь­ко иллю­стра­ций, но даже их частей.

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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