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