Как избавиться от висячих предлогов и сделать текст аккуратнее

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

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

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

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

Материалы урока:

• Плагин для типографики SBOL Typograph - ссылка

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

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

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

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

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

Кроме того, вручную обрабатывать таким способом большой объём текста слишком долго.

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

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

Особенно заметно это в адаптивных версиях. Поэтому принудительные переносы строк не стоит использовать как основной способ борьбы с висячими предлогами.

Более корректный способ — связать короткий предлог или союз со следующим словом с помощью неразрывного пробела.

Например, вместо ситуации:

«работаем в
Москве»

предлог «в» должен переноситься вместе со словом «Москве».

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

В HTML такой пробел обозначается как  . В уроке для ручной вставки также используется комбинация Alt + 255.

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

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

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

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

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

• замена кавычек на русские «ёлочки»;
• корректировка некоторых знаков пунктуации;
• работа с тире и дефисами;
• восстановление буквы «ё» в отдельных местах;
• расстановка неразрывных пробелов.

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

При работе с плагином важна последовательность действий.

Сначала:

1. вставьте текст;
2. задайте необходимую ширину текстового блока;
3. выполните типографическую обработку;
4. проверьте результат;
5. только после этого добавляйте жирные выделения и другие акценты.

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

Если сначала потратить время на расстановку Bold-акцентов, а затем запустить обработку, часть этой работы может потеряться.

Проблема касается не только предлогов и союзов. Иногда в конце большого абзаца остаётся одно короткое слово.

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

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

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

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

Главная задача работы с висячими предлогами и союзами — сохранить связанные слова вместе и не нарушать естественный ритм чтения.

Не используйте Enter или Shift + Enter для искусственной фиксации строк. Вместо этого применяйте неразрывные пробелы и автоматическую типографическую обработку, а затем проверяйте результат визуально.

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

Перейти к следующему уроку