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

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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