← Все статьи

Туториалы

Настройте размер шрифта и интервалы для комфортного чтения

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

Множество сайтов втискивают крошечный текст в колонки от края до края. Читать их утомительно. С JustZix вы можете привязать CSS-правило, которое меняет размер текста, раскрывает межстрочный интервал и ограничивает ширину колонки — превращая любую стену текста во что-то спокойное.

Поднимите базовый размер шрифта

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

html {
  font-size: 18px !important;
}

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

p, li, span, div, td, article, .content {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

Дайте строкам пространство дышать

Высота строки — единственный самый значимый фактор комфорта. Большинство сайтов задают её слишком тесной. Значение между 1,6 и 1,8 — золотая середина для основного текста.

body, p, li {
  line-height: 1.75 !important;
}
h1, h2, h3 {
  line-height: 1.3 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

Ограничьте ширину колонки

Строки, растягивающиеся через широкий монитор, изматывают при сканировании. Идеальная мера — примерно 65–75 символов. Ограничьте основной контент и отцентрируйте его.

article, .post, .content, main, .entry-content {
  max-width: 70ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

Единица ch измеряет ширину в ширинах символа, так что колонка адаптируется к любому используемому вами шрифту. Сочетайте это с заменой шрифта — и страница преобразится.

Ослабьте межбуквенный и межабзацный интервалы

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

p {
  margin-bottom: 1.1em !important;
  letter-spacing: 0.01em !important;
}
ul, ol {
  margin-bottom: 1.1em !important;
}
li {
  margin-bottom: 0.4em !important;
}

Один ползунок масштаба с JavaScript

Хотите подправлять размер вживую, а не редактировать CSS? Крошечное правило JavaScript добавляет масштабирование с клавиатуры только для текста.

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;
  var html = document.documentElement;
  var size = parseFloat(getComputedStyle(html).fontSize);
  if (e.key === '=') html.style.fontSize = (size + 1) + 'px';
  if (e.key === '-') html.style.fontSize = (size - 1) + 'px';
});

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

Чек-лист

• Начните с корневого размера шрифта; перейдите к прямым селекторам, если сайт использует фиксированные пиксели.
• Стремитесь к высоте строки 1,6–1,8 и колонке около 70ch.
• Не переусердствуйте с интервалами — слишком большой межбуквенный интервал вредит читаемости так же, как и слишком малый.
• Сочетайте с заменой шрифта для наибольшего улучшения.

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