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