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