Оптимальная ширина текста с помощью ch в Elementor

Почему ширина текстового блока влияет на читаемость

Когда текст занимает всю ширину монитора, одна строка может содержать слишком много символов. Читателю приходится постоянно перемещать взгляд на большое расстояние, а при переходе на новую строку легко потерять нужное место. На узких экранах проблема часто меняется на противоположную: короткие строки создают слишком много переносов и визуально дробят текст.

В веб-текстах часто ориентируются примерно на 45–75 символов в строке. Это не строгое правило для каждого сайта, а практический диапазон, который помогает найти баланс между комфортом чтения и эффективным использованием пространства.

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

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

Что такое единица ch в CSS

Единица ch примерно соответствует ширине символа «0» в текущем шрифте. Поэтому значение 65ch можно воспринимать как приблизительную ширину, достаточную примерно для 65 символов. Это не подсчёт фактического количества знаков в каждой строке: буквы имеют разную ширину, а на результат также влияют пробелы, цифры и знаки препинания.

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

Для большинства длинных текстовых блоков можно начать со значения 60–70ch. Если строки кажутся слишком длинными, значение уменьшают. Если текст выглядит чрезмерно узким и содержит много переносов, его можно немного увеличить.

• 45–55ch — компактная ширина для коротких пояснений или узкой колонки;
• 60–70ch — универсальный стартовый диапазон для статей и описаний;
• 70–75ch — верхняя граница, которую стоит визуально проверить на конкретном шрифте.

Как ограничить ширину текста в Elementor

Сначала выберите текстовый виджет или контейнер, ширину которого нужно ограничить. В настройках элемента откройте раздел для CSS-классов и добавьте класс readable-text без точки. Точка используется в CSS-селекторе, а не при вводе названия класса.

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

Базовый вариант выглядит так:

• класс элемента: readable-text;
• width: 100% позволяет блоку не выходить за пределы родительского контейнера;
• max-width: 65ch ограничивает максимальную длину строки;
• margin-inline: auto можно добавить, если блок должен быть выровнен по центру.

.readable-text {
  width: 100%;
  max-width: 65ch;
}

Вариант с центрированием блока

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

.readable-text {
  width: 100%;
  max-width: 65ch;
  margin-inline: auto;
}

Как выбрать правильное значение max-width

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

Начните со значения 60–65ch и проверьте реальный текст на странице. Лучше оценивать несколько абзацев, списки и заголовки, а не одну короткую строку. Если абзацы выглядят как широкие горизонтальные полосы, уменьшите значение. Если текстовая колонка кажется слишком узкой, постепенно увеличьте его.

Не стоит устанавливать очень маленькое значение только для того, чтобы сделать дизайн «воздушным». Чрезмерно узкий текст увеличивает высоту страницы, объём прокрутки и количество переносов.

• проверяйте длинные и короткие абзацы;
• сравнивайте результат для обычного текста, списков и цитат;
• не ориентируйтесь только на ширину пустого блока;
• изменяйте значение небольшими шагами, например с 65ch до 60ch или 70ch.

Адаптивность: что происходит на мобильных устройствах

Комбинация width: 100% и max-width работает по следующему принципу: блок может занять всю доступную ширину, но не станет шире установленного ограничения. На большом экране текст ограничивается значением в ch, а на узком смартфоне сжимается вместе с родительским контейнером.

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

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

• не используйте фиксированную ширину вроде 700px для всех экранов;
• проверьте отступы контейнера и ширину колонки;
• просмотрите текст с длинными словами, URL или техническими терминами;
• после изменения CSS очистите кеш, если продолжают отображаться старые стили.

Где этот приём особенно полезен

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

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

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

Распространённые ошибки при настройке

Самая частая ошибка — добавить класс одному элементу, а CSS написать для другого селектора или допустить ошибку в названии. Убедитесь, что в поле класса указано readable-text, а в коде используется .readable-text.

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

Также не стоит без проверки применять max-width ко всем текстовым элементам сайта. У заголовка, короткой подписи и основного текста разные задачи. Для некоторых элементов могут потребоваться отдельные правила.

• не ставьте точку перед названием класса в настройках Elementor;
• не путайте max-width с width: 65ch — во втором случае блок может вести себя менее гибко;
• не используйте одинаковую ширину для текста и медиа без необходимости;
• проверяйте стили с более высокой специфичностью, которые могут переопределять ваше правило;
• оценивайте результат на реальном контенте, а не только в редакторе.