Типографика с ИИ: открытая библиотека правил вёрстки
Опубликовал библиотеку по типографике и вёрстке. Это третья в серии после редактуры и интерфейсов. В ней принципы вёрстки с причинами, базовые элементы страницы, правила для модулей и целых страниц, выбор шрифтов, настроение макета, вопросы для проверки и комплект документов, который можно передать своему агенту.
В основе — курс «Типографика и вёрстка 2.0» Бюро Горбунова, изученный с помощью ИИ. Библиотека — наш пересказ и рабочая интерпретация, а не официальный стандарт бюро и не замена курсу.
Для меня главное здесь — расстояния. Агент охотно начинает со шрифтов и цветов, а порядок на странице создают отступы: что стоит ближе, то и связано. Если заголовок оказался ближе к чужому тексту, чем к своему, никакой красивый шрифт этого не исправит.
И второе: аккуратно — ещё не значит хорошо. Можно соблюсти все правила и получить страницу, которую не отличить от тысячи других. Поэтому в библиотеке есть простая проверка: подставьте в макет чужое название. Если ничего не сломалось, у макета нет характера.
Что можно взять себе
В библиотеке 21 принцип: «Внутри теснее, чем снаружи», «Выравнивание — это заявление о связи», «Одна доминанта на модуль», «Меняйте ритм от этажа к этажу», «Проверять худший случай» и другие. У каждого есть три части:
- само правило;
- почему оно работает;
- вопрос для самопроверки.
Например, правило «внутри теснее, чем снаружи» объясняет сразу десяток частных советов: зачем разрежать прописные, почему строки должны стоять дальше друг от друга, чем слова, и почему поля плашки больше всего, что внутри неё. Вопрос для проверки звучит так: меньше ли самое крупное расстояние внутри блока, чем отступ до соседей?
Кроме принципов, в библиотеке:
- 17 базовых элементов, от основного текста и заголовка до таблицы, фактоида и меню на телефоне: что это и где обычно ошибаются;
- 9 правил для модулей и страниц: эталонный модуль, модульная и текстовая страница, главная, сетка, телефон;
- 8 разделов о шрифтах: для текста, сайта, интерфейса, навигации, айдентики, сочетание и лицензии;
- 9 разделов о настроении: иллюстрация, шрифт, цвет, композиция и культурный поиск;
- 7 групп вопросов, чтобы проверить макет перед сдачей.
Как пользоваться с агентом
Скачайте комплект документов, распакуйте его и передайте агенту вместе с задачей и материалами. Попросите начать с START.md. Если удобнее прикрепить один файл, есть текстовая версия.
Первый шаг — не макет. Пусть агент скажет, что на странице главное, в каком порядке её читают и какое впечатление она должна оставить. Если он сразу взялся за шрифты, верните его к содержанию.
Не нужно применять все правила подряд. Принципы иногда спорят друг с другом, и хорошие макеты сознательно нарушают одно правило ради другого. Попросите агента называть правило у каждого заметного решения и одной фразой объяснять каждое нарушение.
Готовый макет удобно проверить по 06-review.md: разные ли поля, нет ли случайных выравниваний, одна ли доминанта в модуле, что будет с заголовком в две строки и на телефоне.
Что исследовано и где есть пробелы
Изучены текстовые версии всех 55 лекций курса в четырёх разделах: основы и базовые элементы, модули и страницы, шрифты, стиль и настроение. Домашних заданий в курсе нет.
Видео лекций не смотрели, иллюстрации к ним не разбирали глазами: их смысл взят из сопровождающего текста. В одной лекции, про уши, цитаты и фактоиды, части тем из названия в текстовой версии не нашлось. Главное, чего в библиотеке нет, — десятки разборов настоящих макетов. Ради них курс стоит пройти самому.
Курс платный, поэтому тексты лекций мы не копировали и примеры бюро не воспроизводили. Таблица лекций и статусов изучения доступна отдельно. Сведения в ней относятся к 30 октября 2026 года.