Декоративный шрифт в мобильной кнопке: тест кириллицы и доступности

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

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

Кириллица требует отдельной проверки. Латинское «Pay» не предсказывает, как в той же гарнитуре будут выглядеть «Продолжить», «Оформить заказ» или «Войти в аккаунт». У кириллических букв свои ширины, формы и сочетания: «Ш», «Щ», «Ж», «Ы», «Ю» могут занимать заметную часть строки, а «й» и «ё» нуждаются в чистом пространстве сверху. Даже если шрифт поддерживает кириллицу, качество конкретных знаков и кернинга нужно смотреть в выбранном начертании.

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

Начните с смысла кнопки, а не с гарнитуры. «Купить», «Оплатить» и «Удалить» — короткие, но критичные действия; пользователь должен без колебаний понимать результат нажатия. «Узнать больше» или «Смотреть коллекцию» чаще ведут к дополнительной информации, однако от этого не становятся декоративными подписями. Если действие важно для завершения сценария, читаемость важнее того, насколько характерно выглядит буквенная форма.

Сформулируйте иерархию элементов: основной CTA, вторичное действие, ссылка. Акцентная гарнитура может подойти короткой основной кнопке, если она сохраняет узнаваемость, но для серии тесных контролов одной страницы разумнее оставить нейтральный UI-шрифт. Единый стиль интерфейса не требует одинакового начертания везде: важно, чтобы роль элемента определялась формой, расположением, цветом и подписью вместе, а не только необычными буквами.

Проверьте и сами слова. Не сокращайте «Продолжить оформление» до загадочного «Далее», если человек не может предсказать следующий шаг. Лучше убрать лишнее из формулировки без потери смысла, чем сжимать надпись отрицательным межбуквенным интервалом или уменьшать размер текста. Разговорные короткие команды подходят только тогда, когда соответствуют голосу продукта и привычны его аудитории.

Сделайте тестовую матрицу из подписей, встречающихся в продукте: коротких («Войти», «Оплатить»), средних («Добавить в корзину») и длинных («Продолжить оформление заказа»). Добавьте строки с характерными буквами: «Выбрать ширину», «Завершить покупку», «Открыть настройки», «Ещё варианты». Это не универсальный эталонный набор, а способ проверить формы и сочетания, которые ваша аудитория действительно увидит.

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

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

Избегайте фиксированной высоты вместе с обрезанием текста. Надпись не должна исчезать под многоточием, выходить за края или перекрывать соседнюю кнопку, когда меняются размер шрифта, масштаб страницы либо интервал между буквами. У WCAG 2.2 есть критерий 1.4.12: при увеличении заданных пользователем интервалов строк, абзацев, букв и слов контент должен сохранять содержание и функциональность. Для кнопки это означает проверить, что подпись не пропадает и элемент остаётся управляемым. Это требование к поведению контента при изменении интервалов, а не предписание выставить эти значения по умолчанию.

Также проверьте увеличение текста до 200%: WCAG 2.2, критерий 1.4.4, требует возможность такого увеличения без потери содержания или функций. Уменьшенная кнопка, сделанная только как картинка, или компонент с `white-space: nowrap` и фиксированной шириной может не выдержать увеличение. Протестируйте браузерное масштабирование и увеличенный системный текст на реальном устройстве; оставьте кнопке возможность расширяться или переносить подпись, сохранив логичный порядок элементов.

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

Контраст оценивают между текстом и его фоном, а не по впечатлению от палитры. Критерий WCAG 2.2 1.4.3 задаёт минимум 4,5:1 для обычного текста и 3:1 для крупного текста, определённого критерием как минимум 18 pt обычного начертания или 14 pt полужирного. Не считайте надпись крупной только потому, что она выглядит эффектной: учитывайте размер и начертание по правилу WCAG. Проверьте контраст для каждой цветовой темы и состояния, включая наведённое, фокусное и отключённое (для неактивных компонентов есть исключение в критерии). Источник: W3C: критерий контраста WCAG 2.2

Размер шрифта сам по себе не делает кнопку удобной для касания. Критерий 2.5.8 WCAG 2.2 устанавливает для указательных устройств минимальную область цели 24 на 24 CSS-пикселя либо допускает заданные исключения, в частности достаточный интервал между меньшими целями. Это минимум соответствия, а не рекомендация делать каждый основной CTA ровно такого размера. На телефоне проверяйте, можно ли попасть по элементу пальцем, не задев стоящий рядом «Отмена» или иконку. Источник: W3C: минимальный размер цели WCAG 2.2

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

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

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

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

Первая ошибка — судить о кириллице по латинскому образцу: формы, ширины и качество знаков могут отличаться. Вторая — тестировать лишь слово «Купить» и не проверять самое длинное реальное действие. Третья — зафиксировать высоту и скрыть переполнение, вместо того чтобы разрешить строке переноситься. Четвёртая — усиливать впечатление тонкой гарнитуры светлым текстом на ярком фоне, не посчитав контраст. Пятая — уменьшать межбуквенный интервал до отрицательного значения, чтобы втиснуть подпись: это может ухудшить разборчивость. Шестая — считать 24 CSS-пикселя универсальным идеальным размером кнопки, хотя WCAG задаёт порог цели для указателя и содержит исключения.

Можно, если текст остаётся разборчивым на реальном размере, контрастен фону и не теряется при увеличении. Сравните его с нейтральным вариантом на телефоне и проверьте полную подпись, соседние действия и состояния кнопки. Для критичного действия понятность важнее стилистического эффекта.

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

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

В WCAG 2.2 критерий 1.4.3 требует контраст не ниже 4,5:1 для обычного текста и 3:1 для крупного текста в определении критерия. Проверьте каждый фон и состояние компонента. Размер и начертание шрифта определяют, применим ли порог крупного текста.

WCAG 2.2, критерий 2.5.8, задаёт размер указательной цели минимум 24 на 24 CSS-пикселя и перечисляет исключения, включая вариант с интервалом вокруг меньших целей. Это критерий доступности, а не универсальный размер любой кнопки. Оцените также реальное попадание пальцем на устройстве.

Сначала проверьте макет самостоятельно по реальным подписям, увеличению текста, контрасту и фокусу. Затем попросите коллегу, не знакомого с экраном, выполнить короткое действие без подсказки и наблюдайте, что вызывает заминку. Такой тест выявляет очевидные проблемы, но не заменяет проверку с людьми с разными потребностями.

Оставьте её для коротких, менее критичных акцентов и используйте нейтральный UI-шрифт для основного CTA. Можно пересмотреть формулировку без потери смысла, увеличить доступное место или выбрать другое начертание. Не компенсируйте слабую читаемость микроскопическим кеглем, чрезмерным сжатием букв или низким контрастом.

Декоративный шрифт в мобильном CTA оценивают по реальной кириллице, реальным размерам и пользовательским настройкам. Дайте кнопке пережить длинную подпись, увеличение текста, изменение интервалов и касание пальцем; измерьте контраст и проверьте состояния. Если буквы требуют усилия, оставьте выразительную гарнитуру для заголовков, а кнопке подберите более ясный голос. Чтобы проверить собственную идею начертания, создайте шрифт на fontgenerator.ru и испытайте его на строках интерфейса до передачи макета в разработку.