Использование шрифтов в вёрстке: красивая книжная типографика

Основы типографики и читабельность длинного текста

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

Что типографика делает с длинным текстом

В длинном тексте типографика решает три задачи:

Снижает утомляемость глаз при длительном чтении

Помогает удерживать строку и находить начало следующей

Создаёт ровный визуальный ритм страницы, не отвлекающий от смысла

В книжной вёрстке вы не «украшаете» текст, а настраиваете среду чтения.

Базовые термины без которых нельзя

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

| Термин | Что означает | Где это контролировать (вёрстка/CSS) | |---|---|---| | Гарнитура | Семейство шрифтов (например, один шрифт с разными начертаниями) | font-family | | Начертание | Вариант внутри гарнитуры (обычный, курсив, полужирный) | font-style, font-weight | | Кегль | Размер букв (в печати обычно в пунктах, на экране — в px/rem) | font-size | | Интерлиньяж | Расстояние между строками (в вебе — высота строки) | line-height (MDN: line-height) | | Длина строки | Сколько знаков в одной строке (важно для удержания строки глазом) | ширина колонки, max-width | | Кернинг | Подстройка расстояния между конкретными парами букв | font-kerning (MDN: font-kerning) | | Трекинг | Равномерное изменение расстояний между буквами | letter-spacing | | Переносы | Разбиение слов для ровного края и плотности | hyphens (MDN: hyphens) | | Шрифтовые фичи | Лигатуры, капитель, табличные/пропорциональные цифры | font-variant (MDN: font-variant) |

Если хочется углубиться в базовую терминологию, полезная отправная точка — Wikipedia: Typography и Wikipedia: Кернинг.

Читабельность и разборчивость: в чём разница

Эти понятия часто смешивают, но в книжной вёрстке они решают разные проблемы.

Разборчивость — насколько легко отличать символы друг от друга.

Читабельность — насколько легко долго читать связный текст без потери темпа и внимания.

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

Главные параметры набора для длинного чтения

Ниже — практические «ручки», которыми вы управляете комфортом.

Кегль и “ощущаемый” размер

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

Практика:

Начинайте с умеренного размера и корректируйте по месту, ориентируясь на плотность и темп чтения

Не «компенсируйте» мелкий кегль увеличением насыщенности: это часто ухудшает комфорт

Длина строки

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

Практический ориентир для книжного текста:

45–75 знаков в строке (включая пробелы)

Это не закон, а рабочий диапазон, который затем подстраивают под формат, поля и гарнитуру.

Межстрочный интервал (line-height)

Высота строки определяет, «слипаются» ли строки и насколько легко глаз удерживает текущую строку.

Практика:

Для длинного чтения обычно нужен чуть больший интервал, чем «по умолчанию»

Повышайте line-height, если строка длинная или шрифт с плотной формой

Пример базовой настройки:

1.55 означает: высота строки равна 1.55 от размера шрифта. Это удобно тем, что пропорция сохраняется при смене кегля.

Абзацы: красная строка, отбивка и стабильный ритм

В длинном тексте важнее всего предсказуемость. Абзацы должны распознаваться мгновенно и одинаково на каждой странице.

Чаще всего используют один из двух подходов:

Отступ первой строки (классическая книжная норма)

Вертикальная отбивка между абзацами (чаще в цифровых форматах)

Главное правило:

Не смешивайте сильный отступ и сильную отбивку одновременно без причины

Пример для «книжного» подхода:

Выравнивание, пробелы и переносы

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

Что важно понимать:

Выравнивание по ширине без переносов обычно создаёт «реки» — заметные вертикальные дорожки из пробелов.

Переносы уменьшают растяжение пробелов и делают «серый цвет полосы» ровнее.

На вебе минимальная база выглядит так:

Тонкости переносов и межсловных интервалов описаны в спецификации W3C: CSS Text Module Level 3.

Контраст и “серый цвет полосы”

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

Факторы, которые чаще всего ломают ровность:

Слишком плотный line-height

Слишком длинная строка при узком межсловном интервале

Жёсткое выравнивание по ширине без переносов

Избыточно жирное начертание для основного текста

!Слева и справа показано, как настройки набора влияют на ровность текстовой полосы и появление «рек».

Микротипографика: мелочи, которые заметны на 50-й странице

Микротипографика — это не «украшения», а устранение мелких визуальных помех, которые накапливаются в длинном чтении.

Что обычно относится к микротипографике:

Лигатуры (например, fi, fl), если они уместны в гарнитуре

Капитель (малые прописные) для аббревиатур, если это поддерживается шрифтом

Тип цифр (пропорциональные или табличные; старостильные или линейные)

Корректные кавычки и тире, стабильные пробелы

Пример включения стандартных фич (если шрифт их поддерживает):

Важно: если шрифт не содержит нужных фич, CSS-команда не «создаст» их из воздуха — она только включает то, что заложено в файле шрифта.

Типичные ошибки в длинном тексте и как их чинить

| Ошибка | Как выглядит | Что сделать | |---|---|---| | Слишком длинная строка | глаз «теряет» начало следующей строки | сузить колонку, настроить поля, ограничить max-width | | Слишком тесные строки | строки слипаются, трудно держать строку | увеличить line-height | | Выравнивание по ширине без переносов | «реки», большие дырки между словами | включить переносы, пересмотреть ширину колонки | | Случайные пробелы и переносы строк | визуальные «шумы», ломается ритм | привести правила пробелов к единому стандарту | | Висячие строки (одна строка абзаца сверху/снизу) | слабая композиция страницы, «ступеньки» | настроить правила верстки и переносов, вручную править проблемные места |

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

Базовый пресет для “книжной” полосы в веб-вёрстке

Это не универсальный рецепт, а стартовая точка, чтобы быстро получить читаемый длинный текст.

Пояснения к ключевым решениям:

66ch задаёт комфортную ширину колонки в символах, приближая контроль к «знакам в строке»

hyphens: auto помогает выравниванию по ширине не разрушать межсловные интервалы

text-indent даёт книжную структуру абзацев без лишней вертикальной «дыры»

Чеклист: что проверить перед тем как считать набор готовым

Длина строки держится в комфортном диапазоне и не «расползается» на широких экранах.

Высота строки не создаёт слипание и не превращает страницу в «частокол».

Выравнивание по ширине не порождает заметных «рек».

Переносы работают предсказуемо и не превращают текст в частокол дефисов.

Абзацная структура единообразна по всей главе.

Курсив и полужирный используются экономно и не ломают общий тон полосы.

В следующей статье логично перейти от общих принципов к выбору гарнитуры и к тому, какие особенности шрифта особенно важны именно в книжном тексте.

Выбор шрифтовых гарнитур и построение шрифтовой пары

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

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

Термины, которые понадобятся

| Термин | Простое объяснение | Почему важно в книге | |---|---|---| | Гарнитура | Семейство шрифтов с родственными начертаниями | Даёт набор «деталей» для текста, выделений и заголовков | | Начертание | Вариант внутри гарнитуры: обычный, курсив, жирный | Если курсив плохой, длинный текст начинает «скрипеть» | | Текстовый шрифт | Шрифт для основного набора (абзацев) | Должен быть устойчивым на маленьких размерах | | Акцидентный шрифт | Шрифт для заголовков/обложек/выделений | Может быть выразительным, но не обязан выдерживать мелкий кегль | | Суперсемейство | Гарнитура, где есть и serif, и sans, часто с общими пропорциями | Самый простой способ собрать пару без конфликтов | | Поддержка языков (глифы) | Наличие нужных букв, знаков, диакритики, символов | Русский текст требует качественной кириллицы, а не «добавленной для галочки» | | Метрики шрифта | Встроенные размеры: высоты, отступы, межстрочные параметры | Влияют на то, как шрифт «садится» в строку и рядом с другим шрифтом |

Полезные справки по CSS-свойствам, которые будут встречаться:

MDN: font-family

MDN: font-weight

MDN: font-style

MDN: @font-face

MDN: font-display

Какие качества делают гарнитуру хорошей для длинного чтения

Ниже — практические критерии, которые можно проверить прямо в макете или в браузере.

Качество кириллицы и знаков препинания

Для русской книжной вёрстки важны не только буквы, но и мелочи, которые встречаются постоянно:

Кавычки-ёлочки «» и внутренние „“ (если вы их используете по правилам набора).

Тире и дефисы (в тексте обычно нужно длинное тире, а не короткий дефис).

Знаки ударения, если они появляются (например, в учебных или словарных материалах).

Практический тест:

Наберите 1–2 страницы реального текста.

Добавьте диалоги, числа, сокращения, скобки, цитаты.

Посмотрите, не выглядят ли кавычки и тире чужеродно по толщине и форме.

Устойчивый рисунок на малом кегле

Шрифт может быть красивым на постере и слабым в книге. В длинном тексте чаще всего ломается:

Слишком тонкие штрихи (текст «сереет» и утомляет).

Слишком тесные внутренние просветы в буквах (буквы «слипаются»).

Слишком резкий контраст штрихов (на экране может мерцать и «дрожать»).

Проверяйте в рабочем диапазоне кегля и line-height, который вы настроили ранее, а не на увеличенном образце.

!Схема показывает, как пропорции и «открытость» форм влияют на читаемость

Полноценный курсив и жирное начертание

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

Проверьте:

Курсив реально нарисован (а не механически наклонён).

В курсиве сохраняется читабельность и не появляется «грязь».

Жирный не становится слишком чёрным пятном в полосе.

В вебе механический наклон может случиться, если вы используете font-style: italic, но у файла шрифта нет italic-начертания. Браузер иногда делает имитацию.

Цифры: табличные и пропорциональные

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

Пропорциональные цифры имеют разную ширину и лучше смотрятся в обычном тексте.

Табличные цифры одинаковой ширины и полезны в таблицах и колонках чисел.

Если шрифт поддерживает OpenType-настройки, это обычно включается через font-variant-numeric.

Пример:

Справка: MDN: font-variant-numeric

Ровный «серый тон» и адекватная плотность

Из прошлой статьи: в длинном чтении оценивают не буквы, а общий тон полосы. Поэтому при выборе гарнитуры смотрите на абзац целиком:

Нет ли «пятнистости» из-за слишком контрастных форм.

Не проваливаются ли строки в «чёрную массу».

Не становится ли текст слишком бледным.

Если вы вынуждены компенсировать шрифт экстремальными настройками letter-spacing или слишком большим line-height, вероятно, это не лучший кандидат для основного набора.

Как выбрать гарнитуру для основного текста: пошаговый метод

Определите условия чтения

Вам нужны исходные ограничения, иначе сравнение будет нечестным:

Формат колонки (например, max-width около 60–70 знаков в строке).

Базовый кегль и line-height.

Цвет текста и фон.

Тип выравнивания и переносы.

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

Подберите 2–4 кандидата и тестируйте на реальном материале

Тестовый текст должен содержать:

Длинные абзацы.

Курсив, полужирный.

Сноски или примечания (если они будут).

Диалоги с тире.

Смешение букв и цифр.

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

Проверьте набор начертаний и диапазон font-weight

Для книги обычно нужен минимум:

Regular.

Italic.

Bold.

Bold Italic.

Если вы планируете сложную структуру (врезки, подписи, мелкий текст), полезны дополнительные веса.

В CSS веса задаются через font-weight, а конкретные файлы подключаются через @font-face.

Проверьте лицензию и источник шрифта

Это не «юридическая мелочь», а часть профессионального процесса:

Можно ли использовать шрифт в вебе.

Можно ли встраивать шрифт в файлы (например, в электронные книги).

Есть ли ограничения по просмотрам или доменам.

Если вы используете библиотеку, проверяйте условия у источника.

Например:

Google Fonts (у каждого шрифта указана лицензия)

Построение шрифтовой пары: роли и стратегии

Шрифтовая пара — это не просто «два красивых шрифта», а распределение ролей.

Сначала роли, потом эстетика

В книжной системе обычно есть такие роли:

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

Заголовки.

Подзаголовки.

Подписи к иллюстрациям.

Сноски.

Цитаты, эпиграфы, врезки.

Сильная пара — та, где шрифты помогают различать роли без лишнего декора.

Рабочие стратегии сочетания

| Стратегия | Как выглядит | Когда выбирать | Риски | |---|---|---|---| | Суперсемейство | Serif для текста + Sans для заголовков из одного рода | Почти всегда безопасно | Может получиться слишком нейтрально | | Контраст по классу | Serif + Sans разных семейств | Классический книжный приём | Легко получить конфликт пропорций | | Один шрифт, разные начертания | Один текстовый шрифт, заголовки тем же, но другой вес/капитель | Минимализм, академический стиль | Нужно, чтобы гарнитура имела богатый набор начертаний | | Контраст по эпохе/характеру | Традиционный текстовый + современный геометрический для заголовков | Когда нужна выразительная «обложечная» интонация | Есть риск отвлечь от чтения |

Что значит «конфликт» между шрифтами

Конфликт — это когда шрифты слишком похожи по базовым признакам, но отличаются в деталях, и из-за этого выглядят как ошибка.

Частый случай:

Два serif-шрифта с близкой пропорцией, но разной пластикой — кажется, что один из них «случайно подменился».

Гармония чаще получается в двух сценариях:

Шрифты явно разные (контраст по классу или характеру).

Шрифты родственные (суперсемейство или близкие метрики).

Практические критерии совместимости

Проверяйте пару по короткому чеклисту:

Сходится ли общий тон: заголовок не должен выглядеть «из другого мира».

Сопоставимы ли пропорции: высота строчных и общая «посадка» строк.

Не ломаются ли интервалы при смене шрифта в одной строке.

Адекватно ли выглядят кавычки, тире и цифры в обоих шрифтах.

!Примеры трёх стратегий построения пары и типичных ошибок

Техническая часть: как подключать и задавать шрифтовую систему в CSS

Базовый принцип: один «основной» шрифт + разумные запасные

Запасные шрифты важны, потому что:

Шрифт может не загрузиться.

В шрифте может не быть редкого символа.

На разных устройствах подмена произойдёт в любом случае.

Пример:

Справка: MDN: font-family

Подключение через @font-face и поведение загрузки

При самостоятельном хостинге шрифтов обычно используют woff2 и задают font-display, чтобы контролировать поведение текста во время загрузки.

font-display: swap означает, что сначала покажется запасной шрифт, а после загрузки произойдёт замена. Это часто предпочтительнее, чем невидимый текст.

Справка: MDN: font-display

Не ломайте книжный ритм заменой шрифта

Когда вы меняете гарнитуру, почти всегда нужно перепроверять параметры из прошлой статьи:

Длину строки (в знаках).

line-height.

Отступ первой строки.

Переносы и выравнивание.

Один и тот же 66ch у разных шрифтов даст разное ощущение плотности, потому что меняются ширины знаков и пропорции.

Мини-чеклист выбора гарнитуры и пары для книги

Основной шрифт комфортен на рабочем кегле и в длинных абзацах.

Есть полноценные Regular/Italic/Bold/Bold Italic.

Кириллица и знаки препинания выглядят естественно.

Цифры ведут себя предсказуемо в тексте и таблицах.

Пара строится от ролей: текст и заголовки различимы без лишних эффектов.

После замены шрифта вы заново проверили ритм: строку, line-height, переносы.

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

Настройка набора: кегль, интерлиньяж, трекинг, кернинг

В прошлых материалах курса мы:

настроили среду чтения (длина строки, переносы, абзацный ритм, «серый тон» полосы)

научились выбирать гарнитуру и строить шрифтовую пару

Теперь переходим к уровню точной настройки набора: кегль, интерлиньяж, трекинг и кернинг. Это четыре «ручки», которые чаще всего решают проблему «шрифт хороший, но читать тяжело» и помогают довести полосу до книжной аккуратности.

Термины и быстрые различия

| Параметр | Что это | Как ощущается в книге | Где настраивать в CSS | |---|---|---|---| | Кегль | размер шрифта | темп чтения и усталость | font-size (MDN: font-size) | | Интерлиньяж | расстояние между строками | «воздух» и удержание строки | line-height (MDN: line-height) | | Трекинг | равномерное изменение расстояний между буквами | плотность/разреженность, особенно в заголовках | letter-spacing (MDN: letter-spacing) | | Кернинг | точечная подстройка пар букв (например, ТА, To) | исчезают «дырки» между конкретными буквами | font-kerning (MDN: font-kerning) |

Ключевая мысль: трекинг меняет весь текст равномерно, а кернинг исправляет конкретные пары (и зависит от того, заложены ли кернинговые пары в шрифте).

!Иллюстрация разницы между кернингом и трекингом

Кегль: как выбрать рабочий размер, а не «красивое число»

Кегль в вёрстке — это не только число в px или rem. Два шрифта с одинаковым font-size могут выглядеть по-разному, потому что у них разная высота строчных (x-height), пропорции и внутренние просветы.

Практический подход к выбору кегля

Задайте реальную полосу (ширину колонки) и включите переносы, как в прошлой статье.

Возьмите 1–2 страницы настоящего текста (не «рыбу»), где есть кавычки, тире, цифры.

Подберите кегль так, чтобы абзац читался без напряжения в течение 2–3 минут.

После выбора кегля перепроверьте длину строки в знаках: изменение кегля меняет и «ощущаемую» меру строки.

Полезное правило для книжного текста: кегль выбирают вместе с длиной строки и line-height. Если вы меняете только один параметр, полоса легко «ломается».

Типичные симптомы неправильного кегля

Слишком мелко: падает темп чтения, чаще возвращаетесь глазами назад.

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

Интерлиньяж: устойчивый ритм и удержание строки

line-height напрямую управляет тем, насколько легко глаз держит строку и переходит на следующую.

Почему в книге чаще выбирают безразмерный line-height

Безразмерное значение (например, 1.55) масштабируется вместе с кеглем и проще поддерживает стабильный ритм при адаптивной вёрстке.

Такое значение означает: высота строки равна примерно 1.6 от размера шрифта. Это удобно при смене базового размера, потому что пропорция сохраняется.

Как подбирать line-height в связке с длиной строки

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

Рабочий метод настройки:

Зафиксируйте ширину колонки (например, около 60–70 знаков).

Начните с line-height в районе 1.5–1.7 для основного текста.

Уменьшайте интерлиньяж, если текст выглядит «разболтанным».

Увеличивайте, если строки слипаются или взгляд часто промахивается мимо следующей строки.

!Иллюстрация влияния line-height на комфорт чтения

Частые ошибки с line-height

line-height задан в px и не меняется при изменении кегля: ритм «плывёт» между брейкпоинтами.

Слишком маленький интерлиньяж при выравнивании по ширине: усиливаются «реки» и визуальная грязь.

Трекинг: когда и зачем трогать letter-spacing

Трекинг — мощный инструмент, но в книжном тексте его используют осторожно.

Где трекинг обычно уместен

Заголовки крупным кеглем.

Капитель и малые прописные (если используются): там часто нужна небольшая разрядка.

Очень мелкий текст (подписи, сноски) иногда выигрывает от минимальной разрядки, если шрифт кажется «слипшимся».

Где трекинг чаще вредит

Основной текст длинных абзацев: даже маленькое изменение letter-spacing меняет плотность и ритм, а на десятках страниц это утомляет.

Текст с активными переносами и выравниванием по ширине: лишняя разрядка ухудшает равномерность набора.

Практические диапазоны (как стартовая точка)

| Роль | Типичное направление | Пример | |---|---|---| | Основной текст | чаще 0 | letter-spacing: 0; | | Заголовки крупные | иногда чуть плотнее | letter-spacing: -0.01em; | | Капитель/малые прописные | часто чуть разреженнее | letter-spacing: 0.04em; | | Мелкие подписи | редко, очень аккуратно | letter-spacing: 0.01em; |

Важно: значения в em масштабируются вместе с кеглем, что удобно для типографических настроек.

Пример аккуратной настройки заголовков:

Кернинг: включить, проверить, не сломать

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

Базовая настройка:

Справка: normal включает использование кернинговых таблиц шрифта там, где они есть. Подробности — в документации MDN: font-kerning.

Когда кернинг может «поехать»

При агрессивном трекинге: равномерная разрядка/уплотнение может визуально спорить с парным кернингом.

Если для курсива или жирного начертания нет реального файла: браузер может имитировать начертание, и метрики (включая кернинг) будут хуже.

Практический тест кернинга:

Посмотрите на пары Т.А, ЛА, УТ, To, VA, а также на слова с кавычками и тире.

Проверьте заголовки и места, где встречается латиница (например, названия брендов).

Взаимосвязь четырёх параметров: почему нельзя крутить один

Кегль, интерлиньяж, трекинг и кернинг влияют на одну и ту же вещь: плотность и ритм полосы.

Самая частая ошибка в книжной вёрстке: пытаться лечить проблему не тем параметром.

| Симптом | Что хочется сделать | Что чаще правильнее | |---|---|---| | Строки «слипаются» | увеличить трекинг | увеличить line-height | | Текст кажется «мелким» | сделать font-weight жирнее | увеличить кегль или сменить гарнитуру | | В заголовке «дырки» между буквами | менять letter-spacing наугад | включить кернинг и затем очень мягко подстроить трекинг | | Полоса стала пятнистой | добавить разрядку | проверить переносы, выравнивание, ширину колонки и интерлиньяж |

Рабочий пресет CSS для книжного текста и заголовков

Это стартовая конфигурация, которую затем подстраивают под конкретную гарнитуру из предыдущей статьи.

Обратите внимание на принцип:

основной текст: стабильный кегль + умеренный line-height + без трекинга

заголовки: более плотный интерлиньяж и часто лёгкое уплотнение букв

Чеклист финальной настройки набора

Основной текст читается устойчиво на 2–3 страницах подряд без желания «раздвинуть строки».

Длина строки и кегль согласованы: строка не слишком длинная и не провоцирует частые промахи на следующую.

line-height задан безразмерно, чтобы ритм сохранялся при адаптации.

letter-spacing не используется как универсальная «таблетка» для основного текста.

font-kerning: normal включён, а заголовки проверены на «дырки».

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

Книжная вёрстка: абзацы, переносы, колонтитулы и микро-типографика

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

Книжная вёрстка — это дисциплина повторяемости: правила должны работать одинаково на десятках страниц, а не только на одном красивом развороте.

Абзацы как система: отступ, отбивка, ритм

Абзац — базовая единица чтения. В книге он должен распознаваться мгновенно и одинаково.

Две базовые модели абзацев

| Модель | Как выглядит | Когда уместна | Основной риск | |---|---|---|---| | Красная строка | первая строка с отступом, без вертикальных зазоров | классическая книжная вёрстка, длинное чтение | если забыть исключения, появляются странные отступы после заголовков/цитат | | Вертикальная отбивка | абзацы разделены интервалом, без отступа первой строки | цифровые тексты, короткие абзацы, справочные страницы | на длинных главах может распадаться ритм и «сыпаться» полоса |

Главное правило книжного набора:

Не усиливайте оба сигнала одновременно: большой text-indent и большой margin между абзацами почти всегда выглядят как ошибка.

Практический пресет для красной строки

Почему отступ задают в em:

1.6em масштабируется вместе с кеглем и сохраняет характер полосы при адаптивной вёрстке.

!Сравнение двух моделей абзацев и исключения для первого абзаца после заголовка

Отбивки вокруг заголовков

Заголовок в книге должен отделяться от текста, но не образовывать «дыру». Рабочая идея:

сверху заголовку обычно нужно больше воздуха, чем снизу

Если заголовки идут подряд (например, h2 и сразу h3), проверьте, чтобы вертикальные интервалы не складывались в чрезмерный разрыв.

Переносы: ровный край без «рек»

Переносы — главный инструмент борьбы с «реками» и растянутыми пробелами при выравнивании по ширине.

text-align: justify без переносов часто приводит к заметным «дырам»

переносы делают межсловные интервалы стабильнее

Справки:

MDN: hyphens

MDN: text-align

База для веб-набора

Чтобы автопереносы вообще имели шанс работать корректно, движку нужен язык текста. В вебе язык обычно задают на документ или на конкретный блок (например, русский), иначе словарь переносов может не включиться.

Где переносы лучше выключить

Переносы полезны в основном тексте, но часто вредят там, где важна цельность формы:

заголовки

подписи

короткие элементы интерфейса

Ручные переносы: мягкий перенос

Когда автопереносы не справляются, применяют мягкий перенос: невидимую метку, которая превращается в дефис только при переносе строки.

В HTML это обычно делают через символ ­ (soft hyphen) или вставкой символа U+00AD.

Важно:

ручные переносы стоит использовать точечно, в местах, которые постоянно ломаются

если слово перестроится из-за изменения ширины колонки, ручная метка может оказаться в неудачном месте, поэтому после правок макета такие места нужно перепроверять

Разрывы, «висячие строки» и контроль композиции

В книжной традиции критично, как абзацы ломаются на границах страниц или колонок.

Что такое «висячие строки»

Висячая строка — это когда на новой странице или в новой колонке остаётся одна строка абзаца, отделённая от остального абзаца.

если одинокая строка осталась внизу страницы — абзац «оборвался»

если одинокая строка переехала наверх — абзац «разорвался»

В CSS для контроля таких ситуаций есть свойства widows и orphans.

Справки:

MDN: widows

MDN: orphans

Пример базовой установки для печатной раскладки:

Что это значит:

widows: 2 просит движок не оставлять вверху страницы меньше двух строк абзаца

orphans: 2 просит не оставлять внизу страницы меньше двух строк абзаца

Поддержка этих правил зависит от среды: браузеры и PDF-движки ведут себя по-разному, поэтому результат нужно проверять именно там, где вы выпускаете книгу.

Запрет разрыва внутри блока

Если у вас есть элементы, которые нельзя разрывать (иллюстрация с подписью, таблица, короткая цитата), используйте запрет разрыва внутри.

Справка:

MDN: break-inside

Это не гарантирует идеальное поведение всегда, но заметно снижает количество «сломанных» мест.

Колонтитулы: что это и как с ними быть в веб-вёрстке

Колонтитулы — повторяющиеся элементы сверху и снизу страницы: название книги/главы, имя автора, номер страницы. В книге номер страницы часто называют фолио.

Две реальности: экран и печать

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

В печати и PDF нужны настоящие повторяющиеся элементы и нумерация.

Экранный аналог: «живой колонтитул»

Для длинных текстов на сайте часто используют position: sticky, чтобы заголовок главы или навигация оставались на виду.

Справка:

MDN: position

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

Печатные колонтитулы и номера страниц

В чистом браузерном @media print возможности колонтитулов ограничены. Спецификация для настоящих «полос» с бегущими колонтитулами относится к paged media.

Справки:

MDN: @page

W3C: CSS Paged Media Module Level 3

В профессиональной книжной веб-цепочке часто используют движки, которые поддерживают paged media лучше браузеров:

Paged.js

Prince

Пример идеи (в зависимости от движка может работать по-разному):

Практическая рекомендация:

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

Микротипографика: мелочи, которые держат «чистоту» на десятках страниц

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

Кавычки, тире, дефисы, многоточие

Минимальные ориентиры для русского набора:

используйте «ёлочки» для внешних кавычек

используйте длинное тире в диалогах и вставках

используйте дефис только внутри слов

используйте многоточие как символ …, а не три точки

Проблема: CSS не «исправит» исходный текст. Если контент приходит из CMS или файлов, микротипографику лучше сделать этапом подготовки текста.

Практический инструмент для русской типографики:

Типограф Артемия Лебедева

Неразрывные пробелы

Неразрывный пробел запрещает разрыв строки в конкретном месте. В книге это важно для связок, которые должны оставаться вместе:

инициалы и фамилия

короткие предлоги и союзы в некоторых стилях набора

«№ 5», «стр. 10», «гл. 2»

В вебе это решается на уровне текста: чаще всего через  .

Важно:

неразрывный пробел — точечный инструмент; если сделать неразрывным слишком много мест, вы получите «рваные» строки и перегруз переносами

Висячая пунктуация

В идеальной книжной полосе знаки пунктуации у края могут «висеть» за пределами колонки, чтобы край выглядел ровнее. В CSS есть свойство hanging-punctuation, но поддержка ограничена.

Справка:

MDN: hanging-punctuation

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

Лигатуры, капитель и цифры

Это продолжение темы из предыдущих статей: включайте только те фичи, которые реально есть в шрифте.

Справки:

MDN: font-variant-ligatures

MDN: font-variant-numeric

Рабочий пример:

Смысл:

в основном тексте старостильные и пропорциональные цифры поддерживают книжный ритм

в таблицах табличные цифры выравнивают колонки чисел

Мини-чеклист главы перед выпуском

Абзацная система единообразна: либо красная строка, либо отбивка.

Первый абзац после заголовка оформлен осознанно и одинаково по всей книге.

Переносы включены в основном тексте и выключены там, где они портят форму.

Проблемные разрывы блоков предотвращаются через break-inside: avoid.

Для печатного результата проверены widows и orphans в том движке, который реально собирает PDF.

Текст прошёл микротипографику: кавычки, тире, многоточия, неразрывные пробелы в критичных местах.

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

Подготовка макета: печать, PDF, ePub и контроль качества

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

В этой статье выстроим практический процесс подготовки макета и финальной проверки качества.

!Схема показывает, почему для PDF/печати и ePub нужны разные проверки

Что вы выпускаете на самом деле: два типа книг

Все выходные форматы можно свести к двум моделям.

Постраничная модель

Это когда у документа есть фиксированные страницы.

Печать в типографии

PDF (для печати или для чтения как «страницы»)

Любая система paged media (верстка «как книга»)

Сильная сторона: вы контролируете строку, переносы, разрывы, колонтитулы и композицию страницы.

Потоковая модель (reflow)

Это когда текст перестраивается под экран и настройки читателя.

ePub (чаще всего)

Сильная сторона: адаптивность. Слабая сторона: часть книжных «железных» правил превращается в рекомендации.

Главный вывод:

Для PDF/печати вы доводите полосу и страницу.

Для ePub вы доводите систему стилей, которая не ломается при перестроении.

Подготовка к печати: что важно именно для типографики

Печать почти всегда означает: фиксированный формат страницы, заданные поля и строгий контроль воспроизведения шрифта.

Шрифты и лицензии

Перед отправкой в типографию проверьте два пункта.

Лицензия шрифта позволяет встраивание в PDF и печать.

У вас есть реальные файлы нужных начертаний: Regular, Italic, Bold, Bold Italic.

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

Встраивание шрифтов в PDF

Для печати обычно нужен PDF, в котором шрифты встроены.

Встроенный шрифт гарантирует, что буквы, кавычки, тире и цифры останутся именно такими, как в макете.

Допустима подстановка подмножества глифов (subset), если это приемлемо для вашего пайплайна.

Практическое правило контроля:

Откройте итоговый PDF и убедитесь, что шрифты помечены как embedded.

Если вы работаете с готовым PDF, инструмент для диагностики и «префлайта»:

Adobe Acrobat Preflight

Переносы, разрывы и «лестницы»

В печатной книге особенно заметны ошибки, которые в вебе могут «проскочить».

Слишком много переносов подряд (визуальная «лестница» дефисов).

Случайные «реки» в выключке по ширине.

Висячие строки (вдовы и сироты) на границе страницы.

Если вы готовите постраничный вывод из HTML/CSS, помните:

widows и orphans работают не везде одинаково.

break-inside: avoid снижает риск разрыва таблиц, подписей и цитат.

Справки:

MDN: widows

MDN: orphans

MDN: break-inside

Поля, вылеты и элементы страницы

Даже если курс про шрифты, выпуск в печать заставляет думать «страницами».

Поля должны поддерживать меру строки (помните ориентир 45–75 знаков).

Иллюстрации «в край» обычно требуют вылета (bleed) и отдельной настройки экспорта.

Колонтитулы и фолио должны быть согласованы по стилю цифр и по кеглю с основной системой.

Если вы делаете PDF не из InDesign, а из CSS-paged, заранее проверьте поддержку полей, колонтитулов и нумерации в выбранном движке.

PDF: два сценария — «для печати» и «для чтения»

PDF бывает «типографским» (печатный) и «читательским» (распространяемый файл).

| Сценарий PDF | Приоритет | Частые типографические риски | Что проверить в первую очередь | |---|---|---|---| | Для печати | предсказуемая геометрия и встраивание шрифтов | отсутствие embedded-шрифтов, симуляция italic/bold, сломанные переносы | embedded-шрифты, переносы, разрывы, одинаковая полоса на всех страницах | | Для чтения | удобство просмотра на экранах | слишком мелкий кегль, слишком широкая строка на больших экранах | базовый кегль, line-height, поля, навигация внутри документа |

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

ePub: типографика в условиях ограниченного контроля

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

Что можно и нельзя контролировать

Обычно можно:

Базовую гарнитуру через @font-face (если ридер разрешает встроенные шрифты).

line-height, отступы, межабзацные интервалы.

Правила для заголовков, цитат, подписей.

Локальные OpenType-настройки, если движок и шрифт поддерживают.

Обычно нельзя гарантировать:

Абсолютно одинаковую длину строки.

Идеальное поведение переносов на всех устройствах.

Жёсткий контроль вдов/сирот.

Точные колонтитулы, как в печати.

Спецификация формата:

W3C: EPUB 3.3

Встроенные шрифты в ePub

ePub технически позволяет класть файлы шрифтов внутрь книги и подключать через @font-face. Но на практике важны три проверки.

Лицензия: разрешает ли шрифт embedding в ePub.

Наличие кириллицы и нужных символов: кавычки «», тире, многоточие, знаки.

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

Переносы и язык

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

Всегда задавайте язык документа или части текста.

Справки:

MDN: hyphens

Практическая рекомендация для ePub:

Не делайте выключку по ширине «любой ценой». Если переносы в целевом ридере слабые, text-align: justify может усиливать «реки». Тестируйте на реальных устройствах.

Оглавление и навигация

ePub читают как книгу, поэтому навигация — часть качества.

Заголовки должны быть размечены последовательно.

Оглавление должно совпадать со структурой.

Проверку ePub часто автоматизируют.

EPUBCheck

Инструменты paged media: когда HTML/CSS превращают в «настоящую книгу»

Если вы верстаете книгу в HTML/CSS и хотите получить качественный постраничный PDF (с переносами, разрывами, колонтитулами), обычного @media print в браузере часто недостаточно.

Два распространённых инструмента, которые применяют именно для paged media:

Paged.js

Prince

Почему это важно типографически:

Больше контроля над @page, разрывами, колонтитулами.

Более предсказуемое поведение переносов и композиции страницы (зависит от движка и настроек).

Справка по CSS для печати:

MDN: @page

Контроль качества: типографический «префлайт» перед выпуском

Книжная типографика ломается не одним крупным дефектом, а суммой мелочей. Поэтому полезен повторяемый чеклист.

Проверка шрифтов

Никаких симулированных italic/bold: везде используются реальные файлы начертаний.

Встроенные шрифты в PDF отмечены как embedded.

Нет незаметной подмены шрифтов для отдельных символов (часто проявляется на редких знаках и кавычках).

Цифры ведут себя так, как задумано: в тексте пропорциональные, в таблицах табличные (если вы это настраивали).

Проверка микротипографики текста

Кавычки приведены к единому стандарту (например, «…»).

Тире и дефисы используются по назначению.

Многоточие — символ …, а не три точки.

Неразрывные пробелы стоят в критичных местах (инициалы, сокращения, «№ 5»), но не превращают набор в «рваный».

Проверка полосы (для печати и PDF)

Нет «рек» и грубой пятнистости.

Нет «лестницы» переносов на нескольких строках подряд.

Нет висячих строк.

Заголовки не остаются последней строкой внизу страницы без текста (плохая композиция).

Проверка структурных элементов

Оглавление соответствует заголовкам.

Сноски и примечания оформлены единообразно.

Подписи к иллюстрациям не оторваны от иллюстраций (помогает break-inside: avoid там, где это поддержано).

Практический метод финальной проверки

Чтобы не «замылить глаз», проверяйте в два прохода.

Быстрый проход по всей книге

Медленный проход по проблемным местам

Что смотреть в быстром проходе:

общая плотность и ритм

повторяющиеся дефекты (кавычки, тире, интервалы)

неожиданные смены шрифта

Что смотреть в медленном проходе:

переносы на узких местах

страницы с таблицами, формулами, иллюстрациями

начало глав, места со сложной иерархией заголовков

Мини-чеклист перед экспортом в конкретный формат

| Формат | Минимум, без которого лучше не выпускать | |---|---| | Печать | embedded-шрифты в PDF, нет симуляции начертаний, проверены переносы и висячие строки, корректные поля и компоновка | | PDF для чтения | комфортный кегль и поля, читаемая длина строки, рабочая навигация внутри файла | | ePub | валидность через EPUBCheck, последовательная структура заголовков, протестировано на 2–3 ридерах, резервные шрифты и адекватные стили при подмене |

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