«Почему у нас такой низкий процент дочитываний?» — этот вопрос мы слышим от клиентов регулярно. Смотришь на сайт: текст 13px, line-height 1.2, серый шрифт на белом фоне, строки по 120 символов. Причина очевидна. Типографика на сайте — это первое, что влияет на восприятие контента, даже если посетитель не может объяснить, что именно ему некомфортно. Плохо настроенный текст читается как неуважение к посетителю. Хорошо настроенный — работает тихо, не отвлекает и держит внимание.
В этой статье — конкретные параметры: какие шрифты выбирать для кириллицы, какие размеры и интервалы работают, как не нарушить приватность пользователей при подключении внешних шрифтов, и как всё это настроить в теме Аспро.
Почему типографика влияет на доверие и конверсию?
Читаемый текст — это доверие. Сайт с аккуратной типографикой воспринимается как профессиональный, даже если дизайн скромный. Верно и обратное: размытые шрифты, дрожащие засечки на экране, мелкий кегль в основном тексте — и посетитель бессознательно решает, что компании нельзя доверять серьёзный заказ.
Конверсионный эффект не менее прямой. Исследования читаемости текста показывают: увеличение базового кегля с 12 до 16px снижает показатель отказов в среднем на 10–20%. Люди просто дочитывают до формы заявки, а не уходят на полпути. Для сайтов компаний из Хабаровска и Дальнего Востока это особенно актуально — пользователи часто заходят с телефонов в условиях нестабильного соединения, и нагруженная страница с нечитаемым текстом теряет их мгновенно.
Как выбрать шрифт для сайта?
Главное правило экрана: без засечек для основного текста. Гарнитуры типа Georgia или Times New Roman хороши в печати, но на экране с невысоким разрешением засечки превращаются в мусор — особенно на кириллице. Для основного текста берите гротески: Inter, PT Sans, Nunito, Manrope.
Несколько практических ограничений:
- Не больше двух гарнитур на сайт. Одна — для заголовков, одна — для текста. Три и больше шрифта создают визуальный шум и замедляют загрузку.
- Парные шрифты. Если хочется контраста — сочетайте гротеск в заголовках с антиквой в тексте (или наоборот), но проверяйте пару визуально. Хорошо работает Playfair Display + PT Sans, Montserrat + Open Sans.
- Веса (начертания) — не все подряд. Достаточно Regular (400), Medium (500) и Bold (700). Каждый лишний вес — это дополнительный HTTP-запрос и лишние килобайты.
- Проверяйте кириллицу. Не все красивые латинские шрифты имеют качественный кириллический набор — иногда буквы «нарисованы» автоматически и выглядят хуже.
Кириллица и веб-шрифты: Google Fonts, локальная загрузка и 152-ФЗ
Подключение шрифтов через Google Fonts — удобно, но в 2026 году несёт два риска. Первый — скорость: при каждом визите браузер запрашивает файлы с серверов Google, и если они недоступны или медленны (что случается), шрифт «мигает» или не загружается вовсе. Второй — юридический: по российскому законодательству (152-ФЗ) передача IP-адреса пользователя на зарубежный сервер без его согласия — нарушение. Роскомнадзор уже имеет практику претензий к сайтам именно за Google Fonts.
Решение простое: скачайте шрифты и подключайте их локально с вашего же сервера. Сервис google-webfonts-helper.herokuapp.com позволяет скачать любой Google-шрифт в форматах woff2/woff за минуту. Лишний трафик на Google не уходит, шрифт грузится быстрее, и претензий по 152-ФЗ нет.
Какой размер шрифта и межстрочный интервал использовать?
Базовый кегль для основного текста — 16–18px. Это не мнение, а стандарт читаемости: при меньшем размере строки начинают сливаться, особенно у пользователей старше 40 лет. Межстрочный интервал (line-height) — 1.4–1.6 от размера шрифта. При 16px это 22–26px между строками.
| Элемент | Рекомендуемый размер | Межстрочный интервал | Примечание |
|---|---|---|---|
| Основной текст | 16–18px | 1.5–1.6 | Не меньше 16px на десктопе |
| H1 (заголовок страницы) | 32–48px | 1.2–1.3 | На мобиле — 26–32px |
| H2 (подзаголовки) | 24–32px | 1.2–1.4 | Контраст с телом — ×1.5 минимум |
| H3 | 18–22px | 1.3–1.4 | Отличается от текста жирностью и размером |
| Подписи, примечания | 13–14px | 1.4 | Не основной контент — мелко допустимо |
Длина строки — ещё один параметр, который часто игнорируют. Оптимум для чтения: 50–75 символов в строке (примерно 600–750px при 16px). Слишком длинные строки утомляют — глаз теряет начало следующей строки. Слишком короткие дробят текст и раздражают частыми переносами. В макете это решается правильной шириной колонки контента: не на всю ширину экрана, а с ограничением max-width.
Иерархия заголовков: как добиться контраста?
Иерархия работает только тогда, когда разница между уровнями заметна сразу. H1 и H2 одного размера — не иерархия, а визуальная каша. Правило: каждый следующий уровень должен отличаться хотя бы в полтора раза по размеру или чётко — по жирности.
Практика с сайтов Аспро: тема задаёт базовые стили заголовков, но дизайнеры часто уменьшают H1, чтобы «не так громко». В итоге H1 = 24px, H2 = 20px — и на странице нет чёткой точки входа для взгляда. Проверяйте иерархию, прищурив глаза: структура должна читаться даже расфокусированным зрением.
Читаемость и доступность: контраст по WCAG
WCAG 2.1 — международный стандарт доступности, который задаёт минимальный контраст текста к фону. Для обычного текста — соотношение яркостей не ниже 4.5:1, для крупного (18px+ или жирного 14px+) — не ниже 3:1. Серый текст #999 на белом фоне — нарушение, хотя дизайнеры ставят его везде «для мягкости».
Проверить контраст просто: инструмент WebAIM Contrast Checker, плагин Contrast в Figma, или встроенная проверка в Chrome DevTools (Accessibility → Color Contrast). Не нужно верить глазу — цифры не врут.
Типичные ошибки на сайтах, которые мы видим при аудитах:
- Серый текст на светло-серой карточке — контраст 2.8:1, провал.
- Белый текст на жёлтой кнопке — красиво, но 2.1:1, нечитаемо.
- Placeholder в форме тем же цветом, что и заполненное поле — пользователь не понимает, пустое поле или нет.
Русская микротипографика: тире, кавычки и неразрывные пробелы
Это мелочи, которые складываются в общее впечатление о качестве сайта. Редактор из Хабаровска, который пишет тире через дефис-минус и ставит «лапки» вместо «ёлочек», не делает ничего криминального — но профессиональный взгляд это замечает.
Основные правила русской микротипографики для веба:
- Тире — длинное «—» (U+2014), не дефис «-» и не короткое «–». В HTML:
—или сам символ. - Кавычки — «ёлочки» («»), а не "лапки" (""). Внутренние — „лапки" («внешние „внутренние"»).
- Неразрывный пробел — после коротких предлогов и союзов (в Хабаровске, на сайте), перед единицами измерения (16 px, 1 500 руб.), в числах с разрядами. В HTML:
. - Висячая пунктуация. Кавычки и тире, вынесенные за поля текстового блока, дают ровный левый край — это делается через CSS
hanging-punctuationили вручную в вёрстке.
В темах Аспро текст редактируется через визуальный редактор, и он не всегда автоматически расставляет корректную типографику. Удобно прогнать готовый текст через типограф Лебедева или аналогичный онлайн-инструмент до вставки в CMS.
Мобильная типографика: что меняется на телефоне?
На мобильном устройстве пользователь держит экран в 25–30 сантиметрах от глаз — примерно как книгу. Казалось бы, можно чуть уменьшить. Нет: маленький экран, пиксельная плотность, яркий солнечный свет на улице — всё это требует не меньшего кегля, а иногда и большего.
Основное правило: базовый кегль не меньше 16px и на мобиле. Заголовок H1 стоит уменьшить с десктопных 40–48px до 26–32px — иначе один заголовок занимает пол-экрана. Line-height можно оставить тем же. Ширина строки на мобиле ограничена экраном — дополнительно ограничивать её не нужно, но padding по бокам должен быть не менее 16px, иначе буквы «прилипают» к краю.
Ещё одна деталь: тап-зона. Ссылки в тексте должны быть достаточно крупными для нажатия пальцем — минимум 44×44px по рекомендациям Apple и Google. Мелкие inline-ссылки в тексте 14px на мобиле нажать без промахов почти невозможно.
Мини-кейс: типографика до и после
Клиент — небольшая юридическая компания из Хабаровска. Сайт на Аспро, основной контент — статьи и описания услуг. При первичном аудите обнаружили: кегль основного текста 13px, line-height 1.25, шрифт Arial, цвет текста #888 на белом фоне (контраст 3.5:1 — ниже нормы WCAG для обычного текста).
Что поменяли: переключили на PT Sans 16px, line-height 1.55, цвет текста #333 (контраст 12.6:1). Заголовки — Montserrat Bold, H2 от 24px. Локально подключили оба шрифта с сервера. Время загрузки шрифтов сократилось на 0.4 секунды за счёт отказа от Google Fonts. Показатель отказов по страницам статей снизился на 18% за первые два месяца после изменений.
Изменений в структуре контента не было — только типографика. Это и есть её прямое влияние на поведенческие факторы.
Чек-лист: типографика на сайте
- Базовый кегль основного текста — не меньше 16px (на десктопе и мобиле).
- Line-height — 1.4–1.6 для текста, 1.2–1.3 для заголовков.
- Длина строки — 50–75 символов (ограничить max-width колонки).
- Не более двух гарнитур; не более 3 начертаний каждой.
- Шрифты с качественной кириллицей; загружены локально с сервера.
- Контраст текста к фону — не ниже 4.5:1 для обычного текста (WCAG AA).
- Иерархия заголовков H1–H3 видна с расфокусированным зрением.
- Русская микротипографика: тире «—», кавычки «», неразрывные пробелы.
- На мобиле: padding по бокам ≥16px, тап-зоны ссылок ≥44px.
- Стили прописаны централизованно — в custom.css темы Аспро.
Частые вопросы
Какой шрифт лучше всего подходит для кириллического текста на сайте?
Универсальные варианты, которые хорошо работают с кириллицей: PT Sans, PT Serif (для газетного стиля), Inter, Manrope, Nunito Sans. У всех есть качественный кириллический набор и веса для иерархии. Inter и PT Sans — самые нейтральные, подходят практически любому бизнес-сайту.
Почему Google Fonts может быть проблемой для российских сайтов?
Два момента: скорость (шрифты грузятся с внешнего сервера, который может быть медленным или заблокированным) и законодательство. По 152-ФЗ, если браузер пользователя запрашивает файл с серверов Google, IP-адрес уходит за рубеж без согласия пользователя. Решение — скачать шрифты и подключить с собственного хостинга.
Как настроить типографику в теме Аспро?
В Аспро Allcorp3 стили типографики задаются через настройки темы (раздел «Дизайн» в административной панели Битрикс) и через custom.css. Именно в custom.css удобно переопределять font-size, line-height и font-family — так изменения не теряются при обновлении темы. Для разработки сайтов под конкретный брендбук мы обычно выносим все типографические переменные в отдельный блок в начале этого файла.
Что такое висячая пунктуация и нужна ли она на сайте?
Висячая пунктуация — это вынос кавычек и тире за левый край текстового блока, чтобы строки начинались с буквы, а не со знака препинания. Это даёт ровный левый край и улучшает читаемость длинных материалов. В вёрстке реализуется через CSS-свойство hanging-punctuation: first (поддерживается Safari) или через JavaScript-типограф. Для сайтов с большим количеством текстового контента — полезная деталь.
Какой минимальный контраст текста нужен по WCAG?
Для основного текста (до 18px без жирного начертания) — соотношение яркостей не менее 4.5:1. Для крупного текста (18px и выше или жирный от 14px) — не менее 3:1. Проверить любую пару цветов можно в WebAIM Contrast Checker — вводите hex-коды текста и фона, получаете точное значение и вердикт.
Типографику на сайте несложно настроить правильно, если знать ориентиры. Если при разработке сайта или аудите нужна помощь — обращайтесь. Работаем с проектами в Хабаровске, Владивостоке, Южно-Сахалинске и по всему Дальнему Востоку. Звоните: 8 800 55-100-10.
