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

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

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

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

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

Оглавление

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

3
Модули

Текст без иллюстраций

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

Модуль­ная стра­ни­ца состо­ит из смыс­ло­вых бло­ков. Рассмот­рим тек­сто­вые бло­ки без иллюстраций.

3
Модули

Текст без иллюстраций

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

Модуль­ная стра­ни­ца состо­ит из смыс­ло­вых бло­ков. Рассмот­рим тек­сто­вые бло­ки без иллюстраций.

Эта­лон­ный модуль — это заго­ло­вок, кото­рый накры­вает текст.

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

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

Эта­лон­ный модуль — это заго­ло­вок, кото­рый накры­вает текст.

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

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

Ссылки для про­дол­же­ния чте­ния логич­но вста­ют в конец блока.

Заголо­вок и глав­ная ссыл­ка могут быть объ­еди­не­ны, если это не нару­шит еди­но­об­ра­зие осталь­ных бло­ков на странице.

Если в бло­ке нет тек­ста, но есть несколь­ко ссы­лок, у него есть шанс вытя­нуть­ся в строку.

Или вовсе реду­ци­ро­вать­ся до отдель­но сто­я­щей ссылки.

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

Ссылки для про­дол­же­ния чте­ния логич­но вста­ют в конец блока.

Заголо­вок и глав­ная ссыл­ка могут быть объ­еди­не­ны, если это не нару­шит еди­но­об­ра­зие осталь­ных бло­ков на странице.

Если в бло­ке нет тек­ста, но есть несколь­ко ссы­лок, у него есть шанс вытя­нуть­ся в строку.

Или вовсе реду­ци­ро­вать­ся до отдель­но сто­я­щей ссылки.

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

лучше

Блоки приобрели форму, смысл текста восстановлен

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

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

лучше

Блоки приобрели форму, смысл текста восстановлен

Напра­вим мута­ции эта­лона в сто­рону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

Напра­вим мута­ции эта­лона в сто­рону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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