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

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

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

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

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

Оглавление

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

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

Квадратные иллюстрации на странице
«Дизайн, кино и пуфики»

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

Квадратные иллюстрации на странице
«Дизайн, кино и пуфики»

Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

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

Карина Фомина смотрит на текст

Карина Фомина смотрит на текст

Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

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

Иллюстра­ция долж­на при­но­сить мак­си­маль­ный эффект от зани­ма­е­мой пло­ща­ди. Чтобы повы­сить инфор­ма­тив­ность и уси­лить воз­дей­ствие фото­гра­фии, нуж­но обре­зать лиш­ние объ­ек­ты, фон и незна­чи­тель­ные дета­ли. Тим Харро­вер сове­ту­ет: «Обрезай­те фото­гра­фию, пока она не закричит».

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

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

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

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

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

Иллюстра­ция долж­на при­но­сить мак­си­маль­ный эффект от зани­ма­е­мой пло­ща­ди. Чтобы повы­сить инфор­ма­тив­ность и уси­лить воз­дей­ствие фото­гра­фии, нуж­но обре­зать лиш­ние объ­ек­ты, фон и незна­чи­тель­ные дета­ли. Тим Харро­вер сове­ту­ет: «Обрезай­те фото­гра­фию, пока она не закричит».

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

Плохо

Небо сливается с белым фоном страницы

Хорошо

Лёгкая рамка
решает проблему

Фотогра­фия долж­на быть чёт­ко огра­ни­че­на соб­ствен­ным фоном или тон­кой пря­мо­уголь­ной рам­кой. Облака, схо­дя­щие «на нет» — ошибка.

То же отно­сится к гра­ни­цам обтрав­лен­ных иллю­стра­ций: они должны быть чётко очерчены.

Плохо

Небо сливается с белым фоном страницы

Фотогра­фия долж­на быть чёт­ко огра­ни­че­на соб­ствен­ным фоном или тон­кой пря­мо­уголь­ной рам­кой. Облака, схо­дя­щие «на нет» — ошибка.

Хорошо

Лёгкая рамка
решает проблему

То же отно­сится к гра­ни­цам обтрав­лен­ных иллю­стра­ций: они должны быть чётко очерчены.

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

Плохо

Хорошо

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

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

Плохо

Любовь Котова:
Отчет­ность за полу­го­дие в элек­трон­ном
виде сдают ком­па­нии, у кото­рых
за про­шлый год сред­не­спи­соч­ная
чис­лен­ность пре­вы­сила 50 человек

Хорошо

Любовь Котова:
Отчет­ность за полу­го­дие в элек­трон­ном
виде сдают ком­па­нии, у кото­рых
за про­шлый год сред­не­спи­соч­ная
чис­лен­ность пре­вы­сила 50 человек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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