Не позволяйте несогласованным шрифтам и отступам испортить впечатление пользователей о вашем бренде. Эти рекомендации помогут вам улучшить UX и повысить вовлеченность аудитории.
Оформление текстового контента очень сильно влияет на то, как пользователи воспринимают бренд и насколько удобным и приятным будет их взаимодействие с интерфейсом. Тщательно продуманная типографика обеспечивает читаемость, создает четкую визуальную иерархию и отражает индивидуальность бренда.
Хотя каждый дизайнер приложений подходит к работе с текстом по-своему, все мы должны придерживаться фундаментальных принципов, помнить об ожиданиях аудитории и следить за новыми технологиями и трендами.
Как UI/UX-дизайнер с большим опытом работы, я понимаю, насколько важны правильные стиль, размер и расположение шрифтов для достижения визуальной гармонии на небольших экранах. Вот 5 советов, которые помогут вам создать практичную и при этом привлекательную мобильную типографику, выбрать правильный шрифт и сделать дизайн доступным для всех пользователей.
1. Сфокусируйтесь на читабельности
Выбирая шрифт для своего мобильного приложения, в первую очередь обращайте внимание на читабельность. Это важнейшее свойство, которое влияет на простоту восприятия контента, доступность, удобство навигации и количество ошибок.
Хотя читабельность играет важную роль в UX всех цифровых продуктов, она имеет особое значение в мобильных приложениях, где ограниченное пространство и сниженная концентрация внимания делают быструю и четкую коммуникацию ключевым фактором успеха.
Например, работая над приложением для доставки еды NOM NOM, я ставил во главу угла продуманную типографику и разборчивые шрифты. Я старался максимально повысить читабельность элементов навигации, включая пункты меню, фильтры и кнопки, чтобы пользователи могли без труда сориентироваться в приложении и успешно оформить заказ.
Выбирая шрифт для мобильной типографики, учитывайте эти факторы:
С засечками vs без засечек
Как шрифты с засечками, так и шрифты без засечек обладают определенными характеристиками, которые могут повлиять на эстетику и читабельность интерфейса.
Шрифты с засечками упрощают разграничение некоторых символов (например, заглавной буквы «I» и строчной «l», а также цифры «1»). Раньше эти шрифты ассоциировались в основном с печатными материалами, но с развитием технологий они стали неотъемлемой частью многих цифровых продуктов, в том числе мобильных приложений.
Например, известное издание The New York Times использует Georgia, элегантный разборчивый шрифт с засечками, как на сайте, так и в приложении. Его глифы с толстыми штрихами, открытыми апертурами и высокие строчные буквы легко читаются даже при небольшом размере.
Однако далеко не все шрифты с засечками подходят для этих целей. Остерегайтесь чрезмерно стилизованных шрифтов, например, Old English, с их тенями, контурами и декоративными деталями, поскольку такой текст особенно трудно читать на маленьких экранах.
Большинство шрифтов без засечек, напротив, хорошо работают в условиях ограниченного пространства. Их часто используют в мобильных приложениях, потому что чистый простой дизайн позволяет легко читать их на маленьких экранах и экранах с низким разрешением. Один из примеров — Roboto, современный геометрический шрифт, разработанный Google для мобильной операционной системы Android.
Шрифтовые пары
Составить удачную шрифтовую пару не так просто: гарнитуры должны дополнять друг друга, выглядеть гармонично и сбалансированно. Но когда дело доходит до использования нескольких шрифтов в мобильных приложениях, необходимо действовать еще более осторожно.
Читатель может находиться в движении или выполнять несколько задач одновременно, поэтому мы должны сделать всё, чтобы он быстро и эффективно усвоил информацию. Кроме того, количество шрифтов влияет на скорость загрузки страницы, что особенно важно для пользователей мобильных устройств, которые не любят ждать.
Дизайнер Toptal Карли Чанг предлагает выстроить типографическую систему, определяющую шрифт, стиль, размер, межстрочное расстояние и другие параметры для разных типов текстового контента в вашем приложении, включая заголовки, основной текст, подписи, меню и кнопки. Если вы работаете с известным брендом, у него, скорее всего, уже есть руководство по стилю, которому вам нужно будет следовать.
Если вы все же решили использовать один шрифт для всего текста, вы можете поиграть с его начертаниями, стилями и размерами, чтобы добавить контраста и создать визуальную иерархию. Оптимальным для чтения считается начертание Medium, а Bold отлично подходит для расстановки акцентов и выделения тех фрагментов текста, на которые вы хотите обратить внимание аудитории.
Буквы-самозванцы
Чтобы обеспечить высокую читабельность, избегайте шрифтов с «самозванцами» — символами, которые выглядят практически одинаково и могут вызывать путаницу. Например, ноль можно принять за заглавную букву O, а строчную букву L — за заглавную I или цифру 1 на небольших экранах.
2. Учитывайте кликабельность текста
Правильный размер шрифта помогает не только создать гармоничный визуальный опыт, но и обеспечить читаемость и кликабельность текстового контента на небольших экранах. Когда мы выстраиваем типографику в мобильном приложении, нам нужно сделать текст достаточно крупным для сенсорного взаимодействия, чтобы пользователи могли точно попасть пальцем по ссылке или кнопке, но не настолько крупным, чтобы он занимал весь экран или требовал чрезмерной прокрутки.
По общему правилу минимальный размер шрифта для основного текста — 16px, а заголовки должны быть примерно в 1,3 раза больше. (Другой вариант — взять за основу золотое сечение и сделать заголовки в 1,618 раза больше основного текста).
Дизайнеры также могут воспользоваться готовыми системами типографики с заранее заданными свойствами и стилями. Например, онлайн-инструмент Typescale (типографическая шкала) предоставляет на выбор несколько коэффициентов для создания шрифтовой иерархии. Вы можете сразу увидеть, как будет выглядеть финальный результат, в том числе на мобильных устройствах.
3. Выстройте четкую иерархию
Размер, стиль, цвет, начертание, регистр и контрастность текста помогают пользователям быстро определить, какие элементы являются наиболее важными. Грамотно выстроенная иерархия придает смысл и контекст каждому фрагменту контента — заголовкам, подзаголовкам и основному тексту.
Дизайнер Toptal Брайан Картер рекомендует использовать для выравнивания элементов сетки и направляющие. Они помогут сделать типографику пропорциональной и обеспечат единообразие отступов.
Высота строки для основного текста
Правильно подобранные трекинг, кернинг и высота строки — ключ к читабельности, особенно на небольших экранах, где свободное пространство сильно ограничено. Оптимальная высота строки для основного текста на мобильных устройствах — 160% от размера шрифта. Это позволит добавить в контент больше воздуха и снизить нагрузку на глаза.
Высота строки для заголовков
Заголовки должны выделяться на фоне основного текста. Простой способ добиться этого — оставить свободное пространство вокруг заголовка и уменьшить высоту строки, если он занимает несколько строк. Это позволит визуально отделить заголовок от остального текста.
По общему правилу высота строки для заголовков должна быть в 1,2 раза больше размера шрифта, а для подзаголовков — в 1,4 раза. Если заголовок набран прописными буквами, расстояние между строками должно соответствовать или быть в 1,2 раза больше ширины вертикальных штрихов букв.
Текст-бровь
Текст-бровь — это надпись, которая располагается над заголовком и позволяет привлечь к нему дополнительное внимание. Обычно такой текст обозначает категорию контента и помогает пользователям быстрее сориентироваться в интерфейсе. В мобильных приложениях его задача — мгновенно дать читателям представление о том, что их ожидает на странице.
4. Сделайте типографику доступной
Ваше приложение должно быть доступным для всех, включая пользователей с нарушениями зрения и дислексией.
Во-первых, помните, что слабовидящим пользователям сложно воспринимать длинные строки текста. Да, на мобильных устройствах эта проблема не так актуальна, но на десктопе старайтесь не выходить за пределы 80 символов.
Во-вторых, важна контрастность. Если она слишком низкая, текст становится трудночитаемым. Позаботьтесь о добавлении темного режима — он поможет снизить нагрузку на глаза. Вы можете также предусмотреть возможность изменения размера шрифта в приложении, чтобы люди могли настраивать его самостоятельно.
Не забывайте о пользователях скринридеров, специальных программ, преобразующих текст и другие элементы экрана в синтезированную речь или шрифт Брайля. Такие программы могут неправильно распознавать буквы, расположенные слишком близко или перекрывающие друг друга. Очень тонкие шрифты также вызывают затруднения.
На недавнем вебинаре Джасинта Окли, UX-дизайнер и консультант Vision Australia, предложила использовать гуманистические гротески, например Calilbri, Verdana или Tahoma. Большая высота строчных букв, открытые апертуры и уникальные формы глифов делают их идеальной опцией для скринридеров. Еще один шрифт с подобными характеристиками — Proxima Nova, он даже вошел в десятку лучших шрифтов для мобильных приложений.
%201.webp)
5. Всегда тестируйте типографику
Тестирование позволяет не только найти ошибки, но и убедиться, что выбранные шрифты, размеры и стили повышают удобство использования. Такие инструменты, как Font Tester, Fonts Ninja и Typetester, позволяют оценить читабельность и разборчивость, а UserZoom, UserTesting и Optimizely — проводить опросы и другие исследования для сбора количественных и качественных данных.
Участники тестирования проходят различные сценарии, чтобы выявить недостатки вашего дизайна. Например, они могут сказать, какие надписи набраны слишком мелким, а какие — слишком крупным шрифтом. Задача команды дизайнеров — учесть все замечания и исправить ошибки.
Заключение
Мобильная типографика меняется вместе с трендами и предпочтениями аудитории. Подпишитесь на лидеров отрасли, вступайте в дизайн-сообщества, читайте полезные статьи, чтобы всегда оставаться в курсе последних новостей.
Хорошая типографика выходит за рамки соблюдения базовых рекомендаций. Важно понимать своих пользователей, чтобы создать для них комфортное пространство, в котором они смогут свободно взаимодействовать с вашим брендом или продуктом.
Спасибо за внимание!
