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

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

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

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

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

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

Чем проще содер­жа­ние стра­ницы, тем меньше слоёв и тем они одно­об­раз­нее, чем слож­нее струк­тура — тем больше слоёв и разнообразия.

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

Чем проще содержание страницы, тем меньше слоёв и тем они однообразнее, чем сложнее структура — тем больше слоёв и разнообразия.

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

Рас­смот­рим отдельно осо­бен­ный тип модуля с иллю­стра­ци­ями — «галерею»:

Плохо

Хорошо

Сайт «Мэри Трюфель»

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

Мы не под­дер­жи­ваем путь лени­вых веб‑дизай­не­ров — мёрт­вые одно­об­раз­ные мат­рицы из фото­гра­фий. Жизнь при­хо­дит с раз­но­об­ра­зием раз­ме­ров и формы.

Рассмотрим отдельно особенный тип модуля с иллюстрациями — «галерею»:

Плохо

Хорошо

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

Сайт «Мэри Трюфель»

Мы не поддерживаем путь ленивых веб‑дизайнеров — мёртвые однообразные матрицы из фотографий. Жизнь приходит с разнообразием размеров и формы.

Кирпично

Интересно

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

Скучно, душно и моно­тонно. Такой модуль выгля­дит тяже­ло­весно и с тру­дом встра­и­ва­ется в стра­ницу рядом с другими.

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

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

Кирпично

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

Скучно, душно и монотонно. Такой модуль выглядит тяжеловесно и с трудом встраивается в страницу рядом с другими.

Интересно

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

На примере с горизонтальной фотографией у модуля появилось два набора полей — внешний, вокруг большой фотографии, и внутренний, вокруг вертикальной фотографии и подписи к ней.

Плохо

Хорошо

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

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

Плохо

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

Хорошо

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

Текстовая страница

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

В отличие от модульной страницы, состоящей из отдельных блоков‑атомов, текстовая страница представляет собой поток для последовательного чтения — например как этот разворот. Подобно длинной молекуле полимера, текстовая страница включает в себя разнообразные элементы в свободном порядке: подзаголовки, списки, таблицы и иллюстрации.

Модульная

Текстовая

Основной текст

Колонка основного текста занимает 60⁠—70% ширины окна компьютера или планшета. В «резиновой» вёрстке ширина текстовой полосы уменьшается или увеличивается с изменением размера окна или экрана. Но разрешение экранов постоянно растёт, поэтому имеет смысл ограничивать максимальную ширину колонки текста, чтобы строки не становились чрезмерно длинными, а страница — трудной для чтения.

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

Текст, выровненный влево с рваным правым краем, должен «дышать» справа, то есть край формата или соседняя колонка не должны подходить к нему слишком близко.

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

Текстовая страница

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

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

Модульная страница

Текстовая страница

Основной текст

Колонка основ­ного тек­ста зани­мает 60⁠—70% ширины окна ком­пью­тера или план­шета. В «рези­но­вой» вёрстке ширина тек­сто­вой полосы умень­ша­ется или уве­ли­чи­ва­ется с изме­не­нием раз­мера окна или экрана. Но раз­ре­ше­ние экра­нов посто­янно рас­тёт, поэтому имеет смысл огра­ни­чи­вать мак­си­маль­ную ширину колонки тек­ста, чтобы строки не ста­но­ви­лись чрез­мерно длин­ными, а стра­ница — труд­ной для чтения.

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

Текст, выров­нен­ный влево с рва­ным пра­вым краем, дол­жен «дышать» справа, то есть край фор­мата или сосед­няя колонка не должны под­хо­дить к нему слиш­ком близко.

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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