При работе с типографикой на мобильных устройствах важно помнить, что пользователь может читать текст при разных условиях. Например, на улице, когда ярко светит солнце, находясь в движении или вовсе с приглушенной яркостью экрана. Эти факторы, а также небольшой размер экрана оказывают влияние на восприятие текста.
На что обратить внимание при работе с текстом для мобильных приложений или адаптивной верстки🔽
Не забывайте про официальные руководства по дизайну для конкретной платформы. Поэтому для начала следует изучить соответствующие разделы гайдлайнов для IOS и Android.
📌Используйте достаточно крупный шрифт основного текста (от 14 до 17 пунктов) для комфортного чтения без необходимости увеличивать текст. Помните, что размер подбирается индивидуально под каждый выбранный шрифт, потому что один и тот же кегль у разных шрифтов будет иметь разную высоту.
📌Избегайте слишком тонких начертаний шрифтов — Thin, ExtraLight, Light. Они трудно различимы на мобильных устройствах.
📌Поддерживайте хорошую контрастность между текстом и фоном. Общие рекомендуемые значения контрастности: для основного текста не менее, чем 7:1 и 4,5:1 для заголовков или крупного текста. Чтобы проверить контрастность, воспользуйтесь онлайн-сервисами, например, Webaim.
📌Избегайте использования сложных декоративных шрифтов или множества разных стилей.
📌Разбивайте текст на короткие абзацы по 4-6 предложений. Для улучшения логического восприятия информации используйте отступы. Поддерживайте визуальную иерархию с помощью выделения размера, цвета, начертания шрифта. Значимые элементы текста оформляйте большим размером, контрастным или акцентным цветом, менее важные элементы оставьте в нейтральном стиле.
📌Используйте жирное начертание шрифта для выделения ключевых слов или фраз, например, для обозначения терминов или заголовков.
📌Используйте выравнивание по левому краю для основного текста. Ровный край делает текст аккуратнее и проще для чтения. Для оформления небольших объемов текста в 2–3 строки можно использовать выравнивание по центру.
📌Проверяйте, как текст отображается на различных мобильных устройствах. Убедитесь, что он выглядит четко и легко читается на самых распространенных размерах экранов.
Соблюдение правил типографики на мобильных устройствах помогает улучшить пользовательский опыт, повысить эстетическое восприятие контента и повысить его эффективность и конверсию.
Источники:
— Простые правила мобильной типографики
— Справочное руководство по типографике в мобильном веб‑дизайне
— Contrast Checker
— Самый полный гайд по контрастности в интерфейсах
— Мобильная типографика
— 15 лучших практик по типографике в мобильном дизайне
— Webaim