← Все статьи

Туториалы

Идеальная ширина колонки для чтения

17 мая 2026 · автор JustZix Team

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

Правило 66 символов

Десятилетия типографской практики указывают на примерно 50–75 символов в строке, с 66 как золотой серединой. Слишком коротко — и ваши глаза постоянно прыгают; слишком длинно — и возвратное движение от конца одной строки к началу следующей становится ненадёжным. Большинство сайтов растягивают текст от края до края на широких мониторах, заходя далеко за 120 символов — намного за пределы комфортного диапазона.

Измерение в единицах ch

CSS даёт единицу, созданную ровно для этой работы. Единица ch равна ширине продвижения глифа 0 в текущем шрифте. max-width в 66ch поэтому автоматически отслеживает ваш выбор шрифта:

article,
.entry-content,
main .content {
  max-width: 66ch !important;
  margin-inline: auto !important;
}

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

Оставьте широкие элементы широкими

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

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
}
article figure,
article pre,
article table {
  width: 90vw !important;
  max-width: 90vw !important;
  margin-left: calc(33ch - 45vw) !important;
}

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

Адаптивные отступы

На телефоне жёсткий max-width не важен, но краевые отступы — важны. Сочетайте оба, чтобы правило работало везде:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

clamp() даёт малым экранам комфортный отступ, а большим — щедрый, без единого медиа-запроса.

Сочетание ширины с ритмом

Ширина работает лучше всего рядом со щедрым вертикальным интервалом. Узкая колонка с тесным интерлиньяжем всё равно ощущается стеснённой. Добавьте этот сопутствующий блок:

article p {
  line-height: 1.7 !important;
  margin-bottom: 1.5em !important;
  font-size: 1.15rem !important;
}

Примените это как правило JustZix

Создайте правило, задайте широкий шаблон URL вроде *://*/*, если хотите этого везде, или ограничьте его конкретным изданием. Вставьте блоки ширины и ритма в панель CSS и сохраните. Зайдите на несколько статей и подправьте значение ch, пока строки не станут естественными — большинство людей останавливаются между 60ch и 72ch.

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