Как настроить типографику в WordPress-теме для удобного чтения

Автор: Евгения Фролова | Опубликовано: 26.10.2026

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

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

С чего начать: проверьте, что именно мешает читать

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

Обычно мешают четыре вещи:

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

Если проблема заметна только на мобильных, не спешите менять всё подряд. Часто достаточно скорректировать размеры через адаптивные значения, а не делать отдельную «мобильную тему».

Какие параметры типографики реально влияют на удобство чтения

В WordPress-теме обычно есть несколько уровней настройки: базовый шрифт текста, заголовки, интервалы и ширина контейнера. Именно они дают основной эффект.

Базовый размер текста

Для статей обычно ориентируются на комфортный размер основного текста, а не на декоративный вид. Если шрифт слишком мелкий, пользователь быстрее устаёт; если слишком крупный, текст начинает «разваливаться» и требует лишней прокрутки. На практике важно не число само по себе, а сочетание размера, межстрочного интервала и ширины колонки.

Межстрочный интервал

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

Ширина текстового блока

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

Иерархия заголовков

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

Как настроить типографику в самой теме

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

Ищите в админке WordPress разделы вроде Внешний вид → Настроить, Типографика, Шрифты, Оформление текста или похожие. В некоторых темах отдельно настраиваются:

шрифт основного текста;
шрифт заголовков;
размер текста и заголовков;
межстрочный интервал;
ширина контента;
отступы между абзацами и блоками.

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

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

Если в теме нет нужных настроек, добавьте свои стили

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

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

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

.entry-content {
  font-size: 18px;
  line-height: 1.7;
  max-width: 760px;
}

.entry-content p {
  margin: 0 0 1.1em;
}

.entry-content h2 {
  font-size: 1.7em;
  line-height: 1.25;
  margin: 2em 0 0.8em;
}

.entry-content h3 {
  font-size: 1.35em;
  line-height: 1.3;
  margin: 1.6em 0 0.7em;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.1em 1.4em;
}

Клас .entry-content часто используется в темах WordPress для области записи, но в вашей теме он может называться иначе. Перед применением проверьте HTML через инструменты разработчика в браузере. Если класс другой, замените его на фактический селектор темы.

Что важно учесть на мобильных устройствах

Mobile First в типографике — это не просто уменьшить всё до компактного вида. На маленьком экране особенно заметны ошибки, которые на десктопе выглядят терпимо.

Проверьте три вещи:

не слишком ли маленький основной текст;
не слишком ли большие отступы между блоками, из-за которых статья становится «длинной» без пользы;
не ломаются ли заголовки и списки, когда строка переносится на узком экране.

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

Не забывайте про шрифты: внешний вид и скорость связаны

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

Практически это означает следующее:

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

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

Как проверить, что настройка действительно стала лучше

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

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

Смотрите на практические признаки:

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

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

Когда лучше менять не только типографику, а саму тему

Иногда проблема не решается настройками. Если тема:

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

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

Хорошая типографика в WordPress — это не отдельная «косметическая» настройка, а часть общей структуры сайта. Когда текст читается легко, выигрывают и пользователь, и редактор, и сам сайт: контент воспринимается быстрее, страницы выглядят аккуратнее, а правки потом проще поддерживать без постоянных доработок шаблона.