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

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

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

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

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

Оглавление

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

плохо

хорошо

Как ко всем дру­гим эле­мен­там, в отно­ше­нии ссы­лок дей­ству­ет реко­мен­да­ция «сме­шать комки».

Хорошо орга­ни­зо­ван­ная вёрст­ка состо­ит из одно­род­ных бло­ков подоб­ных элементов.

плохо

Как ко всем дру­гим эле­мен­там, в отно­ше­нии ссы­лок дей­ству­ет реко­мен­да­ция «сме­шать комки».

хорошо

Хорошо орга­ни­зо­ван­ная вёрст­ка состо­ит из одно­род­ных бло­ков подоб­ных элементов.

Ссылки могут быть сгруп­пи­ро­ва­ны в стро­ку — гори­зон­таль­ное меню.

Минималь­но допу­сти­мое рас­сто­я­ние меж­ду сосед­ни­ми ссыл­ка­ми, как меж­ду эле­мен­та­ми управ­ле­ния — при­мер­но два пробела.

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

Ссылки могут быть сгруп­пи­ро­ва­ны в стро­ку — гори­зон­таль­ное меню.

Минималь­но допу­сти­мое рас­сто­я­ние меж­ду сосед­ни­ми ссыл­ка­ми, как меж­ду эле­мен­та­ми управ­ле­ния — при­мер­но два пробела.

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

Оксфорд‑тест по английскому языку

Подпись

Под­пись — базо­вый эле­мент вёрстки.

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

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

Подпись

Под­пись — базо­вый эле­мент вёрстки.

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

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

Оксфорд‑тест по английскому языку

Угадайте, на что смотрят
Иидзаса и Бондарев,

и выиграйте бесплатное
занятие!

Подписи интригуют и развлекают читателя

Иллюстрации без подписи — бессмысленные декорации

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

Нумеро­ван­ные иллюстра­ции и отдель­ные под­писи неудоб­но искать.
Армин Хофманн. Руководство по графи­ческому дизайну: принципы и практика, 2001

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

Угадайте, на что смотрят
Иидзаса и Бондарев,

и выиграйте бесплатное
занятие!

Подписи интригуют и развлекают читателя

Иллюстрации без подписи — бессмысленные декорации

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

Нумеро­ван­ные иллюстра­ции и отдель­ные под­писи неудоб­но искать.
Армин Хофманн. Руководство по графи­ческому дизайну: принципы и практика, 2001

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

Выносные линии должны быть тонкими: не более 20% чёрного на экране или 0,25 п. на бумаге

Они не должны пересекаться между собой и должны как можно меньше пересекать изображение

Выносные линии не должны втыкаться в указываемую деталь

Не должны совпадать или идти параллельно с ближайшими линиями самой иллюстрации

Выносные линии должны иметь достаточную длину, чтобы их было легко заметить

Хорошо, если под­пись рас­по­ла­га­ется рядом с иллю­стра­цией. Лучше, если под­пи­саны отдель­ные детали.

Хорошо, если под­пись рас­по­ла­га­ется рядом с иллю­стра­цией. Лучше, если под­пи­саны отдель­ные детали.

Судья руководит, опрашивает стороны, выясняет обстоятельства и пишет судебные акты

Секретарь заседания ведёт протокол, проверяет явку, отправляет повестки, выдаёт решения и помогает судье

Секретарь заседания ведёт протокол, проверяет явку, отправляет повестки, выдаёт решения и помогает судье

Редкое чудо техники — монитор с информацией
о делах

Редкое чудо техники — монитор с информацией
о делах

Устраивайтесь там, где удобно. Если судья решит, что стороны сели «не так», он вас поправит

Свидетель отвечает на вопросы,
рассказывает об обстоятельствах

Чтобы что‑то сказать,
дайте это понять жестом.
Скорее всего, судья даст
вам слово

Чтобы что‑то сказать,
дайте это понять жестом.
Скорее всего, судья даст
вам слово

Если истец не докажет свои
требования — проиграет иск

Заранее выключите или обеззвучьте телефон

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

Вынос­ные линии должны быть тон­кими: не более 20% чёр­ного на экране или 0,25 п. на бумаге
Они не должны пере­се­каться между собой и должны как можно меньше пере­се­кать изоб­ра­же­ние
Вынос­ные линии не должны вты­каться в ука­зы­ва­е­мую деталь
Не должны сов­па­дать или идти парал­лельно с бли­жай­шими лини­ями самой иллю­стра­ции
Вынос­ные линии должны иметь доста­точ­ную длину, чтобы их было легко заме­тить
Скрыто 103 разворота

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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