# Типографика и вёрстка по курсу Бюро Горбунова

Как вместе с ИИ сверстать страницу, которую легко читать и трудно спутать с чужой: от расстояний между буквами до настроения всего макета.

Версия 1.0 · 30 октября 2026 года.

**Сначала порядок, потом характер.** Аккуратная вёрстка показывает, что с чем связано и с чего начать. Выразительная — о чём этот продукт и чем он отличается. Одно без другого не работает.

Рабочая библиотека для заказчика, дизайнера и ИИ-верстальщика. Правила помогают навести порядок и объяснить решение; что войдёт в макет, решает заказчик.

У каждого правила указана причина. Правило без причины ИИ применяет механически, а с причиной может понять, когда его стоит нарушить. В типографике это особенно важно: многие хорошие макеты сознательно нарушают одно правило ради другого.

## Как начать

Передайте агенту комплект вместе с задачей и материалами. Попросите сначала назвать главное и порядок чтения, потом сверстать, потом пройти проверку. Если нужно поправить один блок, хватит раздела 01 и проверки.

## Задание для агента

Прочитай методологию. Начни с содержания: что главное, что второстепенное, в каком порядке это читают. Верстай от расстояний: связанное ближе, несвязанное дальше. Не выравнивай случайно то, что не связано. Держи одну доминанту на модуль и меняй ритм от этажа к этажу. Проверяй вёрстку на длинных заголовках, коротких и длинных текстах и на телефоне. Шрифт и цвет выбирай по задаче и предметной области, а не по моде. Перед выдачей пройди проверку из раздела 06. Отделяй свои предположения о читателях и материалах от того, что сообщил заказчик.

## Что лежит в основе

Библиотека собрана по платному курсу «Типографика и вёрстка 2.0» (https://bureau.ru/lectures/typography/) Бюро Горбунова. Это самостоятельный пересказ и рабочая интерпретация с помощью ИИ, а не официальный стандарт бюро и не замена курсу: в лекциях десятки разборов настоящих макетов, которых здесь нет. Тексты лекций не копировались, примеры бюро и его клиентов не воспроизводятся.

Изучены текстовые версии всех 55 лекций курса в четырёх разделах: основы и базовые элементы, модули и страницы, шрифты, стиль и настроение. Видео не просматривались, иллюстрации к лекциям не разбирались глазами: их смысл взят из сопровождающего текста. В лекции 35 темы «авторы» и «социокнопки» из названия в текстовой версии не нашлись. Домашних заданий в курсе нет. Статусы относятся к 30 октября 2026 года.

## Состав комплекта

- START.md — порядок чтения.
- 01-principles.md — принципы с причинами.
- 02-elements.md — базовые элементы.
- 03-pages.md — модули и страницы.
- 04-fonts.md — шрифты.
- 05-expression.md — настроение и выразительность.
- 06-review.md — проверка перед выдачей.
- templates/layout-review.md — шаблон проверки макета.
- sources.csv — лекции и что из них изучено.


# Начало работы

Прочитайте README.md, затем 01-principles.md. Элементы оформляйте по 02-elements.md, страницу собирайте по 03-pages.md, шрифты выбирайте по 04-fonts.md, характер — по 05-expression.md, готовый макет проверяйте по 06-review.md. Шаблон лежит в templates/, источники — в sources.csv.

Текущие указания заказчика важнее правил комплекта. Начинайте с содержания и порядка чтения, а не со шрифтов и цветов. Не применяйте все правила подряд — выбирайте нужные задаче и называйте их, объясняя решение.


# Принципы

Основа вёрстки. Большинство частных правил — разрядка прописных, интерлиньяж, поля — следуют из нескольких общих. Применяйте те, что относятся к задаче, и помните: принципы иногда спорят друг с другом.

## Внутри теснее, чем снаружи

**Расстояния внутри объекта делайте меньше, чем расстояния вокруг него. Между буквами меньше, чем между словами; между строками больше, чем между словами; между заголовком и его текстом больше, чем между строками заголовка; поля плашки больше всего, что внутри неё.**

Глаз связывает то, что стоит ближе. Объекты вложены друг в друга, от штриха буквы до страницы, и на каждом уровне своя пара «внутри и снаружи». Если пара нарушена, слово разваливается на буквы, строки читаются столбиками, а заголовок прилипает не к тому тексту.

**Проверьте себя:** найдите самое крупное расстояние внутри блока. Меньше ли оно отступа до соседей?

Источник: курс «Типографика и вёрстка 2.0», лекция 1 «Правило внутреннего и внешнего».

## Меняешь одно — пересматриваешь всё

**После любой правки — другой шрифт, новая строка, новый элемент — заново проверьте все расстояния снизу вверх: трекинг, интерлиньяж, отступы между элементами, поля.**

У каждого шрифта свои просветы в буквах, а от них зависят все остальные расстояния. Новый элемент добавляет новую пару «внутри и снаружи». Сжимать композицию тоже лучше от мелкого к крупному: так появляется запас места без потери порядка.

**Проверьте себя:** что изменилось в макете последним, и какие расстояния от этого поехали?

Источник: курс «Типографика и вёрстка 2.0», лекция 1 «Правило внутреннего и внешнего»; лекция 11 «Базовый элемент: текст».

## Страница собирается из прямоугольников

**Делите макет на прямоугольные модули, которые не пересекаются и вместе снова дают прямоугольник страницы. Модуль не обязательно рисовать рамкой: его создают выравнивание и пустота.**

Прямоугольник легко делится на меньшие и складывается обратно, поэтому из него получаются понятные и устойчивые системы. Жёсткая сетка из одинаковых ячеек на экране не работает: содержимое приходит разное и меняется. Гибкое деление на прямоугольники работает всегда.

**Проверьте себя:** можно ли мысленно нарезать макет на прямоугольники без наложений и «лишних» кусков?

Источник: курс «Типографика и вёрстка 2.0», лекция 2 «Модульность»; лекция 7 «Точка, линия, прямоугольник».

## Выравнивание — это заявление о связи

**Выравнивайте друг с другом только связанные элементы. Несвязанные не должны совпадать ни по ширине, ни по высоте, ни по положению.**

Связанные элементы выровнены и образуют модуль. Обратное тоже верно: случайно выровненные чужие элементы образуют ложный модуль, и читатель решает, что фото относится к соседней заметке. Линейка такую ложную связь не разрывает; надёжнее убрать совпадение или разделить модули заголовком.

**Проверьте себя:** есть ли на макете элементы, выровненные «просто так»? Что читатель из этого решит?

Источник: курс «Типографика и вёрстка 2.0», лекция 24 «Псевдомодульность»; лекция 2 «Модульность»; лекция 23 «Направление чтения».

## Главное держится за угол, край или центр

**Самый заметный элемент модуля ставьте в угол, к краю или в визуальный центр — он чуть выше геометрического. Следующий элемент ставьте в другой угол или нанизывайте на первый.**

Без явной точки привязки элемент «висит», и непонятно, к чему он относится. Угол держит самый массивный элемент; массивность зависит от контраста с фоном, поэтому на тёмном модуле им может стать светлый текст. Растянутый от края до края блок теряет привязку — дайте ему воздух с одной стороны.

**Проверьте себя:** к какому углу или краю тянется каждый заметный элемент? Видно ли это сразу?

Источник: курс «Типографика и вёрстка 2.0», лекция 3 «Правило якорных объектов»; лекция 7 «Точка, линия, прямоугольник».

## Поля разные

**Не делайте одинаковые поля со всех сторон. Нижнее больше верхнего, правое при чтении слева направо больше левого. Отступ над линейкой или плашкой больше, чем под ней.**

Объект ровно посередине кажется провалившимся вниз: зрение делает поправку на тяжесть. Ровный левый край текста и рваный правый требуют воздуха справа. Одинаковые поля — частый признак любительской вёрстки.

**Проверьте себя:** нижнее поле заметно больше верхнего? Справа текст дышит?

Источник: курс «Типографика и вёрстка 2.0», лекция 4 «Формат и выбор полей»; лекция 11 «Базовый элемент: текст».

## Плотность — по жанру

**В табличке, номере, ценнике, газете, расписании информацию можно упаковать предельно плотно, даже нарушая правило внутреннего и внешнего. Плотность оправдана, когда читатель понимает, зачем её столько.**

У замкнутого маленького формата нет соседей, с которыми элемент мог бы случайно связаться, поэтому плотная упаковка выглядит собранно. Бюро называет это «эстетикой таблички». Опасность одна: при тесноте элементы начинают ошибочно связываться друг с другом.

**Проверьте себя:** это жанр плотной упаковки? Не склеились ли в тесноте чужие элементы?

Источник: курс «Типографика и вёрстка 2.0», лекция 5 «Эстетика таблички и маленьких форматов»; лекция 3 «Правило якорных объектов».

## Без контраста макет забывается

**Делайте различия явными: заголовок намного крупнее текста, отступы заметно разные, текст чёрный, колонки разной ширины, этажи разной высоты и массы. Убирайте промежуточные размеры, из которых получается лестница почти одинаковых кеглей.**

Макет может соблюдать все правила и всё равно ничего не сообщать: глаз не знает, за что зацепиться. Близкие, но не одинаковые размеры выглядят случайностью, а явная разница — решением.

**Проверьте себя:** можно ли с первого взгляда назвать самое крупное, самое тёмное и самое мелкое на странице?

Источник: курс «Типографика и вёрстка 2.0», лекция 6 «Контраст в вёрстке».

## Ровнять по строчным, а не по рамке

**Верх строки — верх строчных букв, центр — середина строчных, низ — базовая линия. Текст в кнопке центрируйте по середине строчных. Заголовок рядом с текстом другого кегля выравнивайте по верху строчных.**

Глаз видит массу строчных букв, а не невидимую рамку текстового блока. Выравнивание по прописным или по рамке в редакторе даёт текст, который будто провалился вниз. У гигантских заголовков и цифр выносные элементы уже часть рисунка, их учитывают как у картинки.

**Проверьте себя:** не кажется ли текст в кнопке или рядом с заголовком съехавшим вниз?

Источник: курс «Типографика и вёрстка 2.0», лекция 8 «Выравнивание по вертикали»; лекция 12 «Шпаргалка: интерлиньяж, кернинг и трекинг».

## Одна доминанта на модуль

**В каждом модуле и на каждой странице одна главная картинка или один главный блок, остальное заметно мельче. Матрица одинаковых превью — крайний случай, когда нужно именно сравнение.**

Регулярность скучна и ничего не сообщает: читателю приходится самому решать, с чего начать. Иерархия «главное — второстепенное — мелочь» задаёт порядок просмотра и делает страницу живой. Второстепенное не должно спорить с главным по размеру.

**Проверьте себя:** что здесь главное? Отличается ли оно по размеру от второго по важности?

Источник: курс «Типографика и вёрстка 2.0», лекция 25 «Доминирующие и вспомогательные иллюстрации»; лекция 26 «Вертикальные иллюстрации»; лекция 29 «Модульная страница с иллюстрациями».

## Порядок чтения — слева направо и сверху вниз

**Стройте модуль в порядке чтения: картинка, заголовок, текст, ссылки. Колонки выравнивайте по верху. Матрицу, которую можно читать и вниз, и вправо, ломайте так, чтобы порядок был однозначным.**

Читатель дочитывает колонку и ищет продолжение справа вверху. Картинка под текстом создаёт второй полюс и цепляется за этаж ниже. Если порядок неоднозначен, нумерация не спасает: взгляд всё равно прыгает к ближайшему.

**Проверьте себя:** пройдите макет глазами. Есть ли место, где непонятно, куда смотреть дальше?

Источник: курс «Типографика и вёрстка 2.0», лекция 23 «Направление чтения»; лекция 21 «Текстовые модули с иллюстрациями».

## Меняйте ритм от этажа к этажу

**На длинной странице чередуйте число и ширину колонок, высоту и массу этажей, сторону, где стоит картинка, тип содержимого. Когда читатель устанет, дайте что-то резко другое — крупную картинку, плашку, цифру.**

Одинаковые этажи сливаются: непонятно, где кончился один материал и начался другой, и становится скучно на третьем повторе. Смена ритма одновременно развлекает и показывает границы. Но чередование без меры — «вакханалия колонок» — разваливает страницу.

**Проверьте себя:** есть ли подряд два этажа одинаковой конструкции? Не стало ли разных конструкций слишком много?

Источник: курс «Типографика и вёрстка 2.0», лекция 27 «Чередование ритма»; лекция 28 «Модульная страница без иллюстраций»; лекция 29 «Модульная страница с иллюстрациями».

## Сетка — после решения

**Сначала найдите визуальное решение, потом, если страница сложная и повторяется, наведите порядок сеткой и распространите её на другие страницы. Простой короткой странице сетка не нужна.**

Сетка — инструмент вроде линейки, а не источник дизайна. Объекты, разложенные по сетке без мысли, без неё не держатся. Сетка может быть любой: с нечётным числом колонок, несколькими сетками на странице, растущей вместе с окном.

**Проверьте себя:** сетка решает проблему этой страницы или просто стоит?

Источник: курс «Типографика и вёрстка 2.0», лекция 30 «Сетка»; лекция 31 «Шпаргалка: колонки, межколонники, поля».

## Выделять снаружи, а не внутри текста

**Не красьте и не выделяйте жирным слова посреди сплошного текста. Важное выносите наружу: в заголовок, вынос, фактоид, поле. Ссылки тоже лучше собрать отдельно, чем рассыпать по абзацу.**

Выделения внутри полотна рвут чтение и делают текст пёстрым. Когда в абзаце смешаны жирное, цветное и ссылки, читателю трудно понять, что из этого что. Чем однороднее «комки» одного вида, тем спокойнее страница.

**Проверьте себя:** есть ли в основном тексте выделения, без которых смысл не пострадает?

Источник: курс «Типографика и вёрстка 2.0», лекция 11 «Базовый элемент: текст»; лекция 10 «Базовые элементы»; лекция 16 «Базовый элемент: ссылка».

## Кликабельное выглядит кликабельным

**Ссылку и кнопку должно быть видно без наведения: цвет, отличный от текста, и признак — подчёркивание, стрелка, иконка, линейка. Текст ссылки понятен сам по себе, не переносится на две строки и стоит отдельно от соседних ссылок.**

Если по виду непонятно, что нажимается, человек не нажмёт или промахнётся. Ссылка из слова «объявил» посреди новости не говорит, куда ведёт. Большой блок со ссылкой лучше оформить как обычный текст с маленькой заметной строчкой-ссылкой, чем красить его целиком.

**Проверьте себя:** найдёт ли человек всё нажимаемое на скриншоте, без мыши?

Источник: курс «Типографика и вёрстка 2.0», лекция 16 «Базовый элемент: ссылка»; лекция 17 «Базовый элемент: элемент управления».

## Чёрный текст лучше серого

**Основной текст и заголовки делайте чёрными или почти чёрными. Серый используйте осознанно: для второстепенного или недоступного.**

Чёрный не вредит глазам и выглядит увереннее. Светло-серые подписи трудно читать: если информация важна, сделайте её заметнее, если нет — уберите. К тому же серый читается как «недоступно», и элемент с серой подписью кажется неработающим.

**Проверьте себя:** есть ли серый текст, который человеку на самом деле нужен?

Источник: курс «Типографика и вёрстка 2.0», лекция 11 «Базовый элемент: текст».

## Сообщение — вовремя и на месте

**Вместо всплывающего окна при входе подайте сообщение вёрсткой: компактной строкой, врезкой в тексте, блоком в конце статьи. Про куки — у формы, где они собираются; подписку — после того, как человек прочитал.**

Окно поперёк страницы мешает сделать то, зачем пришли, и его закрывают не читая. Несколько окон сразу дерутся друг с другом. Сообщение в контексте читают, потому что оно отвечает на вопрос, который уже возник.

**Проверьте себя:** можно ли превратить это окно в строку или врезку там, где оно нужно?

Источник: курс «Типографика и вёрстка 2.0», лекция 36 «Без попапов».

## Проверять худший случай

**Проверяйте заголовок в две строки, длинное имя, пустой и очень длинный текст, телефон шириной 375 пикселей. Если вёрстка держится только на идеальном тексте, введите редакционные ограничения.**

На сайте текст приходит из базы, в журнале после дизайнера верстает редакция, и длинный заголовок обязательно случится. То, что красиво на идеальном примере, разваливается на первом настоящем материале.

**Проверьте себя:** что будет с этим блоком, если текст станет вдвое длиннее или исчезнет?

Источник: курс «Типографика и вёрстка 2.0», лекция 1 «Правило внутреннего и внешнего»; лекция 19 «Текстовые модули без иллюстраций»; лекция 37 «Мобильная и адаптивная вёрстка».

## Шрифт — инструмент

**Выбирайте шрифт под задачу: для основного текста — удобный для чтения, для характера — особенный рядом с текстом. Системный шрифт не стыдно взять: он мгновенно загружается.**

Модный шрифт ради самовыражения делает дизайн претенциозным и хуже читаемым, а заезженный выдаёт шаблон. Характер дают акценты — заголовки, цифры, выносы, — а основной текст должен просто читаться.

**Проверьте себя:** что именно этот шрифт сообщает читателю, и стал ли от него текст хуже читаться?

Источник: курс «Типографика и вёрстка 2.0», лекция 40 «Шрифты на сайтах»; лекция 39 «Шрифты в тексте».

## Замените имя — и проверьте, что сломалось

**Подставьте в макет чужое имя, другой товар, другую тему. Если ничего не сломалось, у макета нет характера: продумайте настроение и предметную область.**

Гигиенически безупречный макет может быть безликим или вызывать не те ассоциации: аккуратная лесопилка в стиле технологического стартапа, предвыборный ролик в духе криминальной хроники. Безликий и неуместный дизайн хуже работает на дело.

**Проверьте себя:** если поменять название на конкурента, заметит ли кто-нибудь подмену?

Источник: курс «Типографика и вёрстка 2.0», лекция 47 «Выразительность».

## Нарушать можно, если ясна причина

**Правила спорят друг с другом: якоря тянут элементы к углам, а правило внутреннего и внешнего — друг к другу. Решайте в пользу смысла и выразительности, а не в голове: сверстайте оба варианта и сравните.**

Сознательное нарушение, которое читатель поймёт, делает макет сильнее: заголовок, относящийся ко всему экрану, стоит дальше от первого блока; обтравленный объект выходит за модуль. Случайное нарушение выглядит ошибкой.

**Проверьте себя:** можете ли вы в одной фразе объяснить, зачем здесь нарушено правило?

Источник: курс «Типографика и вёрстка 2.0», лекция 3 «Правило якорных объектов»; лекция 2 «Модульность»; лекция 53 «Сочетание выразительных средств»; лекция 55 «Выход из прямоугольника».


# Базовые элементы

Из чего собирается любая страница. Различайте элементы по назначению и не смешивайте их хаотично: заголовок, наполовину ставший ссылкой, или текст, где жирное перемешано со ссылками, выглядят неопрятно. Объединять функции можно, когда это упрощает: весь заголовок — одна ссылка, подпись поля — подсказка внутри поля.

## Основной текст

**Что это:** жидкость в стакане. Объём текста почти всегда заранее неизвестен, а дизайнер управляет стаканом: шириной колонки, кеглем и интерлиньяжем.

Ориентиры для экрана: кегль 12–16, иногда 18 пикселей; интерлиньяж около 1,2–1,4 кегля; в строке не меньше пяти-шести слов; колонка примерно 60–70 % ширины страницы. Шире колонка — больше интерлиньяж; крупнее кегль — меньше интерлиньяж в процентах. Абзацы разделяйте отступом, явно большим межстрочного просвета, но не пустой строкой. Последняя строка абзаца — от половины до трёх четвертей ширины. Длинный рассказ — в одну колонку: экранные колонки заставляют прыгать вверх и вниз.

**Частая ошибка:** одинаковый «на глаз» интерлиньяж для любой ширины колонки и любого шрифта, а ещё висячие предлоги, разорванные имя и фамилия, число и единица измерения.

Источник: курс «Типографика и вёрстка 2.0», лекция 11 «Базовый элемент: текст»; лекция 12 «Шпаргалка: интерлиньяж, кернинг и трекинг»; лекция 32 «Текстовая страница».

## Заголовок

**Что это:** называет страницу или блок, привлекает внимание и помогает решить, читать ли дальше.

Без точки в конце. Крупному заголовку не нужна жирность; если кегль как у текста — без неё не обойтись. Не дробите заголовок стилями. Длинное делите на заголовок и подзаголовок, короткую служебную информацию — рубрику, дату — выносите в бирку. Заголовок накрывает весь модуль, к которому относится, иначе кажется заголовком одной колонки. Переносите строки по смыслу.

**Частая ошибка:** заголовок, который повторяет текст под ним, и заголовок-«монстр» в одном кегле на три строки.

Источник: курс «Типографика и вёрстка 2.0», лекция 13 «Базовый элемент: заголовок»; лекция 19 «Текстовые модули без иллюстраций».

## Иерархия заголовков

**Что это:** показывает, как части страницы подчиняются друг другу.

Один H1 на страницу, самый крупный. Соседние уровни различаются и кеглем, и начертанием. Удобная схема для текстовой страницы: H2 заметно крупнее текста, H3 — тем же кеглем, что текст, но жирным. Отступ над H2 — примерно двойной абзацный, после — обычный абзацный. Четвёртый уровень — почти всегда признак того, что текст нужно отредактировать.

**Частая ошибка:** заголовок посередине между абзацами: он должен стоять ближе к своему тексту, чем к предыдущему.

Источник: курс «Типографика и вёрстка 2.0», лекция 33 «Иерархия заголовков»; лекция 32 «Текстовая страница».

## Лид

**Что это:** короткое вступление после главного заголовка: что интересного узнаешь и зачем читать.

Оформление явно отличается от текста, обычно крупнее. Десять строк или два абзаца — уже не лид. На телефоне крупный лид превращается в длинную простыню: уменьшайте его, сохраняя контраст с текстом, и ограничивайте длину редакционно.

**Частая ошибка:** лид, который пересказывает всю статью.

Источник: курс «Типографика и вёрстка 2.0», лекция 32 «Текстовая страница»; лекция 37 «Мобильная и адаптивная вёрстка».

## Список

**Что это:** однородные части, разбитые на строки.

Перед списком — обобщающее предложение с двоеточием или заголовок. Между пунктами чуть больше места, чем между строками, но меньше абзацного отступа — тогда видно, где список кончился. Пункты с цифрой и точкой — отдельные предложения с заглавной буквы; со скобкой — части одного предложения со строчной. Очень короткие пункты не разрежайте.

**Частая ошибка:** список без вводной фразы и пункты, построенные по-разному.

Источник: курс «Типографика и вёрстка 2.0», лекция 32 «Текстовая страница».

## Подпись

**Что это:** короткое пояснение к картинке, полю ввода, ссылке, скриншоту. Не обязательна, если всё понятно и так.

Читатель не должен гадать, к чему подпись: ставьте её вплотную к своему объекту, снизу или справа, а не легендой с номерами в углу. Одно предложение, без точки в конце, мельче основного текста, не шире текстовой колонки. Выносные линии на схеме — тонкие, не пересекаются и не перечёркивают важное.

**Частая ошибка:** подпись на три предложения: длинная история должна уйти в текст.

Источник: курс «Типографика и вёрстка 2.0», лекция 15 «Базовый элемент: подпись».

## Ссылка

**Что это:** ведёт на другую страницу.

Опознаваема (цвет и признак), информативна сама по себе, не переносится, разнесена с соседними — особенно для пальца. Ссылку внутри страницы используйте осторожно: человек ждёт перехода. В новой вкладке — только по веской причине. Ссылку на файл сопровождайте типом и весом.

**Частая ошибка:** ссылка на слове «здесь» или «подробнее» и текст, утыканный ссылками.

Источник: курс «Типографика и вёрстка 2.0», лекция 16 «Базовый элемент: ссылка»; лекция 32 «Текстовая страница».

## Кнопка и поле ввода

**Что это:** то, с чем взаимодействуют; по форме это точки, линии и прямоугольники.

Кнопка подстраивается под текст, но при коротком тексте шире, чтобы легко попасть. На телефоне кнопка во всю ширину — норма, на компьютере — перебор. Подпись поля — тем же кеглем, что и текст в поле. Форма идёт сверху вниз, одно поле под другим. Мелкие значки пристраивайте к более весомым соседям: ряд одинаковых иконок спорит сам с собой.

**Частая ошибка:** форма, где поля идут то в строку, то в столбик, то матрицей.

Источник: курс «Типографика и вёрстка 2.0», лекция 17 «Базовый элемент: элемент управления»; лекция 7 «Точка, линия, прямоугольник».

## Таблица

**Что это:** максимум информации на единицу площади.

Не растягивайте на всю ширину. Всё выравнивайте по левому и верхнему краю, числа — по разрядам. Уберите рамки, чересполосицу и заливки: они лечат плохую структуру. Полезна одна линейка — под шапкой. Длинной таблице — залипающая шапка. На телефоне — прокрутка с затемнением у края или перестройка строк в блоки.

**Частая ошибка:** таблица из трёх узких колонок, растянутая на весь экран.

Источник: курс «Типографика и вёрстка 2.0», лекция 18 «Базовый элемент: таблица»; лекция 37 «Мобильная и адаптивная вёрстка».

## Иллюстрация

**Что это:** самый заметный элемент: её видят раньше заголовка и понимают за доли секунды.

Начинайте макет с иллюстрации, а не с серого квадрата «потом подберём». Кадрируйте плотнее, но не впритык к главному и не по суставам. Направленная картинка смотрит на свой текст. Фото людей и чужие произведения не отражайте зеркально. Если фон фото сливается с фоном страницы, дайте ему границу. Примеряйте картинку к реальному окружению и соседям.

**Частая ошибка:** обтравленный человек, обрезанный снизу пустотой, и случайная стоковая картинка в последний момент.

Источник: курс «Типографика и вёрстка 2.0», лекция 14 «Базовый элемент: иллюстрация»; лекция 21 «Текстовые модули с иллюстрациями».

## Текст поверх картинки

**Что это:** работает, только если картинка это позволяет.

Подходящая картинка заранее оставляет место под текст: так снята или нарисована. Текст не закрывает лица и важное, не лежит на пёстром. Не затемняйте картинку тяжёлым градиентом. Если картинками не управляете — едва заметное затемнение и компактный текст в углу, а лучше поставить текст рядом.

**Частая ошибка:** признать, что картинка не годится под текст, — и всё равно положить текст.

Источник: курс «Типографика и вёрстка 2.0», лекция 22 «Текст поверх иллюстраций».

## Фактоид

**Что это:** крупная цифра с подписью.

Привлекает к материалу и ёмко сообщает факт. Цифры должны быть честными. Ставьте фактоид в угол или к краю модуля, рядом с абзацем — по верху абзаца, а не посреди. Фактоид — сильный носитель стиля: спокойная вёрстка и особенный шрифт цифр запоминаются. Промофактоид — довод в пользу покупки: доставка, гарантия, уход за вещью.

**Частая ошибка:** цифра ради цифры, без смысла для читателя.

Источник: курс «Типографика и вёрстка 2.0», лекция 35 «Уши, цитаты, фактоиды, врезки»; лекция 8 «Выравнивание по вертикали».

## Врезка и цитата

**Что это:** выносят мысль, которую заметят без чтения статьи.

Во врезку — только то, что этого заслуживает, иначе формату перестанут верить. Врезка — якорный объект: в угол или к краю модуля, рядом с абзацем, к которому относится. Короткие анонсы-«уши» наверху страницы ведут к разделам и вечным материалам.

**Частая ошибка:** врезка с проходной фразой.

Источник: курс «Типографика и вёрстка 2.0», лекция 35 «Уши, цитаты, фактоиды, врезки».

## Лента

**Что это:** список заголовков, новостей, писем, комментариев.

Однострочные ссылки можно дать голыми; многострочные разделяйте отступами, при нужде линейками. В горизонтальной ленте колонки одинаковой высоты. Главное делайте крупнее второстепенного. Конечная лента с отобранным лучше бесконечной однообразной.

**Частая ошибка:** высокая узкая боковая лента, которая не кончается.

Источник: курс «Типографика и вёрстка 2.0», лекция 20 «Модули с лентами».

## Галерея и плитка

**Что это:** собраны из картинок, которым отдана вся площадь.

Собирайте из разных размеров и форм, не матрицей одинаковых. Немного воздуха вокруг фото оживляет и встраивает блок в страницу; пустоты отжимайте наружу, чтобы не появлялись карманы и ступеньки. Для больших каталогов придумайте последовательность этажей с одинаковым числом товаров и отдельные этажи для остатка.

**Частая ошибка:** плотный «кирпич» картинок без иерархии.

Источник: курс «Типографика и вёрстка 2.0», лекция 29 «Модульная страница с иллюстрациями»; лекция 34 «Главная страница».

## Листалка

**Что это:** галерея, которая переключается кнопками.

Переключатели информативны: превью с названиями лучше превью, а превью лучше слепых точек. Число слайдов ограничьте правилами заранее, иначе оно бесконтрольно растёт. Автопрокрутка раздражает. Помните, что нажатие дороже прокрутки: до пятого слайда дойдут немногие.

**Частая ошибка:** десять точек без подписей.

Источник: курс «Типографика и вёрстка 2.0», лекция 34 «Главная страница».

## Меню на телефоне

**Что это:** должно показывать, что есть на сайте.

Значок «гамбургер» говорит только, что меню существует. Короткое меню — прямо в шапку, длинное — в прокручиваемую полоску, где справа всегда виден кусочек следующего пункта.

**Частая ошибка:** всё меню за одной иконкой у сайта из трёх разделов.

Источник: курс «Типографика и вёрстка 2.0», лекция 37 «Мобильная и адаптивная вёрстка».


# Модули и страницы

Как из элементов собрать модули, а из модулей — страницу. Модульная страница — независимые блоки в любом порядке; текстовая — один поток, который читают сверху вниз.

## Эталонный модуль

Самая понятная конструкция — заголовок, который накрывает текст под ним. С иллюстрацией порядок такой: картинка, заголовок, текст, ссылки. Чем ближе модули к эталону, тем легче собрать из них страницу. Ссылки «что дальше» ставьте в конце модуля, а единственную ссылку можно сделать из самого заголовка.

Модуль всегда прямоугольный, сколько бы в нём ни было колонок. Бирки и служебные пометки не должны вставать между заголовком и его текстом. Дробность растёт сверху вниз: наверху крупное и широкое, ниже мелкое и узкое — это заодно сигнал, что этаж закончился.

Источник: курс «Типографика и вёрстка 2.0», лекция 19 «Текстовые модули без иллюстраций»; лекция 21 «Текстовые модули с иллюстрациями».

## Картинка сбоку от текста

Если текст меняется, картинка слева опасна: под ней появляется пустота или текст начинает её обтекать и кажется, что читать надо снизу. Надёжнее поставить картинку справа, ограничить высоту блока или подстраивать картинку под текст в пределах нескольких строк. Картинка рядом с заголовком слева отрывает заголовок от текста, справа — не мешает.

В ленте с картинками иллюстрации не должны сливаться в отдельную колонку: расстояние между модулями должно быть больше, чем между картинкой и её текстом.

Источник: курс «Типографика и вёрстка 2.0», лекция 21 «Текстовые модули с иллюстрациями»; лекция 25 «Доминирующие и вспомогательные иллюстрации».

## Висячий заголовок

Заголовок сбоку от колонок эффектен, но на длинной странице опасен: модуль ничем не отделён от соседних этажей и слипается с ними, а под заголовком пропадает место. Он хорош в замкнутом формате — развороте, плакате — или когда редакционно ограничена длина текста и модуль всегда помещается в экран.

Источник: курс «Типографика и вёрстка 2.0», лекция 19 «Текстовые модули без иллюстраций».

## Модульная страница

Самая надёжная конструкция для шаблонов — модули слоями друг под другом. Мало данных или много — страница просто короче или длиннее, дыр не появляется. В начале — доминанта: заголовок страницы, главный блок или главная картинка; остальные этажи подчинены и мельче.

Картинки распределяйте по всей длине и ширине, а не на один борт и не только по краям. Плашкой выделяйте более важный из соседних модулей, особенно если у него другой ритм. Вертикальная боковая колонка разбавляет горизонтальную монотонность. Если ради разрыва ложных связей каждый этаж пришлось ставить на свою плашку, проблема в выравниваниях, а не в фоне.

Источник: курс «Типографика и вёрстка 2.0», лекция 28 «Модульная страница без иллюстраций»; лекция 29 «Модульная страница с иллюстрациями»; лекция 27 «Чередование ритма».

## Текстовая страница

Основная колонка — примерно 60–70 % ширины, с ограничением на очень широких экранах. Иллюстрацию ставьте после абзаца, а не посреди: от текста до неё меньше, чем от неё до следующего текста. Таблицу не растягивайте. Ссылки, примечания и факты можно вынести в боковую колонку; ссылка отдельной строкой в основной колонке тоже нормальна. Для серии связанных страниц — меню в боковой колонке.

Источник: курс «Типографика и вёрстка 2.0», лекция 32 «Текстовая страница».

## Главная страница

Главная вводит в курс дела и задаёт настроение. Её строят одним из четырёх способов. Лента — поток одинаково поданных материалов: просто, но важное тонет. Плитка — материалы в двух измерениях: живее, если плитки разного размера и разные по смыслу оформлены по-разному, с постоянными перебивками между потоками. Листалка — галерея с переключателями. Рубрикатор — для каждого сообщения заранее придумано место и своё оформление; самый гибкий вариант, может включать остальные.

Источник: курс «Типографика и вёрстка 2.0», лекция 34 «Главная страница».

## Сетка: параметры

Колонки, межколонники и поля. Внешние поля больше межколонника. Межколонник не слишком мал, иначе колонки склеиваются, и не слишком велик, иначе раздуваются отступы между этажами. Больше колонок — меньше межколонник; больше шестнадцати колонок обычно не нужно. Размеры — в целых пикселях. Сетку делайте как можно проще, а исключения оставляйте исключениями.

Источник: курс «Типографика и вёрстка 2.0», лекция 31 «Шпаргалка: колонки, межколонники, поля»; лекция 30 «Сетка».

## Телефон

Мобильную версию делайте на том же адресе, адаптивной вёрсткой. Ориентир минимальной ширины — 375 пикселей, всё уже — масштабировать. На телефоне всё линейно: колонки вытягиваются в одну, а примечание из боковой колонки встаёт сразу после своего абзаца, а не в конец. Две компактные колонки картинок могут остаться двумя.

Маленькие вспомогательные картинки при переносе в одну колонку не растягивайте на всю ширину, иначе они покажутся главными: оставьте их примерно в три четверти. Горизонтальная прокрутка этажа допустима для однородных элементов; покажите её забледнением у края, а не стрелкой. Аккуратно подобранный кегль текста часто подходит и телефону; уменьшайте прежде всего крупное — заголовки, лиды, выносы, — сохраняя контраст.

Источник: курс «Типографика и вёрстка 2.0», лекция 37 «Мобильная и адаптивная вёрстка».

## Редакционные ограничения

Многие правила вёрстки держатся на договорённостях с редакцией: максимальная длина заголовка и лида, число символов в анонсе, правила для картинок под текст. Вводите такие ограничения вместе с макетом, а не после первой поломки.

Источник: курс «Типографика и вёрстка 2.0», лекция 19 «Текстовые модули без иллюстраций»; лекция 22 «Текст поверх иллюстраций»; лекция 37 «Мобильная и адаптивная вёрстка»; лекция 13 «Базовый элемент: заголовок».


# Шрифты

Как выбрать и сочетать шрифты под задачу. Знать все шрифты не нужно; нужно понимать, что от шрифта требуется на конкретном носителе.

## Практическая классификация

Антиквы — с засечками; старый стиль с наклонной осью овалов и новый с вертикальной. Гротески — без засечек: гуманистические живые, с перепадом толщины, геометрические с правильными формами, и переходные. Брусковые — почти гротески с прямоугольными засечками. Акцидентные — шрифты с характером, для заголовков и настроения, а не для полотна текста. Узкие и широкие начертания, моноширинные для кода, вариативные с настраиваемыми осями.

Источник: курс «Типографика и вёрстка 2.0», лекция 38 «Шпаргалка: классификация шрифтов».

## Для основного текста

Антиква или гротеск — почти не важно, выбирайте по задаче и настроению. Хуже читаются геометрические гротески в мелком кегле (похожие «а» и «о»), сверхузкие и сверхширокие, моноширинные, скруглённые. Особенные шрифты ставьте рядом с текстом: в заголовки, выносы, цифры, цитаты.

Источник: курс «Типографика и вёрстка 2.0», лекция 39 «Шрифты в тексте».

## На сайте

Системные шрифты не стыдно брать даже для заголовков: они грузятся мгновенно. Бесплатные коллекции полезны, но многие шрифты в них заезжены. В сервисах и информационных сайтах текст и интерфейс — спокойным шрифтом, характер — через цифры и заголовки. Проверяйте шрифт в разных браузерах и системах: сглаживание отличается, и на Mac текст обычно выглядит жирнее, чем в редакторе.

Источник: курс «Типографика и вёрстка 2.0», лекция 40 «Шрифты на сайтах».

## В интерфейсе

По умолчанию — гротеск. Полезные свойства: табличные цифры одинаковой ширины для ровных столбцов, встроенные интерфейсные значки, много весов (огромные числа — тонким начертанием), одинаковая ширина надписи при любом весе, чтобы выделение не сдвигало соседей. Длинные выносные элементы мешают компактности.

Источник: курс «Типографика и вёрстка 2.0», лекция 41 «Шрифты в интерфейсе».

## В печати и навигации

В печати проверяйте шрифт до тиража: буквы могут заплыть. Для многоколонной вёрстки удобен чуть более узкий шрифт. С акциденцией в печати можно смелее. Для указателей нужны широкий диапазон весов и ширин, большие просветы внутри букв, крупные строчные, табличные цифры, «а», не похожая на «о», и набор значков — стрелки, лестницы, лифты.

Источник: курс «Типографика и вёрстка 2.0», лекция 42 «Шрифты в журналах, газетах, афишах»; лекция 43 «Шрифты в навигации».

## В айдентике

Шрифт — один из главных носителей узнаваемости. Можно взять готовый шрифт, можно два-три шрифта в необычном сочетании. Не обязательно делать уникальным всё: текст нейтральный, характер — в акцентах. Для цен и цифр иногда достаточно нарисовать маленький шрифт только из цифр. Логотип можно вырастить из шрифта, переработав его так, чтобы он стал своим, и с оглядкой на лицензию.

Источник: курс «Типографика и вёрстка 2.0», лекция 44 «Шрифты в айдентике».

## Сочетание

Чем больше шрифтов, тем больше шанс ошибиться. Безопасные пути: один шрифт в нескольких весах и кеглях, большая семья начертаний, антиква и гротеск одной суперсемьи, максимальный контраст — грубый гротеск рядом с изящной антиквой. Сочетание зависит от разницы кеглей: мелкий кегль сочетается почти с любым очень крупным, при близких размерах подбирать нужно тоньше. Подсматривайте сочетания в реальных проектах студий, которым доверяете.

Источник: курс «Типографика и вёрстка 2.0», лекция 45 «Сочетание шрифтов».

## Поиск, хранение, лицензии

Собирайте шрифты по мере проектов и храните с пометкой, для чего они подошли. Платные шрифты — только с лицензией, а если шрифт будет использовать клиент, лицензия нужна клиенту. Лицензии бывают для веба, компьютеров, приложений, видео и логотипов, у каждой студии свои условия. Для примерки есть аренда и пробные версии.

Источник: курс «Типографика и вёрстка 2.0», лекция 46 «Поиск и хранение шрифтов»; лекция 38 «Шпаргалка: классификация шрифтов».


# Настроение и выразительность

Когда порядок наведён, остаётся вопрос, о чём макет и чем он отличается от тысячи похожих. По силе воздействия инструменты идут так: иллюстрация и шрифт, затем композиция, затем цвет. Сильнее всего — их сочетание.

## Сначала вопрос о характере

Определите главные качества предмета: что это, какую эмоцию вызывает, чем отличается от конкурентов. Если у предмета нет своего образа, решите, что должен почувствовать человек. Дальше выбирайте средства под этот ответ, а не под моду: повторять за витринами чужих работ значит повторять за теми, кто сам повторяет.

Источник: курс «Типографика и вёрстка 2.0», лекция 47 «Выразительность»; лекция 48 «Выразительность: культурные традиции».

## Нейтральный скелет

Удобно опереться на одну из двух европейских традиций. Классическая — антиква, гармоничные поля, изящные иллюстрации — подходит для вдумчивого чтения, науки, дорогих вещей. Интернациональный стиль — флаговый набор, контраст кеглей, модульная сетка — универсальный язык деловой информации, навигации, интерфейсов. Это основа, а «во что нарядить» решают дальше.

Источник: курс «Типографика и вёрстка 2.0», лекция 48 «Выразительность: культурные традиции».

## Иллюстрация

Одной сильной картинки бывает достаточно, чтобы задать настроение всему макету, а слабую не спасёт никакая типографика. Хорошую иллюстрацию делайте крупнее и не мешайте ей текстом; невзрачную заменяйте. Стиль рисунка подбирайте под настроение.

Источник: курс «Типографика и вёрстка 2.0», лекция 49 «Выразительность: иллюстрация».

## Шрифт

У шрифта есть характер. Выберите шкалы: историчное — технологичное (антиква — гротеск), человечное — обезличенное (гуманистический — геометрический гротеск), весёлое, опасное, надёжное. Найдите несколько кандидатов и примерьте их в макет, на разных страницах и носителях, а не в голове. Следите, чтобы шрифт не посылал сигналов чужой предметной области. Не перегибайте: мелочи, которые не кричат, в сумме дают больше.

Источник: курс «Типографика и вёрстка 2.0», лекция 50 «Выразительность: шрифт».

## Цвет

Сначала изучите предметную область: где принятые цвета есть, им следуют, даже в ущерб привычной вам читаемости. У цветов устойчивые ассоциации: синий — ссылка, зелёный — успех, жёлтый — внимание и скидки, красный — опасность и ошибка. Бойтесь «тухлых» сероватых сочетаний — они делают предмет безрадостным, и нужен свежий взгляд, чтобы это заметить. Бледный розовый и голубой чистите добавкой жёлтого и циана, серый оживляйте оттенком.

Источник: курс «Типографика и вёрстка 2.0», лекция 51 «Выразительность: цвет».

## Композиция

Расположение повышает важность объекта, создаёт торжественность, порядок или хаос, привязывает к теме. Много воздуха вокруг героя — утончённость; герой, перекрывающий логотип, — сила. Сдвинутая и наклонённая надпись может заставить макет «танцевать», а разбитый с паузами заголовок — звучать весомее.

Источник: курс «Типографика и вёрстка 2.0», лекция 52 «Выразительность: композиция».

## Сочетание и спецэффекты

Комбинация шрифта, цвета, картинки и композиции позволяет сказать двойной смысл: строгий каркас снаружи и хаос внутри, консервативная основа и современные детали. Сначала сделайте правильную и удобную вёрстку, потом точечно ломайте систему: поверните, наложите, неожиданно раскрасьте. Откатиться к безопасному варианту всегда успеете.

Источник: курс «Типографика и вёрстка 2.0», лекция 53 «Сочетание выразительных средств».

## Культурный поиск

До дизайна соберите материалы по теме: шрифты, графику, цвета, узоры, иллюстрации эпохи и региона, людей, истории и события — и старое, и современные прочтения, чтобы не повторить чужое. На этапе сбора не отсеивайте «плохое». Ищите прежде всего в печати: журналах, плакатах, упаковке, книгах. Даже несколько часов поиска защищают от безликих решений.

Источник: курс «Типографика и вёрстка 2.0», лекция 54 «Выразительность: культурный поиск».

## Выход из прямоугольника

Модульная вёрстка — основа, но не догма. Иногда текст огибает форму, следует за рельефом или ломает прямоугольник ради образа — и всё равно читается. Это делают сознательно, когда порядок уже наведён.

Источник: курс «Типографика и вёрстка 2.0», лекция 55 «Выход из прямоугольника».


# Проверка перед выдачей

Пройдите по пунктам и честно отметьте, что не сходится. Не каждый пункт относится к каждому макету.

## Расстояния

- Внутри каждого блока теснее, чем вокруг него.
- Заголовок ближе к своему тексту, чем к предыдущему.
- Поля разные: нижнее больше верхнего, справа есть воздух.
- Отступы над и под линейкой или плашкой не равны.

## Модули и связи

- Макет нарезается на прямоугольники без наложений.
- Нет случайных выравниваний несвязанных элементов.
- Каждый заметный элемент привязан к углу, краю или центру.
- Порядок чтения однозначен.

## Иерархия и контраст

- Один H1, уровни заголовков явно различаются.
- В каждом модуле одна доминанта.
- Нет лестницы почти одинаковых кеглей.
- Соседние этажи различаются по ритму.

## Текст

- В строке не меньше пяти-шести слов, правый край не слишком рваный.
- Абзацный отступ больше межстрочного просвета.
- Нет выделений внутри полотна текста, серый текст обоснован.
- Подписи короткие и стоят у своих объектов.

## Ссылки и элементы управления

- Всё нажимаемое видно без наведения.
- Ссылки понятны без окружающего текста и не переносятся.
- Кнопки и ссылки разнесены, по ним легко попасть пальцем.
- Вместо всплывающих окон — сообщения в контексте.

## Худший случай и телефон

- Заголовок в две строки, пустой и длинный текст не ломают модуль.
- На ширине 375 пикселей порядок линейный и вспомогательное не кажется главным.
- Таблицы и длинные меню работают на телефоне.
- Ограничения для редакции записаны.

## Характер

- Если заменить название на чужое, подмену заметно.
- Шрифт, цвет и картинки говорят на языке предметной области.
- Каждое нарушение правил объясняется одной фразой.
- Для каждого заметного решения названо правило и чем рискуем.