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

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

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

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

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

Оглавление

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

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

Ленте необя­за­тель­но иметь вер­ти­каль­ную фор­му. Корот­кая лен­та может вытя­нуть­ся в несколь­ко колонок.

Или даже занять колон­ка­ми гори­зон­таль­ный «этаж» на странице.

Чтобы сохра­нять пря­мо­уголь­ную фор­му мно­го­ко­ло­ноч­но­го моду­ля, его колон­ки долж­ны иметь оди­на­ко­вую высо­ту. Точ­ное равен­ство коло­нок в вебе крайне слож­но соблю­сти, но необ­хо­ди­мо поза­бо­тить­ся, чтобы каж­дая сле­ду­ю­щая колон­ка была не длин­нее преды­ду­щей. Для это­го фик­си­ру­ют коли­че­ство эле­мен­тов, вво­дят редак­тор­ские огра­ни­че­ния на дли­ну заго­лов­ков и даже про­грамм­но вычис­ля­ют физи­че­скую высо­ту тек­ста по его объёму.

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

Ленте необя­за­тель­но иметь вер­ти­каль­ную фор­му. Корот­кая лен­та может вытя­нуть­ся в несколь­ко колонок.

Или даже занять колон­ка­ми гори­зон­таль­ный «этаж» на странице.

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

Чтобы сохра­нять пря­мо­уголь­ную фор­му мно­го­ко­ло­ноч­но­го моду­ля, его колон­ки долж­ны иметь оди­на­ко­вую высо­ту. Точ­ное равен­ство коло­нок в вебе крайне слож­но соблю­сти, но необ­хо­ди­мо поза­бо­тить­ся, чтобы каж­дая сле­ду­ю­щая колон­ка была не длин­нее преды­ду­щей. Для это­го фик­си­ру­ют коли­че­ство эле­мен­тов, вво­дят редак­тор­ские огра­ни­че­ния на дли­ну заго­лов­ков и даже про­грамм­но вычис­ля­ют физи­че­скую высо­ту тек­ста по его объёму.

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

Рубрикатор в «Системе Главбух»

Новости банка «Траст»

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

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

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

Рубрикатор в «Системе Главбух»

Новости банка «Траст»

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

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

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

хорошо

хуже

сомнительно

Текст с иллюстрациями

Иллюстра­ция луч­ше все­го чув­ству­ет себя навер­ху вер­ти­каль­но­го тек­сто­во­го блока.

Иллюстра­ция под заго­лов­ком отде­ля­ет текст от заго­лов­ка и пре­ры­ва­ет чте­ние. При этом иллю­стра­ция замет­нее рань­ше тек­ста, и чита­те­лю при­дёт­ся пры­гать от неё взгля­дом вверх‑вниз к заго­лов­ку и тексту.

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

Текст с иллюстрациями

Иллюстра­ция луч­ше все­го чув­ству­ет себя навер­ху вер­ти­каль­но­го тек­сто­во­го блока.

Иллюстра­ция под заго­лов­ком отде­ля­ет текст от заго­лов­ка и пре­ры­ва­ет чте­ние. При этом иллю­стра­ция замет­нее рань­ше тек­ста, и чита­те­лю при­дёт­ся пры­гать от неё взгля­дом вверх‑вниз к заго­лов­ку и тексту.

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

хорошо

хуже

сомнительно

Иллюстрация

Заголовок

Текст

Cсылки

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

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

Иллюст­рация

Заголовок

Текст

Cсылки

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

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

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

Идеаль­но, если шири­на иллю­стра­ции рав­на ширине тек­ста. Это воз­мож­но при дизайне с фик­си­ро­ван­ной шири­ной моду­лей или если иллю­стра­ция «тянет­ся» вме­сте с его тек­сто­вой частью.

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

Идеаль­но, если шири­на иллю­стра­ции рав­на ширине тек­ста. Это воз­мож­но при дизайне с фик­си­ро­ван­ной шири­ной моду­лей или если иллю­стра­ция «тянет­ся» вме­сте с его тек­сто­вой частью.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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