Текст на мобильном экране: размеры, интервалы и удобство чтения

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

Начните с обычного чтения

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

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

Сохраняйте понятный ритм страницы

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

Не делайте каждый абзац отдельной карточкой, если это мешает связному чтению. Выделяйте таблицу, пример или предупреждение по назначению. Список подходит для параллельных действий, но не заменяет объяснение причины. В статье о переносе сайта читателю важно понять зависимость между резервной копией и изменением доступа.

Проверьте узкую ширину и увеличение

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

Увеличьте текст и межстрочные интервалы средствами браузера или проверочного инструмента. Содержимое не должно обрезаться из-за фиксированной высоты карточки. WCAG рассматривает такую адаптацию как требование к сохранению информации и функций; конкретные значения для проверки приведены в документации. Это отличается от требования поставить всем посетителям один обязательный интервал.

Уберите препятствия от служебных элементов

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

Содержание статьи помогает перейти к разделу, но закреплённое меню не должно закрывать его заголовок. Проверьте переходы по якорям на реальной странице. Откройте изображение, прокрутите таблицу и вернитесь к тексту. Эти небольшие действия показывают удобство лучше, чем одна общая оценка мобильной адаптации.

Проверяйте материалы после редактирования

Редактор может добавить длинное название, широкую таблицу или изображение другого размера. Поэтому оставьте сотруднику короткую проверку перед публикацией: первый экран, середина текста, таблица, FAQ и нижняя кнопка. Читаемость поддерживается не только CSS, но и аккуратной подготовкой каждого нового материала.

Связанные материалы

Как проверить, понятно ли меню человеку, который впервые пришёл на сайт

Примеры в технической статье: как объяснить задачу без лишнего кода

Документация для проверки

Сохранение содержимого при узком экране: WCAG

Проверка увеличенных текстовых интервалов: WCAG

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