Найти в Дзене
AlisaSAVA

5 правил профессиональной верстки текста

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

Часть 2.

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

Сегодня предлагаю изучить/вспомнить основные правила набора текста в макете.

Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design
Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design

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

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

________________________________

1. Висячие предлоги: маленькие слова, большая ошибка

Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design
Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design

В конце строки остался предлог «в», «на», «из» или короткое слово «и», «но», «за»? Это висячий предлог — грубое нарушение типографики. Такая строка визуально «отрывает» предлог от следующего слова, заставляя читателя спотыкаться и переносить взгляд туда-обратно.

Почему это недопустимо:

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

Как исправить:

Используйте неразрывный пробел (в большинстве программ — Ctrl+Shift+Пробел). Он «склеивает» предлог со следующим словом, и они переносятся вместе на следующую строку.

Также полезно использовать перенос без разрыва абзаца (Ctrl+Shift+Enter), если нужно вручную управлять переносом строк, не разбивая логическую связь. В программах верстки (InDesign, Figma, даже в Word) эти инструменты работают.

Правило: пробегайте глазами правый край текстового блока. Если видите одинокий предлог — убирайте его.

________________________________

2. Вдовы и сироты: слова-одиночки портят композицию

Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design
Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design

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

· Вдова (widow) — одно слово или очень короткий слог, оставшийся на последней строке абзаца. Когда весь абзац состоит из нескольких полных строк, а в конце «висит» одно слово — это выглядит неаккуратно и нарушает визуальный ритм.

· Сирота (orphan) — последняя строка абзаца, которая переходит в начало следующей колонки или страницы, оставаясь там одна. Это разрывает логическую связь между абзацами и создаёт неоправданные пустоты.

Как бороться:

  • Регулируйте интервалы, размер шрифта или ширину текстового блока так, чтобы в абзаце оставалось хотя бы несколько слов на последней строке.
  • В сложных случаях используйте принудительный перенос (Shift+Enter в некоторых программах) или незначительно меняйте кернинг/трекинг в последней строке, чтобы «подтянуть» слово вверх.
  • Для многоколонной вёрстки (буклеты, журналы) следите, чтобы абзацы не разрывались так, что последняя строка остаётся одинокой в следующей колонке. В профессиональных программах есть настройка «запрет вдов и сирот».

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

________________________________

3. Разделение и переносы: управляем ритмом строк

Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design
Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design

Хотя в карточках этот пункт выделен отдельно, он напрямую связан с предыдущими. Переносы слов — мощный инструмент, который может как улучшить вёрстку, так и испортить её.

Что нужно знать о переносах:

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

Важные настройки:

  • Автоматическая расстановка переносов — включите в программе верстки (InDesign, Figma с плагинами, даже Word). Алгоритм сам разобьёт длинные слова, избегая слишком больших пробелов.
  • Ручной перенос (Ctrl+- в некоторых программах) — позволяет указать место переноса, не разрывая слово в неудобном месте (например, не отрывая три буквы).
  • Запрет переноса важных слов (имён собственных, названий брендов) — отключайте для них переносы вручную.

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

________________________________

4. Выключка текста: куда ровнять?

Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design
Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design

Выключка (выравнивание) текста — один из самых обсуждаемых моментов. И выбор зависит от носителя.

  • По ширине — классика печатных изданий. Текст растягивается так, чтобы левый и правый края образовывали ровный прямоугольник. Это даёт максимальную аккуратность макета, но требует хорошей расстановки переносов. Без переносов появятся огромные пробелы между словами («реки»), которые разрушают читаемость. Для печатных макетов (буклеты, журналы) это стандарт.
  • По левому краю — лучший выбор для веба, приложений и экранных форматов. Правый край остаётся рваным, но это естественно для адаптивной вёрстки и не мешает читаемости. Такой текст легче сканировать глазами. Следите, чтобы правый край не был слишком рваным — это называется «расчёска» (например, когда строки разной длины чередуются с большим разбросом). Если это происходит, либо увеличьте ширину блока, либо включите переносы.
  • По центру — для коротких текстов: цитат, подписей, акцентных элементов. Длинный текст по центру читать неудобно, потому что каждая строка начинается с разного места. Но если нужно создать премиальное, асимметричное настроение — центрирование работает отлично, но только для малого объёма.

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

________________________________

5. Кавычки и тире: типографика на уровне знаков

Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design
Автор иллюстрации: Савлучинская Алиса Дмитриевна @alisaSAVA_design

Кажется, что это мелочь, но правильные знаки препинания моментально выдают уровень культуры верстки. В России действует определённый стандарт.

Тире и дефис — это не одно и то же:

  • Дефис (-) — используется внутри слов: темно-синий, кто-то, бизнес-ланч. Ставится без пробелов.
  • Короткое тире (–) — ставится между числами, датами, именами: 1990–2000, Москва–Санкт-Петербург. Без пробелов.
  • Длинное тире (—) — используется внутри предложений, обозначает паузу, противопоставление, прямую речь. В отличие от дефиса, длинное тире отбивается пробелами с двух сторон: «Погода была прекрасная — лёгкий ветер и солнце — и мы решили выйти на прогулку».

Кавычки:

По правилам русской типографики:

  • Снаружи — «ёлочки».
  • Внутри цитат или вложенных конструкций — „лапки“ (французские).

К сожалению, в вебе и многих программах по умолчанию часто стоят «лапки» ("), но если вы работаете в профессиональной среде (InDesign, Illustrator, даже Google Docs с настройками локализации), можно настроить правильные кавычки.

Важное правило про пробелы:

Знаки препинания (точка, запятая, вопросительный/восклицательный знак) всегда ставятся сразу после последнего слова, а пробел ставится уже после знака. Никаких пробелов перед точкой или запятой — это грубая ошибка набора.

________________________________

Вместо заключения: чек-лист перед финалом

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

1. Висячие предлоги — нет ли в конце строки одиноких «в», «на», «и»?

2. Вдовы и сироты — нет ли абзацев, заканчивающихся одним словом? Не осталась ли одна строка в начале колонки?

3. Переносы — стоят ли переносы там, где они нужны? Не разорваны ли важные слова?

4. Выключка — соответствует ли тип носителю? По левому краю для экранов, по ширине для печати с переносами.

5. Кавычки и тире — везде ли длинное тире, а не дефис? Правильные ли кавычки?

Эти правила кажутся мелкими, но именно из них складывается общее впечатление «дорого-богато» или «новичок верстал». Освойте их — и ваша вёрстка перестанет вызывать вопросы даже у самых придирчивых арт-директоров.

_________________________

Автор статьи и иллюстраций: Савлучинская Алиса Дмитриевна

дизайнер, арт-директор, старший преподаватель кафедры "Архитектура и Дизайн" МГТУ-МАСИ