Типографика для бизнеса: 5 правил читаемости

9 сентября 2026 · Команда SaitHub · SEO-блог SaitHub

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

Выбор шрифтов и их количество

Не более двух шрифтов на сайте: один для заголовков, второй для основного текста. Бесплатные варианты вроде Inter, Roboto или Montserrat хорошо читаются на экранах и не замедляют загрузку. Избегайте декоративных шрифтов с узкими буквами или сложными засечками — они затрудняют восприятие на мобильных устройствах.

Важно проверять читаемость в тёмной и светлой темах. Если сайт поддерживает dark mode, шрифт должен сохранять контраст без потери чёткости. Многие компании теряют трафик из-за того, что текст сливается с фоном при смене темы.

• Шрифт с засечками — подходит для заголовков и акцентов, но не для длинных абзацев
• Гротеск (без засечек) — основной вариант для текстов, обеспечивает максимальную читаемость
• Моноширинный — используется только для кода или технических данных

Размеры и интерлиньяж

Базовый размер текста для основного контента — 16-18 пикселей. Заголовки первого уровня должны быть в 1.5-2 раза больше, чем основной текст. Интерлиньяж (расстояние между строками) устанавливается в 1.4-1.6 от размера шрифта. Слишком плотный текст вызывает усталость глаз, слишком разреженный — увеличивает время прокрутки.

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

Контраст и цвет

Контраст текста к фону должен соответствовать стандарту WCAG AA: минимум 4.5:1 для обычного текста. Белый текст на чёрном фоне — идеал, но серый на белом часто даёт соотношение 3:1, что недостаточно. Проверьте контраст через онлайн-калькуляторы, а не по ощущениям.

Акцентные цвета для ссылок и кнопок должны выделяться, но не кричать. Яркий красный на белом может отвлекать от основного действия. Используйте палитру из 3-4 цветов: основной, фоновый, акцентный и для ошибок.

• Контраст 4.5:1 — минимальный стандарт для читаемости
• Контраст 7:1 — оптимальный для пожилых пользователей и слабовидящих
• Цвет ссылок — должен отличаться от основного текста, но не быть слишком ярким

Иерархия и структура

Заголовки должны визуально выделяться не только размером, но и весом шрифта. H1 — жирный, H2 — полужирный, H3 — обычный. Разрывы между блоками текста должны составлять минимум 1.5-2 единицы от интерлиньяжа. Длинные абзацы без подзаголовков сканируются хуже на 30%.

Структурируйте текст с помощью списков и коротких абзацев. Каждый блок должен содержать одну мысль. Если предложение длиннее 25 слов — разбейте его на два. Пользователь сканирует страницу за 10-15 секунд, и именно структура определяет, найдёт ли он нужную информацию.

Мобильная адаптация

На мобильных устройствах отступы от краёв экрана сокращаются до 16-20 пикселей. Размер шрифта остаётся тем же, но ширина колонки текста уменьшается. Не используйте более 70 символов в строке на десктопе и 45-50 на мобильных. Длинные строки утомляют глаза и снижают скорость чтения.

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

• Отступы на мобильных — 16-20 пикселей от краёв
• Ширина колонки — 45-50 символов на мобильных
• Зум-тест — проверьте читаемость при увеличении на 150-200%

Производительность и загрузка

Веб-шрифты увеличивают время загрузки страницы на 200-500 миллисекунд. Используйте формат WOFF2, который сжимает файлы на 30-40% по сравнению с TTF. Загружайте только необходимые начертания: обычный, полужирный, курсив. Не подключайте весь набор начертаний, если используете только два.

Кэшируйте шрифты в браузере. При повторном визите файл не скачивается заново. Настройте preload для критических шрифтов, чтобы они отобразились раньше остальных элементов. Это снижает FOUT (Flash of Unstyled Text) — эффект, когда текст мигает при загрузке.

Тестирование и контроль

Проверяйте типографику на реальных устройствах: iPhone, Android, планшет. Разные экраны имеют разную плотность пикселей, и шрифт может выглядеть по-разному. Используйте инструменты вроде Lighthouse или PageSpeed Insights для оценки скорости и читаемости.

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