Текст на мобильном сайте: как проверить размер, переносы и читаемость

Читать нужно весь путь до действия

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

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

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

• Описание товара с несколькими абзацами.
• Длинное название и единица цены.
• Подписи полей и пример ввода.
• Сообщение ошибки после действия.
• Кнопка с самой длинной рабочей надписью.

Размер буквы оценивают вместе с масштабом

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

В критерии 1.4.4 WCAG указано увеличение текста до 200% без потери содержания и функций с исключениями. Для приёмки это воспроизводимое действие: увеличить и снова прочитать подпись, а затем завершить форму. Само значение размера в CSS не отвечает на этот вопрос. Важен итог в браузере, где подпись может переноситься и менять высоту кнопки. Если текст обрезан, уменьшение букв вернёт старую проблему читаемости. Для замечания сохраните исходный масштаб и положение прокрутки, чтобы специалист повторил обрезку на том же состоянии, а не подбирал меньший текст на другой странице, где длинная подпись вообще не встречается.

Лучше дать блоку вырасти. Подрядчик подбирает способ вёрстки, а заказчик принимает целый текст и доступное действие, не пытаясь вручную назначить всем элементам одну высоту.

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

Плавное изменение шрифта тоже имеет границы

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

Функция clamp() в описании MDN принимает минимальное, предпочтительное и максимальное значения. Это технический способ ограничить плавное изменение, а не готовый рецепт читаемости. Заказчику достаточно попросить показать, как текст ведёт себя между границами. Исполнитель объяснит, какие ограничения использовал. Значения выбирают по шрифту и содержанию конкретного элемента. Затем откройте соседнюю карточку с коротким названием, чтобы длинный текст не получил отдельное случайное исключение, а общее правило оформления осталось понятным для обоих видов содержания каталога.

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

Я бы принимал поведение текста на реальных названиях, а не выражение с clamp() в описании работ, потому что даже аккуратно заданные пределы могут сохранить слишком большую строку в карточке или слишком мелкую подпись в форме. Затем повторите увеличение текста. Плавность изменения не оправдывает потерю возможности читать в своём масштабе.

Русские слова и артикулы переносятся по-разному

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

Свойство hyphens управляет переносами слов. В MDN объясняется зависимость автоматического переноса от языка содержимого и поддержки браузера. Для русского текста стоит попросить специалиста показать язык страницы и результат на используемых устройствах. Наличие свойства в коде не говорит, где именно появится перенос. Разные браузеры могут показать его по-разному. Приёмка на устройстве клиента полезнее неподвижного образца, потому что словарь переноса и доступная ширина действуют одновременно, а удачное разбиение одного слова ещё не описывает чтение всего длинного названия изделия.

Для длинной неразрывной строки существует overflow-wrap. По документации MDN, свойство допускает разрыв строки, чтобы не выйти за границу. Его обсуждают для адресов, артикулов и подобных значений, не превращая обычные абзацы в набор случайно обрубленных слогов.

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

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

Строкам и абзацам нужно место

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

Критерий 1.4.12 WCAG описывает сохранение содержания и функций при заданных пользователем интервалах. Среди параметров указана высота строки не менее 1,5 размера шрифта. Для абзацев в критерии названо расстояние не менее двойного размера шрифта. Эти величины относятся к испытанию изменения интервалов. Их не следует выдавать за приказ оформить все сайты одинаково. При пользовательском изменении расстояний сохраняются и соседние действия, чтобы посетитель мог дочитать пояснение и перейти дальше без сброса выбранного удобного оформления.

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

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

Подписи формы испытывают после ввода

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

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

Цвет тоже влияет на чтение. В требованиях WCAG к контрасту обычному тексту задан контраст не ниже 4,5:1 с исключениями. Уменьшать контраст пояснений ради аккуратного вида опасно: именно они помогают понять ограничение и исправить ответ.

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

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

Читаемость удобно принимать на сохранённом наборе примеров. Он переживёт смену макета и позволит заметить, что новая карточка снова режет длинные названия.

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

Образец замечания: «На телефоне полное название модели обрезано после общей части. Отличительный суффикс недоступен. Ожидается полное название до выбора товара». Такая запись объясняет последствие и оставляет специалисту выбор способа вёрстки.

• Название отличается от соседних товаров и читается целиком.
• Артикул не расширяет всю страницу.
• Увеличение сохраняет текст и действие.
• Пользовательские интервалы не обрезают строки.
• Ошибка формы остаётся понятной после ввода.
• Кнопка показывает полное действие.

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