🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку
Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку
Типографика и вёрстка
Типографика и вёрстка
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Оглавление
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Оглавление
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника
Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»
Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма
Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки
Общая конструкция сохранится, если соблюдать принцип модульности
Макет развалился
Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами
Каждый из показанных здесь прямоугольников годится.
Принцип требует, чтобы привязка к силовой точке была очевидной. Для этого с противоположных сторон от якорного объекта должны быть «воздух» контрпространства либо менее плотные и заметные объекты.
По моим наблюдениям, самая частая ошибка новичка — забыть «воздух».
У правого края флагового набора всегда должно быть дополнительное свободное пространство. Тогда «флаг» выглядит флагом — как положено.
В жизни редко приходится верстать страницу из одного объекта. Второстепенные объекты модуля пристраиваются к якорным и иногда даже слегка сдвигают их из точек привязки.
Объекты нанизываются друг на друга, как бусы. Общая конструкция сохранится, если соблюдать принцип модульности, то есть выравнивать объекты друг с другом по ширине и высоте и сохранять прямоугольную форму модулей.
Но якорные объекты всегда выпрыгивают из вёрстки. Если у них не будет точки привязки, макет развалится.
Объект может неожиданно стать якорным, то есть более заметным, не только при увеличении размеров, но и при смене цвета.
Каждый из показанных здесь прямоугольников годится.
Принцип требует, чтобы привязка к силовой точке была очевидной. Для этого с противоположных сторон от якорного объекта должны быть «воздух» контрпространства либо менее плотные и заметные объекты.
По моим наблюдениям, самая частая ошибка новичка — забыть «воздух».
У правого края флагового набора всегда должно быть дополнительное свободное пространство. Тогда «флаг» выглядит флагом — как положено.
В жизни редко приходится верстать страницу из одного объекта. Второстепенные объекты модуля пристраиваются к якорным и иногда даже слегка сдвигают их из точек привязки.
Объекты нанизываются друг на друга, как бусы. Общая конструкция сохранится, если соблюдать принцип модульности, то есть выравнивать объекты друг с другом по ширине и высоте и сохранять прямоугольную форму модулей.
Но якорные объекты всегда выпрыгивают из вёрстки. Если у них не будет точки привязки, макет развалится.
Объект может неожиданно стать якорным, то есть более заметным, не только при увеличении размеров, но и при смене цвета.
Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника
Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»
Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма
Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки
Общая конструкция сохранится, если соблюдать принцип модульности
Макет развалился
Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами
Якорный объект может быть привязан не к точке, а к одной из сторон прямоугольника.
Такая привязка выглядит спокойно.
Якорный объект может быть привязан не к точке, а к одной из сторон прямоугольника.
Такая привязка выглядит спокойно.
Хорошая вёрстка использует силу углов и сторон формата. На обратной стороне коробок картриджей Т2 якорные объекты активируют верхние углы и нижнюю сторону:
Якорные объекты образуют иерархию: первыми замечают иллюстрации и любые картинки, затем крупные заголовки, далее логотипы, знаки и цифры. Наборный текст — самый нейтральный. В качестве упражнения предлагаю читателям самостоятельно разобрать принцип якорных объектов на этих примерах.
Хорошая вёрстка использует силу углов и сторон формата. На обратной стороне коробок картриджей Т2 якорные объекты активируют верхние углы и нижнюю сторону:
Якорные объекты образуют иерархию: первыми замечают иллюстрации и любые картинки, затем крупные заголовки, далее логотипы, знаки и цифры. Наборный текст — самый нейтральный. В качестве упражнения предлагаю читателям самостоятельно разобрать принцип якорных объектов на этих примерах.
Афиша
Андрея
Коржица
Применение модульности и якорных объектов
В рубрику «советы» на сайте бюро обратился Андрей Коржиц с просьбой помочь улучшить афишу:
«Хотелось бы узнать ваши замечания по размещению текстовой информации. Использовалось три кегля (не считая официальной обязательной надписи внизу восьмым кеглем) и две гарнитуры».
Применение модульности и якорных объектов
В рубрику «советы» на сайте бюро обратился Андрей Коржиц с просьбой помочь улучшить афишу:
«Хотелось бы узнать ваши замечания по размещению текстовой информации. Использовалось три кегля (не считая официальной обязательной надписи внизу восьмым кеглем) и две гарнитуры».
Афиша
Андрея
Коржица
Подпись автора должна быть скромной, но без неё нельзя
Обложка журнала «Афиша‑Еда»
В прошлой главе мы объявили, что все блоки — модули макета — должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены. Это не значит, что любой макет должен быть заполнен информацией, как ванная комната плиткой — главное, чтобы прямоугольники читались. В вёрстке полноправно участвует пустота, или контрпространство, а элементы вёрстки в модулях должны следовать правилу якорных объектов.
Макет устроен по принципу сендвича.
Соседние слои бутерброда контрастируют друг с другом, и это хорошо. Если не использовать принцип чередования, слои начнут сливаться, и тогда не спасут ни линейки, ни дополнительные отступы.
Но слоёв‑модулей слишком много — целых девять. Из‑за этого афиша выглядит дробной и сложной.
Кроме того, сами модули не прямоугольны и имеют разные размеры. Поэтому они плохо стыкуются друг с другом и не составляют общий прямоугольник макета.
Я рекомендую начинать с самых крупных и важных, якорных объектов. В данном случае это заголовок акции. Якорные объекты должны находиться либо у краёв своего прямоугольника, либо в визуальном центре. Поскольку мы предполагаем, что модулей будет несколько, пока выберем произвольную высоту. Заголовок, подзаголовок и начало текста лучше не разрывать.
Добавим иллюстрацию. Коричневую лужу сразу заменим на зелёную травку.
На самом деле, картинку заметят раньше текста, поэтому для естественного чтения иллюстрацию лучше ставить выше заголовка.
Поставив картинку и заголовок, мы ответили на вопрос что. Ответим на вопросы когда и где, добавив этаж с датой и адресом. Обратите внимание, что колонки нового модуля имеют одинаковую высоту.
Добавим строки культурной программы. Один из элементов списка явно выбивается по длине.
Конечно, можно попытаться сократить первую строчку. Но в ней содержится важное сообщение о бесплатных консультациях и название спонсора.
Почему бы не выделить «фичу» из общего ряда, к тому же есть и другая — палатка помощи. Получается слишком много этажей — а ведь мы ещё не разместили всю информацию.
Переставим и подкрасим фичи в боковой колонке, придав ей высоту модуля.
Названия и адреса организаций расставим в подвале в виде колоночек одинаковой высоты. Логотип тоже подчиним модулю.
Освободим место для телефонов, подняв иллюстрацию и текстовую часть. Телефоны стали частью подвального модуля, поэтому логотип подрос.
Итак, мы собрали конструкцию — получилась традиционная афиша события с датой.
Попробуем поставить призыв к действию в более логичное место — в конец.
Получается неплохо по смыслу — сначала что, потом уже когда и куда. Однако нарушаются сразу все принципы хорошей конструкции: якорные объекты — заголовок и даты — расплылись по макету, соседние этажи не контрастируют, большая часть макета превратилась в груду текста.
Поэтому мы остановимся на предыдущей компоновке и займёмся нюансами.
Постараемся согласовать элементы макета, сделав его более цельным.
Пусть наша иллюстрация поиграет с текстом, привлечёт к нему внимание. Выдвинем папину голову в модуль с датой, для этого не грех скорректировать картинку.
Обратимся к заголовку. Отцепим слово «акция», избавимся от кавычек и наберём заголовок крупнее. Слово «акция» приклеим к началу заголовка.
Назовём такую конструкцию заголовка «биркой». Советую её запомнить: она удобна для выделения рубрик и ключевых слов. Бирка делает заголовок законченным, одетым и более дорогим. Бирка для заголовка — то же, что засечка для буквы, карниз для здания, подпись для картинки. Как правило, бирка контрастирует с заголовком: жирный с нежирным, капитель со строчными.
Теперь смысловая текстовая часть. Развеселим по‑афишевски (т. е. в стиле журналов «Афиши») строки списка цветами и стилями. Одну из «фич» выделим зелёной травкой в стиле иллюстрации, чтобы дополнительно объединить части макета.
Заодно систематизируем вертикальные отступы и интерлиньяжи по «правилу внутреннего и внешнего».
Логотип в подвале стоит уменьшить. Заодно приведём к общему знаменателю цветовой акцент в телефонах.
В прошлой главе мы объявили, что все блоки — модули макета — должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены. Это не значит, что любой макет должен быть заполнен информацией, как ванная комната плиткой — главное, чтобы прямоугольники читались. В вёрстке полноправно участвует пустота, или контрпространство, а элементы вёрстки в модулях должны следовать правилу якорных объектов.
Макет устроен по принципу сендвича.
Соседние слои бутерброда контрастируют друг с другом, и это хорошо. Если не использовать принцип чередования, слои начнут сливаться, и тогда не спасут ни линейки, ни дополнительные отступы.
Но слоёв‑модулей слишком много — целых девять. Из‑за этого афиша выглядит дробной и сложной.
Кроме того, сами модули не прямоугольны и имеют разные размеры. Поэтому они плохо стыкуются друг с другом и не составляют общий прямоугольник макета.
Я рекомендую начинать с самых крупных и важных, якорных объектов. В данном случае это заголовок акции. Якорные объекты должны находиться либо у краёв своего прямоугольника, либо в визуальном центре. Поскольку мы предполагаем, что модулей будет несколько, пока выберем произвольную высоту. Заголовок, подзаголовок и начало текста лучше не разрывать.
Добавим иллюстрацию. Коричневую лужу сразу заменим на зелёную травку.
На самом деле, картинку заметят раньше текста, поэтому для естественного чтения иллюстрацию лучше ставить выше заголовка.
Поставив картинку и заголовок, мы ответили на вопрос что. Ответим на вопросы когда и где, добавив этаж с датой и адресом. Обратите внимание, что колонки нового модуля имеют одинаковую высоту.
Добавим строки культурной программы. Один из элементов списка явно выбивается по длине.
Конечно, можно попытаться сократить первую строчку. Но в ней содержится важное сообщение о бесплатных консультациях и название спонсора.
Почему бы не выделить «фичу» из общего ряда, к тому же есть и другая — палатка помощи. Получается слишком много этажей — а ведь мы ещё не разместили всю информацию.
Переставим и подкрасим фичи в боковой колонке, придав ей высоту модуля.
Названия и адреса организаций расставим в подвале в виде колоночек одинаковой высоты. Логотип тоже подчиним модулю.
Освободим место для телефонов, подняв иллюстрацию и текстовую часть. Телефоны стали частью подвального модуля, поэтому логотип подрос.
Итак, мы собрали конструкцию — получилась традиционная афиша события с датой.
Попробуем поставить призыв к действию в более логичное место — в конец.
Получается неплохо по смыслу — сначала что, потом уже когда и куда. Однако нарушаются сразу все принципы хорошей конструкции: якорные объекты — заголовок и даты — расплылись по макету, соседние этажи не контрастируют, большая часть макета превратилась в груду текста.
Поэтому мы остановимся на предыдущей компоновке и займёмся нюансами.
Постараемся согласовать элементы макета, сделав его более цельным.
Пусть наша иллюстрация поиграет с текстом, привлечёт к нему внимание. Выдвинем папину голову в модуль с датой, для этого не грех скорректировать картинку.
Обратимся к заголовку. Отцепим слово «акция», избавимся от кавычек и наберём заголовок крупнее. Слово «акция» приклеим к началу заголовка.
Назовём такую конструкцию заголовка «биркой». Советую её запомнить: она удобна для выделения рубрик и ключевых слов. Бирка делает заголовок законченным, одетым и более дорогим. Бирка для заголовка — то же, что засечка для буквы, карниз для здания, подпись для картинки. Как правило, бирка контрастирует с заголовком: жирный с нежирным, капитель со строчными.
Теперь смысловая текстовая часть. Развеселим по‑афишевски (т. е. в стиле журналов «Афиши») строки списка цветами и стилями. Одну из «фич» выделим зелёной травкой в стиле иллюстрации, чтобы дополнительно объединить части макета.
Заодно систематизируем вертикальные отступы и интерлиньяжи по «правилу внутреннего и внешнего».
Логотип в подвале стоит уменьшить. Заодно приведём к общему знаменателю цветовой акцент в телефонах.
Подпись автора должна быть скромной, но без неё нельзя
Обложка журнала «Афиша‑Еда»
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей ФроловРазработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей ФроловРазработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015