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