Проверить читаемость текста на мобильных

Зачем проверять читаемость текста на мобильных

Читаемость текста на мобильных устройствах напрямую влияет на поведенческие факторы. Если текст мелкий, строки слишком длинные, контраст низкий — пользователь не будет напрягать глаза, он уйдёт. По данным Яндекс Метрики моих проектов, сайты с корректно настроенной типографикой для мобильных получают на 20-30% больше времени на странице по сравнению с сайтами, где текст «просто уменьшился под размер экрана».

Google и Яндекс оценивают мобильную версию сайта (mobile-first indexing) и учитывают читаемость контента. Google напрямую указывает в рекомендациях: размер шрифта должен быть достаточным для чтения без масштабирования. Яндекс оценивает удобство мобильной версии и может снизить позиции сайта, если мобильная версия неудобна.

Отдельный аспект — доступность (accessibility). Стандарт WCAG 2.1 определяет минимальные требования к контрастности, размеру текста, межстрочному интервалу. Соблюдение этих требований улучшает опыт не только для людей с нарушениями зрения, но и для всех пользователей — на ярком солнце, в транспорте, с усталыми глазами.

Пошаговая инструкция

Шаг 1. Проверьте размер основного текста

Минимальный размер основного текста (body) для мобильных — 16px. Это рекомендация и Google, и Apple Human Interface Guidelines. При размере 14px текст уже требует напряжения, при 12px — практически нечитаем без масштабирования.

Как проверить:

1. Откройте сайт в Chrome DevTools (F12).
2. Включите режим адаптивности (Ctrl+Shift+M) или выберите конкретное устройство.
3. Выделите абзац основного текста → вкладка Computed → ищите font-size.
4. Проверьте, что для viewport 360-390px font-size не менее 16px.

Рекомендуемые размеры для разных элементов:

• Основной текст (body, p): 16-18px.
• Заголовок H1: 24-28px.
• Заголовок H2: 20-24px.
• Заголовок H3: 18-20px.
• Мелкий текст (подписи, сноски): не менее 14px.
• Кнопки и ссылки: не менее 16px.

CSS для мобильных:

body {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  body {
    font-size: 16px;   /* не уменьшаем! */
    line-height: 1.6;
  }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
}

Шаг 2. Проверьте контрастность

Контрастность — соотношение яркости текста и фона. Стандарт WCAG AA требует:

• Обычный текст: контрастность не менее 4.5:1.
• Крупный текст (18px+ bold или 24px+ regular): не менее 3:1.
• Элементы интерфейса (кнопки, поля форм): не менее 3:1.

Как проверить контрастность:

• Chrome DevTools. Выделите элемент с текстом → в панели Styles наведите на цвет — появится попап с коэффициентом контрастности и соответствием WCAG AA/AAA.
• WebAIM Contrast Checker (webaim.org/resources/contrastchecker). Введите цвет текста и фона — сервис покажет коэффициент и соответствие стандартам.
• Lighthouse. Запустите Lighthouse в Chrome DevTools → раздел Accessibility → проверьте наличие ошибок контрастности.

Типичные проблемы контрастности:

• Серый текст (#999, #aaa) на белом фоне — контрастность 2.5:1, не проходит WCAG AA.
• Белый текст на светлом фоне фотографии — нет гарантированного контраста.
• Цветной текст (синий, зелёный) на цветном фоне — не всегда очевидна проблема, но контрастность может быть недостаточной.

Решение: основной текст — тёмный (#333 или #222) на белом (#fff) или светло-сером (#f5f5f5) фоне. Это даёт контрастность 12-13:1 — с запасом.

Шаг 3. Настройте межстрочный интервал

Line-height (межстрочный интервал) критичен для читаемости. На мобильных, где строки длинные относительно размера экрана, слишком плотный текст превращается в стену символов.

Рекомендации:

• Основной текст: line-height: 1.5-1.6. WCAG AA требует не менее 1.5 для основного текста.
• Заголовки: line-height: 1.2-1.3. Для заголовков допустим меньший интервал, потому что они короче.
• Списки: line-height: 1.4-1.5.

Дополнительные параметры типографики по WCAG:

• Межабзацное расстояние: не менее 2x от межстрочного. Если line-height 24px, расстояние между абзацами — не менее 48px (или margin-bottom: 1.5em).
• Межбуквенный интервал (letter-spacing): не менее 0.12em для основного текста. На практике дефолтное значение (normal) обычно достаточно для русского языка.
• Интервал между словами (word-spacing): не менее 0.16em. Опять же, дефолтное значение обычно подходит.

Шаг 4. Проверьте ширину строки

Оптимальная ширина строки для комфортного чтения — 45-75 символов. На мобильных устройствах с шириной 360px и шрифтом 16px строка обычно получается 35-45 символов — это на нижней границе, но допустимо.

Проблемы возникают, когда:

• Текст занимает всю ширину экрана без боковых отступов. Строки начинаются от самого края — тяжело читать, глаз теряет начало следующей строки. Решение: padding 16-20px слева и справа.
• На планшете текст растягивается на 768px. При шрифте 16px это 80-90 символов в строке — слишком много. Решение: ограничьте max-width блока текста до 680-720px или увеличьте шрифт до 18px.

.content {
  padding-left: 16px;
  padding-right: 16px;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

Шаг 5. Проверьте масштабирование

Мета-тег viewport должен разрешать масштабирование пользователем. Некоторые разработчики блокируют зум:

<!-- Плохо — блокирует масштабирование -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Хорошо — разрешает масштабирование -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Блокировка масштабирования — нарушение доступности. Пользователи с нарушениями зрения не могут увеличить текст. Google учитывает это в оценке мобильной версии. Lighthouse помечает user-scalable=no как ошибку доступности.

Шаг 6. Проверьте отображение специальных элементов

Основной текст — полдела. На мобильных часто ломается отображение:

• Таблицы. Широкая таблица выходит за границы экрана. Решение: overflow-x: auto для обёртки таблицы или перестроение в карточки (об этом есть отдельная инструкция).
• Блоки кода. Длинные строки кода не переносятся и выходят за экран. Решение: overflow-x: auto; white-space: pre-wrap; или горизонтальная прокрутка.
• Изображения с текстом. Инфографика с мелким текстом нечитаема на мобильных. Решение: создать отдельную мобильную версию или продублировать ключевую информацию текстом.
• Кнопки и ссылки слишком близко. Два действия рядом — пользователь промахивается. Минимальный отступ между интерактивными элементами — 8px.

Шаг 7. Проведите комплексную проверку

Финальный чеклист проверки читаемости:

1. Запустите Lighthouse → Accessibility. Исправьте все ошибки, связанные с контрастностью, размером текста, масштабированием.
2. Откройте 5 основных типов страниц на реальном смартфоне. Прочитайте первые 3 экрана каждой страницы — комфортно ли читать?
3. Попросите другого человека (не разработчика, не маркетолога) открыть сайт на смартфоне и прочитать одну статью. Спросите: было ли удобно? Что мешало?
4. Проверьте сайт на ярком солнце (выйдите на улицу) — виден ли текст? Это реальный сценарий для мобильных пользователей.

Типичные ошибки

• Размер шрифта 14px или меньше на мобильных. Текст читаем на десктопе, но на мобильных требует напряжения глаз или масштабирования. Минимум 16px для основного текста.
• Серый текст на белом фоне. Дизайнерское решение ради «лёгкости» — на практике текст плохо читается, особенно на мобильных на улице. Контрастность ниже 4.5:1 — не проходит WCAG AA.
• Отсутствие боковых отступов. Текст начинается от самого края экрана. Нет «воздуха» — строки сливаются, глаз теряется. Минимум 16px padding слева и справа.
• Блокировка масштабирования. user-scalable=no или maximum-scale=1 в мета-теге viewport. Нарушение доступности, негативный сигнал для Google.
• Line-height 1.0-1.2 для основного текста. Строки слипаются, текст превращается в стену. Минимум 1.5 по WCAG AA.
• Разный размер шрифта на разных страницах. На одной странице 16px, на другой 14px, на третьей 18px. Непоследовательность — признак технического беспорядка. Унифицируйте типографику через единую систему стилей.
• Текст в картинках. Заголовки, описания, контактная информация — в виде PNG или JPG. На мобильных такие картинки масштабируются, текст размывается. Используйте HTML-текст для всего контента.

Что проверить в итоге

• Основной текст — не менее 16px на мобильных устройствах.
• Контрастность основного текста соответствует WCAG AA — не менее 4.5:1.
• Межстрочный интервал (line-height) — не менее 1.5 для основного текста.
• Боковые отступы (padding) — не менее 16px слева и справа на мобильных.
• Ширина строки на планшете ограничена (max-width) — не более 75 символов.
• Масштабирование не заблокировано — нет user-scalable=no и maximum-scale=1.
• Таблицы, блоки кода и изображения корректно отображаются на мобильных.
• Lighthouse Accessibility не показывает ошибок контрастности и размера текста.
• Сайт проверен на реальных мобильных устройствах — текст читается комфортно.
• Типографика унифицирована — одинаковый подход на всех страницах сайта.