Эффектный заголовок на большом мониторе может занять весь экран телефона. Тонкая серая подпись, которая выглядит деликатно в макете, иногда почти исчезает на солнце. Мобильная типографика начинается с понимания условий чтения: небольшой экран, короткие сессии, разное качество связи и необходимость быстро перейти к действию. Её задача не уменьшить настольную версию, а сохранить смысл и порядок внимания в другой среде.
Создайте понятную иерархию
Читатель должен сразу отличать заголовок страницы, название раздела, основной текст и пояснение к полю. Для этого не нужны десятки размеров и начертаний. Небольшая последовательная система работает лучше, если отступы поддерживают связь между элементами. Заголовок должен быть ближе к абзацу, который он открывает, чем к предыдущему блоку. Одинаковые компоненты должны выглядеть одинаково на всём сайте, включая страницы журнала и контактов.
Проверяйте настоящие тексты
Короткий демонстрационный заголовок не показывает, как поведёт себя длинное украинское название услуги. Подставьте реальный контент ещё во время проектирования. Проверьте апострофы, кавычки, тире, цифры, адреса и длинные слова. Не ставьте принудительные переносы только ради одного красивого скриншота: на другой ширине экрана они могут нарушить ритм. Если название не помещается, сначала упростите формулировку, а уже потом уменьшайте буквы до неудобного размера.
Думайте об абзаце как об интерфейсе
Длинный сплошной текст трудно просматривать на телефоне. Разбейте материал по смыслу, дайте разделам конкретные названия и вынесите последовательность действий в список, когда это действительно помогает. При этом каждое предложение не должно становиться отдельным декоративным блоком. Нужен ритм, при котором можно и быстро просмотреть страницу, и внимательно прочитать объяснение. Подписи к важным условиям не стоит делать незаметными только ради чистого макета.
Не забывайте об управлении
Типографика влияет и на кнопки, и на формы. Человек должен понимать, что произойдёт после нажатия. «Обсудить проект» точнее описывает действие, чем абстрактное «Начать», если следующий шаг — обращение. Поля должны сохранять понятные подписи после ввода значения, а сообщение об ошибке объяснять способ исправления. Важную информацию нельзя передавать только цветом: короткое текстовое пояснение помогает избежать догадок.
Тестируйте не только размер экрана
Проверьте страницу с увеличенным масштабом, клавиатурной навигацией и без загруженных изображений. Убедитесь, что основной текст не обрезается и не перекрывается фиксированной панелью. W3C предлагает начальные проверки доступности, в том числе для заголовков и других элементов страницы. Они не заменяют полный аудит, но помогают заметить очевидные проблемы до публикации. Автоматический тест тоже не способен оценить ясность всех формулировок.
Финальная проверка проста: откройте сайт на обычном телефоне и прочитайте его как новый посетитель. Если приходится вглядываться, увеличивать отдельный фрагмент или угадывать следующее действие, стоит пересмотреть решение, даже если макет выглядит безупречно.