Текст в приложениях должен быть не только красивым, но и понятным. Пользователи часто читают на ярком солнце, в спешке или при тусклом экране с низким зарядом — всё это сильно влияет на восприятие текста. Поэтому дизайнерам важно учитывать это при разработке интерфейсов для мобильных устройств.
Загляни в гайдлайны. Начни с изучения официальных руководств по дизайну для IOS и Android. Это поможет тебе понять, какие шрифты подходят для каждой платформы.
Не используй причудливые шрифты. Начертания букв основного текста должны быть в первую очередь чёткими и узнаваемыми. Необычные шрифты лучше использовать в заголовках или в акцентных элементах. Хорошие шрифты для основного текста из библиотеки Google Fonts: Open Sans, Montserrat, Rubik, Source Sans Pro, Spectral.
Размеры шрифта в мобильных приложениях
Читаемость — ключевой фактор при выборе шрифта для мобильных устройств. Учитывай размеры шрифтов в разных контекстах, чтобы обеспечить оптимальную читаемость на ограниченном пространстве экрана.
Размер основного шрифта установи в диапазоне от 14 px до 18 px
Распространённая ошибка — делать размер основного текста слишком мелким:
- WCAG (The Web Content Accessibility Guidelines) рекомендует 14 px как минимальный размер основного текста.
- Apple в своём руководстве Human Interface Guidelines рекомендует 17 px как минимальный размер основного текста.
- Google в руководстве Material Design рекомендует 16 px как минимальный размер основного текста.
Заголовки
Правильная организация информации в приложении важна для удобства пользователей, особенно когда они находятся в движении. Заголовки играют ключевую роль, позволяя быстро ориентироваться и находить нужную информацию.
Заголовки должны отличаться от основного текста. Чтобы добиться визуального контраста, можно использовать другое начертание или другой шрифт, с достаточно выраженными отличиями.
Если хочешь использовать для заголовков один шрифт, а для основного текста другой, осознанно подойди к выбору. Вот несколько правил, которые помогут подобрать шрифтовую пару:
- Только у одного шрифта могут быть необычные начертания. Для заголовков можешь использовать каллиграфию, экспериментальные шрифты, шрифты, сочетающие в себе очень тонкие горизонтальные и толстые вертикальные линии, шрифты с необычными выносными элементами. Но основной текст должен оставаться комфортным для продолжительного чтения.
- Шрифты должны дополнять друг друга. Шрифты должны гармонировать друг с другом. Идеально, если они имеют общие черты и заметные различия — например, один может быть с засечками, а другой без.
- Подбирай пару из одного суперсемейства шрифтов. Например: Roboto Slab для заголовков и Roboto для основного текста, Noto Serif и Noto Sans, PT Sans Narrow и PT Sans. Создатели этих шрифтов сразу делают их так, чтобы они хорошо сочетались друг с другом.
Длина заголовков
Убедись, что заголовки не превышают трех строк. Если это происходит, сократи их или уменьши размер шрифта — иначе чтение станет затруднительным.
Проверь, как шрифт будет выглядеть на экране телефона. Если используешь Figma для создания макетов, проверь свою работу сразу на телефоне с помощью Figma — prototype mirror share. Для этого нужно залогиниться в приложении, перейти во вкладку Mirror и выделить нужный экран внутри Figma.
Чем меньше разных стилей, тем выразительнее будут акценты в тексте. Определи необходимые кегли и зафиксируй их. Зачастую достаточно всего четырёх или пяти:
- Основные заголовки. Самый важный контент, который должен считываться первым.
- Второстепенные заголовки или подзаголовки. Например, заголовки для навигации внутри страниц.
- Основной текст. Повествовательные блоки, которые должны читаться максимально легко.
- Дополнения и сноски. Дополнительный текст, который может быть примерно на два размера меньше основного. Если человек не прочтёт эту информацию, он не упустит ничего важного.
- Можно добавить ещё один стиль, но не переусердствуй.
Чтобы быстро подобрать кегли для разных типов текста, воспользуйся формулами:
- Основной текст, или базовый, — 16 px.
- Ключевые фразы и акценты — 16 px × 1,2 ≈ 19 px.
- Подзаголовки — 19 px × 1,2 ≈ 23 px.
- Заголовки — 23 px × 1,2 ≈ 28 px.
- Дополнения и сноски — 16 px × 0,833 ≈ 13 px.
Контрастность шрифтов в мобильных приложениях
Контрастность текста и фона играет важную роль в обеспечении читаемости, особенно на мобильных устройствах. Хороший контраст помогает пользователям легко различать текст и фон, что особенно важно при чтении на маленьких экранах и в условиях различного освещения.
Параметры контрастности:
- Соотношение контрастности: Идеальное соотношение контрастности между текстом и фоном должно быть как минимум 4.5:1 для обычного текста и 3:1 для крупного текста (например, заголовков). Это соответствует рекомендациям WCAG (Web Content Accessibility Guidelines).
- Цвета: Чтобы достичь хорошего контраста, используйте цвета, которые сильно отличаются друг от друга. Например, черный текст на белом фоне или белый текст на темно-синем фоне обеспечивают высокий контраст.
Пример на цифрах:
- Черный текст (#000000) на белом фоне (#FFFFFF) имеет соотношение контрастности 21:1, что является идеальным для всех размеров текста.
- Темно- серый текст (#4F4F4F) на белом фоне (#FFFFFF) имеет соотношение контрастности около 8.2:1, что также хорошо подходит для обычного и крупного текста.
- Светло-серый текст (#808080) на белом фоне (#FFFFFF) имеет соотношение контрастности около 5:1, что подходит для крупного текста, но может быть недостаточно для мелкого текста.
Убедитесь, что цвет текста выглядит контрастно по отношению к фону. Чтобы это проверить, используй сайт WebAIM для проверки контраста. Важно также учитывать, что контрастность влияет не только на читаемость, но и на доступность контента для пользователей с нарушениями зрения. Поэтому при разработке мобильных приложений и веб-сайтов следует стремиться к созданию дизайна, который будет удобен для всех пользователей.
Выбери ограниченную палитру цветов и придерживайся её.
Это способствует узнаваемости бренда и упрощает восприятие информации в интерфейсе. Лишние цвета создают дополнительную нагрузку и вызывают путаницу. Придерживайся правила (60/30/10).
Текст на изображении должен легко читаться. Чтобы добиться этого, накладывайте на изображение полупрозрачные цветные плашки. Также можно попробовать менять свойство наложения цвета и добавить размытие.
Типографика — это искусство и наука организации текста для улучшения восприятия. В мобильных приложениях нужно создавать текст, который легко читается и соответствует стилю приложения. Каждый элемент, от шрифта до его цвета, имеет значение.