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

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

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

Как начать

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

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

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

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

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

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

Таблица лекций и что из них изучено (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 пикселей порядок линейный и вспомогательное не кажется главным.
• Таблицы и длинные меню работают на телефоне.
• Ограничения для редакции записаны.

Характер

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