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