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

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

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

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

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

Оглавление

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

Чаще всего подписи располагаются снизу или сбоку от своих объектов

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

Шрифт под­пи­сей обыч­но отли­ча­ет­ся от основ­но­го тек­ста мень­шим кег­лем или начертанием.

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

Чаще всего подписи располагаются снизу или сбоку от своих объектов

Шрифт под­пи­сей обыч­но отли­ча­ет­ся от основ­но­го тек­ста мень­шим кег­лем или начертанием.

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

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

Тест по базовым элементам

На иллюстрации простые заголовки текстовых блоков. Укажите заголовки с ошибками и моветоном в оформлении.

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

Как выглядит хорошо свёрстанный левым флагом текст?

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

Выберите варианты с правильным положением картины Жака‑Луи Давида относительно текста.

Перечислите недостатки «обтравленной» иллюстрации.

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

Перечислите визуальные недостатки формы заказа звонка.

У кнопки недостаточные боковые поля
Верхнее поле влезает в интерлиньяж подписи «Имя»
Надпись «Заказать звонок» визуально провалилась вниз
Нет графы «Фамилия»

Выберите предпочтительные варианты выделения ссылки в тексте.

Отметьте «бракованные» выносные линии на иллюстрации.

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

Тест по базовым элементам

На иллюстрации простые заголовки текстовых блоков. Укажите заголовки с ошибками и моветоном в оформлении.

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

Как выглядит хорошо свёрстанный левым флагом текст?

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

Выберите варианты с правильным положением картины Жака‑Луи Давида относительно текста.

Перечислите недостатки «обтравленной» иллюстрации.

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

Перечислите визуальные недостатки формы заказа звонка.

У кнопки недостаточные боковые поля
Верхнее поле влезает в интерлиньяж подписи «Имя»
Надпись «Заказать звонок» визуально провалилась вниз
Нет графы «Фамилия»

Выберите предпочтительные варианты выделения ссылки в тексте.

Отметьте «бракованные» выносные линии на иллюстрации.

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

3
Модули

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

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

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

3
Модули

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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