Инклюзивный дизайн. Зачем использовать адаптивный шрифт в мобильных приложениях
Что такое адаптивный шрифт и как он работает, рассказывает и показывает Таня Пожарова, ведущий продуктовый дизайнер вертикалей авторизации и плеера онлайн-кинотеатра KION.
Что такое адаптивный шрифт
Адаптивным называют шрифт, который автоматически подстраивается под размер экрана и настройки устройства. Так текст остаётся читаемым и удобным для восприятия на разных устройствах и в разных условиях.
Как работает адаптивный шрифт:
1. Подстраивается под устройство
Меняет свой размер в зависимости от размера экрана. Например, на смартфоне текст будет крупнее ― так его легче читать. А на больших экранах, например на десктопе, текст будет мельче, чтобы помещалось больше информации.
2. Учитывает настройки пользователя
Если пользователь увеличивает или уменьшает текст в настройках своего устройства, адаптивный шрифт учитывает эти изменения и подстраивается. Так делают, например, для улучшения читаемости.
3. Учитывает разрешение экрана
На экранах с высоким разрешением адаптивный шрифт будет оставаться чётким и не будет размываться, так как он способен адаптироваться и к плотности пикселей экрана.
Адаптивный шрифт позволяет комфортно читать текст на любом устройстве: компьютере, планшете, смартфоне или умном телевизоре.
За счёт чего мы достигаем такого эффекта?
Базовый размер шрифта для стандартного экрана
В первую очередь устанавливают базовый размер шрифта для стандартного экрана. Например, для мобильного экрана с шириной 360 px мы используем базовый размер шрифта 17 sp.
Относительные единицы измерения
Этот параметр учитывает плотность пикселей экрана (dpi) и настройки масштабирования пользователя. В Android используют sp (scale-independent pixels), в iOS ― pt (points).
Медиазапросы и брейкпоинты
Чтобы определить, когда в мобильном приложении нужно изменить размер шрифта, используют брейкпоинты. Они могут быть заданы в зависимости от ширины экрана или плотности пикселей.
Dynamic Type и Font Size
iOS и Android позволяют менять шрифт в зависимости от настроек пользователя за счёт системы динамической адаптации.
В случае с iOS используют Dynamic Type. Она автоматически подстраивает шрифт под предпочтения пользователя. Размеры задают с помощью стилей: например, UIFontTextStyleBody, UIFontTextStyleHeadline.
Для Android применяют систему масштабируемых единиц (sp). Указание размера шрифта в sp позволяет учитывать настройки пользователя по увеличению или уменьшению размера текста.
Алгоритмы адаптации
Регулируемый размер текста
- размер экрана (ширина и высота в пикселях);
- плотность пикселей (dpi или ppi);
- настройки масштаба (если пользователь изменил размер текста в настройках устройства).
На основе этих данных и заранее определённых правил выбирается размер шрифта.
Пример алгоритма определения размера шрифта
Этот алгоритм помогает динамически определять и применять подходящий размер шрифта в зависимости от характеристик устройства и настроек пользователя.
Зачем это нужно
Пользователи получают более читаемый, персонализированный, удобный и доступный интерфейс, что влияет на весь пользовательский опыт. Это особенно важно людям, у которых есть проблемы со зрением, или тем, кто просто предпочитает более крупный текст.
Ещё одно преимущество адаптивного шрифта ― новые возможности для персонализации. Размер текста можно настраивать в зависимости от предпочтений и нужд конкретного человека.
И главное: когда текст легко читается, пользователи меньше устают и с большей вероятностью будут дольше пользоваться приложением.
Мобильным платформам адаптивный шрифт помогает:
- создавать приложения, которые одинаково хорошо работают на различных устройствах и экранах;
- упрощать тестирование и разработку приложений;
- экономить время и ресурсы команды — благодаря адаптивным шрифтам разработчикам не нужно создавать разные версии приложения для разных устройств.
Как адаптивный шрифт связан с инклюзивным дизайном
Проектирование интерфейса с учётом многообразия человеческих возможностей и ограничений — это не только плюсик в карму и грамотный репутационный шаг.
Разработчики получают реальную возможность значительно расширить аудиторию и в то же время улучшить пользовательский опыт тысяч или даже миллионов людей с особенностями здоровья.
Например, адаптивный шрифт позволяет сделать приложения более доступными и удобными для людей с нарушениями зрения или дислексией. Как именно это реализуется?
Регулируемый размер текста
- Пользователи могут увеличить размер текста, чтобы он стал более читаемым. Это особенно важно для людей с дальнозоркостью, макулодистрофией и другими нарушениями зрения.
- Адаптивные шрифты могут масштабироваться вместе с контентом. В результате изображение и текст выглядят пропорционально увеличенными, но при этом сохраняют детали.
Поддержка системных настроек
- Обе платформы ― Dynamic Type в iOS и Font Size в Android ― поддерживают системные настройки масштабирования текста. Если пользователь установил больший размер текста в настройках гаджета, все поддерживаемые приложения будут автоматически использовать эти настройки.
- Адаптивный шрифт в приложениях автоматически перенимает системные настройки, а значит не нужно вручную регулировать этот параметр в каждом приложении.
Контрастность и чёткость
- Адаптивные шрифты могут изменять свой стиль и толщину в зависимости от плотности пикселей экрана и в итоге становятся более чёткими и контрастными. Такая оптимизация под экран особенно полезна людям с нарушениями восприятия контрастности.
- Некоторые шрифты, например Atkinson Hyperlegible, специально разработаны для улучшения читаемости и могут использоваться в адаптивных шрифтах для людей с плохим зрением.
Адаптация под разные условия освещения
- «Тёмный» и «светлый» режимы. Адаптивные шрифты могут быть частью настройки интерфейса под разные условия освещения. Например, в тёмном режиме шрифты могут быть более контрастными и крупными, чтобы улучшить читаемость при слабом освещении.
- Изменение цвета текста. Адаптивные шрифты могут менять свой цвет в зависимости от фонового цвета, чтобы обеспечить максимальный контраст и улучшить видимость текста.
Учёт пользовательских предпочтений
- Настройки доступности. Многие приложения предоставляют дополнительные настройки доступности. Например, увеличение интервалов между строками и буквами делает текст более читаемым для людей с нарушениями зрения и дислексией.
- Персонализация интерфейса. Адаптивные шрифты позволяют настроить интерфейс в соответствии со специфическими потребностями пользователей. Так приложение становится более удобным для конкретного человека.
С теорией закончили. Если есть вопросы, задавайте в комментариях. О том, как внедрить адаптивный шрифт в свой продукт, расскажем в новом материале. Подписывайтесь на наш блог, чтобы не пропустить.
А пока можем порекомендовать текст наших коллег-дизайнеров из «Мой МТС». Ребята рассказывают, как выстраивают работу над инклюзивным интерфейсом в своих дизайн-процессах.
Спасибо!