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