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

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

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

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

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

Оглавление

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

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

Поиск «Советов»

Промостраница юридического сервиса «Договоры»

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

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

Дру­гой спо­соб — систе­ма­ти­зи­ро­вать раз­ме­ры «пре­вью­шек» и рас­по­ло­жить пря­мо­уголь­ной матрицей.

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

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

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

Дру­гой спо­соб — систе­ма­ти­зи­ро­вать раз­ме­ры «пре­вью­шек» и рас­по­ло­жить пря­мо­уголь­ной матрицей.

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

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

Поиск «Советов»

Промостраница юридического сервиса «Договоры»

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

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

Модуль с «фото­ра­мой» может быть не толь­ко вер­ти­каль­ным, но и горизонтальным.

Горизон­таль­ная фото­ра­ма на сайте «ИТАР‑ТАСС»

Верти­каль­ная фото­ра­ма на «Майспейсе»

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

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

Модуль с «фото­ра­мой» может быть не толь­ко вер­ти­каль­ным, но и горизонтальным.

Горизон­таль­ная фото­ра­ма на сайте «ИТАР‑ТАСС»

Верти­каль­ная фото­ра­ма на «Майспейсе»

Тест

Выберите неудачное положение гиперссылок в текстовом модуле.

Выберите самый приемлемый вариант вёрстки текстового модуля.

Выберите плохие варианты вёрстки ленты.

Какая компоновка соответствует эталонной последовательности?

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Выберите неудачное положение гиперссылок в текстовом модуле.

Выберите самый приемлемый вариант вёрстки текстового модуля.

Выберите плохие варианты вёрстки ленты.

Какая компоновка соответствует эталонной последовательности?

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Форма текста и порядок чтения

Чело­век чита­ет сле­ва напра­во, свер­ху вниз.

Для про­сто­ты обо­зна­чим чте­ние по колон­ке вер­ти­каль­ной стрелкой.

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

Форма текста и порядок чтения

Чело­век чита­ет сле­ва напра­во, свер­ху вниз.

Для про­сто­ты обо­зна­чим чте­ние по колон­ке вер­ти­каль­ной стрелкой.

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

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

Направ­ле­ние чте­ния по колон­кам изо­бра­зим гори­зон­таль­ной стрелкой.

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

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

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

Направ­ле­ние чте­ния по колон­кам изо­бра­зим гори­зон­таль­ной стрелкой.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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