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

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

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

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

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

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

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

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

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

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая книга Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фике и вёрстке с акцен­том на маке­ти­ро­ва­нии для экрана. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

«Типо­гра­фика и вёрстка» после­до­ва­тельно отве­чает на вопрос как. Автор вво­дит прин­ципы модуль­но­сти и якор­ных объ­ек­тов, пра­вило внут­рен­него и внеш­него. Затем шаг за шагом наглядно объ­яс­няет, как добиться акку­рат­ной и плот­ной вёрстки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Изда­тель­ство
Бюро Гор­бу­нова, 2015

Оглавление

    Основы 4

    Базо­вые эле­менты 34

    Модули 74

    Стра­ницы 115

    Заклю­че­ние 155

удк 655.262
ббк 85.15
г67
г67
Горбунов А. С.
Типографика и вёрстка. —
М.: Изд‑во Бюро Горбунова, 2015
ISBN 978‑5‑9907024‑0‑0

Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.

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

«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Издательство
Бюро Горбунова, 2015

Оглавление

    Основы 4

    Базовые элементы 34

    Модули 74

    Страницы 115

    Заключение 155

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

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

Ссылка с тру­дом тер­пит пере­носы. Мно­го­строч­ные ссылки плохо выгля­дят, как любые выде­лен­ные над­писи и заголовки.

плохо

Ссылка — это вид текстового выделения, а автор придерживается принципа «выделение склоняется». Предлоги, союзы и другие слова, которые обычно приклеиваются неразрывными пробелами, включаются в ссылку (и выделяются) вместе со словами, к которым они относятся. Например, ссылка будет стоять на всём словосочетании «в совете», а не только со слова «совет», как диктует логика программиста.

Ссылка с трудом терпит переносы. Многострочные ссылки плохо выглядят, как любые выделенные надписи и заголовки.

плохо

Как свёрстано

Как воспринимается

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

Поэтому желательно сокращать длинные заголовки новостей, а при выделении частей текста не давать словам внутри ссылок переноситься на разные строки.

хорошо

Новости на Яндексе

Как свёрстано

Как воспринимается

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

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

хорошо

Новости на Яндексе

плохо

хорошо

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

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

плохо

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

хорошо

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

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

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

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

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

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

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

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

Подпись

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

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

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

Подпись

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось