Ефектний заголовок на великому моніторі може зайняти весь екран телефона. Тонкий сірий підпис, який виглядає делікатно в макеті, іноді майже зникає на сонці. Мобільна типографіка починається з розуміння умов читання: невеликий екран, короткі сесії, різна якість зв’язку та потреба швидко перейти до дії. Її завдання не зменшити настільну версію, а зберегти зміст і порядок уваги в іншому середовищі.
Створіть зрозумілу ієрархію
Читач має одразу відрізняти заголовок сторінки, назву розділу, основний текст і пояснення до поля. Для цього не потрібні десятки розмірів та накреслень. Невелика послідовна система працює краще, якщо відступи підтримують зв’язок між елементами. Заголовок має бути ближче до абзацу, який він відкриває, ніж до попереднього блоку. Однакові компоненти повинні виглядати однаково на всьому сайті, зокрема на сторінках журналу й контактів.
Перевіряйте справжні тексти
Короткий демонстраційний заголовок не показує, як поводитиметься довга українська назва послуги. Підставте реальний контент ще під час проєктування. Перевірте апострофи, лапки, тире, цифри, адреси та довгі слова. Не ставте примусові перенесення лише заради одного красивого скриншота: на іншій ширині екрана вони можуть зламати ритм. Якщо назва не вміщується, спочатку спростіть формулювання, а вже потім зменшуйте літери до незручного розміру.
Думайте про абзац як про інтерфейс
Довгий суцільний текст важко переглядати на телефоні. Розбийте матеріал за змістом, дайте розділам конкретні назви та винесіть послідовність дій у список, коли це справді допомагає. Водночас кожне речення не повинно ставати окремим декоративним блоком. Потрібен ритм, у якому можна і швидко переглянути сторінку, і уважно прочитати пояснення. Підписи до важливих умов не варто робити непомітними лише для збереження чистого макета.
Не забувайте про керування
Типографіка впливає й на кнопки та форми. Людина повинна розуміти, що відбудеться після натискання. «Обговорити проєкт» точніше описує дію, ніж абстрактне «Почати», якщо наступний крок є зверненням. Поля мають зберігати зрозумілі підписи після введення значення, а повідомлення про помилку пояснювати спосіб виправлення. Важливу інформацію не слід передавати тільки кольором: коротке текстове пояснення допомагає уникнути здогадок.
Тестуйте не лише розмір екрана
Перевірте сторінку зі збільшеним масштабом, клавіатурною навігацією та без завантажених зображень. Переконайтеся, що основний зміст не обрізається й не перекривається фіксованою панеллю. W3C пропонує початкові перевірки доступності, зокрема для заголовків та інших елементів сторінки. Вони не замінюють повного аудиту, але допомагають помітити очевидні проблеми до публікації. Автоматичний тест також не здатний оцінити ясність усіх формулювань.
Фінальна перевірка проста: відкрийте сайт на звичайному телефоні та прочитайте його як новий відвідувач. Якщо доводиться вдивлятися, збільшувати окремий фрагмент або здогадуватися про наступну дію, варто переглянути рішення, навіть якщо макет виглядає бездоганно.