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

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

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

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

 
между важными местами
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

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

лучше

Блоки приобрели форму, смысл текста восстановлен

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

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

лучше

Блоки приобрели форму, смысл текста восстановлен

Направим мутации эталона в сторону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

Напра­вим мута­ции эта­лона в сто­рону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

По колонкам становятся и неоднородные элементы.

Даже заголовок может свеситься в одной из колонок. В такой конфигурации текст ничем не отделён сверху от соседних блоков и рискует «слипнуться» с их текстом. Но на простой странице это смотрится эффектно и «по‑швейцарски».

Руководство по фирменному стилю НАСА, 1976

По колон­кам ста­но­вятся и неод­но­род­ные элементы.

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

Руководство по фирменному стилю НАСА, 1976

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

Правило работает и в крупных блоках, и в малых формах

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

Правило работает и в крупных блоках, и в малых формах

Обычная лента из ссылок с подписями. Архив «Советов»

Журнал «Главбух»

Сайт «Бизнес‑обсервер»

Лента

Лента — разновидность текстового блока. Это список заголовков новостей, ссылок, рубрик или комментариев. Рассмотрим ленты без иллюстраций.

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

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

Лента

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

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

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

Обычная лента из ссылок с подписями. Архив «Советов»

Журнал «Главбух»

Сайт «Бизнес‑обсервер»

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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