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

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

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

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

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

Оглавление

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

Точка, линия и прямоугольник

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

Точка

Идеаль­но­му точеч­но­му объ­ек­ту соот­вет­ству­ет круг — самая эго­и­стич­ная фигу­ра на све­те. Круг име­ет соб­ствен­ный центр и мгно­вен­но при­вле­ка­ет внимание:

Но круг не любит кон­ку­рен­ции, его сто­ит исполь­зо­вать огра­ни­чен­но и с осторожностью.

Интерфейс Бейскемпа атакует кругами

Точка, линия и прямоугольник

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

Точка

Идеаль­но­му точеч­но­му объ­ек­ту соот­вет­ству­ет круг — самая эго­и­стич­ная фигу­ра на све­те. Круг име­ет соб­ствен­ный центр и мгно­вен­но при­вле­ка­ет внимание:

Но круг не любит кон­ку­рен­ции, его сто­ит исполь­зо­вать огра­ни­чен­но и с осторожностью.

Интерфейс Бейскемпа атакует кругами

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

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

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

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

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


Замет­ность объ­ек­та‑точ­ки зави­сит от его раз­ме­ра, плот­но­сти, кон­тра­ста к фону, окру­жа­ю­ще­го сво­бод­но­го про­стран­ства. И, конеч­но, все­гда изме­ря­ет­ся отно­си­тель­но сосед­них элементов.

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

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

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

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


Замет­ность объ­ек­та‑точ­ки зави­сит от его раз­ме­ра, плот­но­сти, кон­тра­ста к фону, окру­жа­ю­ще­го сво­бод­но­го про­стран­ства. И, конеч­но, все­гда изме­ря­ет­ся отно­си­тель­но сосед­них элементов.

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

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

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

Адрес компании «Я расту» в две строки внизу бланка

Реклама на Гугле

Строка с результатами выборов мэра Москвы на Яндексе

Меню Гугль‑документа

Якори слева и справа

Якорь в центре

Этикетка на картридже Т2

Линия

В гео­мет­рии точ­ки состав­ля­ют пря­мую линию. Линия в типо­гра­фи­ке — это стро­ка, вто­рой важ­ней­ший примитив.

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

Адрес компа­нии «Я рас­ту» занял две стро­ки вни­зу блан­ка и осво­бо­дил всё место навер­ху для логотипа.

Строка — один из спо­со­бов «впих­нуть нев­пиху­е­мое», напри­мер, сроч­ное объ­яв­ле­ние, как реклама на Гугле, или вре­мен­ный блок на сайте, как резуль­та­ты выбо­ров мэра Москвы на Яндексе.

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

Строка отлич­но под­хо­дит для орга­ни­за­ции меню и пане­лей инструментов.

Неодно­род­ная стро­ка долж­на сле­до­вать пра­ви­лу якор­ных объ­ек­тов. Строка одно­мер­на, поэто­му яко­ря рас­по­ла­га­ют­ся сле­ва и справа. Или в цен­тре, как в газет­ных колон­ти­ту­лах и меню кален­даря в Айпаде.

Эти­кетка на кар­три­дже Т2 в стро­ку с дву­мя яко­ря­ми — лого­ти­пом сле­ва и арти­ку­лом справа.

Линия — типичная форма уличных надписей и вывесок

Воз­можно, ошибка в рек­ви­зи­тах ООО «Тор­го­вая фирма „Герметик“»

Новая ком­па­ния ООО «Альфа»

Про­ве­рить и обно­вить...
Создать...

Адрес компании «Я расту» в две строки внизу бланка

Реклама на Гугле

Строка с результатами выборов мэра Москвы на Яндексе

Меню Гугль‑документа

Якори слева и справа

Якорь в центре

Этикетка на картридже Т2

Линия

В гео­мет­рии точ­ки состав­ля­ют пря­мую линию. Линия в типо­гра­фи­ке — это стро­ка, вто­рой важ­ней­ший примитив.

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

Адрес ком­па­нии «Я рас­ту» занял две стро­ки вни­зу блан­ка и осво­бо­дил всё место навер­ху для логотипа.

Строка — один из спо­со­бов «впих­нуть нев­пиху­е­мое», напри­мер, сроч­ное объ­яв­ле­ние, как реклама на Гугле, или вре­мен­ный блок на сайте, как резуль­та­ты выбо­ров мэра Москвы на Яндексе.

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

Строка отлич­но под­хо­дит для орга­ни­за­ции меню и пане­лей инструментов.

Неодно­род­ная стро­ка долж­на сле­до­вать пра­ви­лу якор­ных объ­ек­тов. Строка одно­мер­на, поэто­му яко­ря рас­по­ла­га­ют­ся сле­ва и справа. Или в цен­тре, как в газет­ных колон­ти­ту­лах и меню кален­даря в Айпаде.

Эти­кетка на кар­три­дже Т2 в стро­ку с дву­мя яко­ря­ми — лого­ти­пом сле­ва и арти­ку­лом справа.

Линия — типичная форма уличных надписей и вывесок


Прямоугольник

Прямо­уголь­ник — тре­тий при­ми­тив вёрстки.

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

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

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

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

Прямоугольные объекты на сайте «Свисс Тайпфейсес»

Прямоугольник

Прямо­уголь­ник — тре­тий при­ми­тив вёрстки.

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

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

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

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

Прямоугольные объекты на сайте «Свисс Тайпфейсес»

От геометрии к типографике

В «сове­ты» обра­тил­ся Игорь Г. с прось­бой рас­ска­зать о вырав­ни­ва­нии строк по вертикали:

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

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

Строки в полях прибиты к низу

Строки в полях прибиты к низу

От геометрии к типографике

В «сове­ты» обра­тил­ся Игорь Г. с прось­бой рас­ска­зать о вырав­ни­ва­нии строк по вертикали:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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