Какой шрифт используется в приложениях
Благодаря стремительному развитию Интернета в последнее десятилетие типографика в интерфейсах прошла основные этапы трансформации в цифровой мир. Но дизайн мобильных приложений – это все еще новая сфера.
В этой статье я не буду говорить об общих концепциях типографики, которые можно использовать как в печатной, так и в цифровой среде. Вместо этого я сосредоточусь на нюансах и хитростях, которые можно использовать в типографике дизайна мобильных приложений.
Поскольку разработка приложений очень тесно связана с функциями операционной системы, я часто буду ссылаться на отдельные рекомендации из руководства Material Design для Android и Human Interface Guidelines для iOS.
Минимальный размер шрифта
Не секрет, что мобильные приложения часто используются в дороге. Добавьте к этим ограничения, связанные с размером экрана, солнечными бликами, различными нарушениями зрения у пользователей, не всегда лучшее качество экрана смартфонов, и вы получите первое основное правило, определяющее минимальный размер основного текста.
Apple в своем руководстве Human Interface Guidelines рекомендует установить минимальный размер основного текста 17pt.
Google в руководстве Material Design рекомендует установить минимальный размер основного текста 16sp (равным 16pt в iOS).
Необходимо учитывать, что рекомендации от систем даются относительно шрифтов по умолчанию. В настоящее время это шрифт Roboto для Android и шрифты San Francisco и New York для iOS. Минимальный размер шрифта для других гарнитур может варьироваться в зависимости от их характеристик. Например, для шрифтов с очень тонкими штрихами требуется больший размер основного текста.
Кроме того, стандарты WCAG 2.0 рекомендуют использовать минимальный размер шрифта 18pt и 14pt для полужирного текста.
Исключением могут быть различные подписи меньшего размера. Но имейте в виду, что, если пользователь не может их прочитать, это не должно сильно влиять на понятность интерфейса.
Рекомендации
Не используйте размер шрифта менее 16pt для основного текста в дизайне приложения. Подходящим размером основного текста будет диапазон от 16pt до 18pt.
🤓 Совет
Чтобы сделать типографику iOS-приложения более доступной, вы можете применить динамические размеры шрифта. Использование этой технологии в вашем приложении позволит пользователям, которые в системных настройках установили увеличенный или уменьшенный размер шрифта, видеть интерфейс приложения в соответствии с этими настройками.
Размер заголовка
В последние годы в цифровой типографике стало очень популярным использовать большие заголовки. Они контрастируют на фоне основного текста и становятся якорными элементами на странице.
Но нужно быть очень осторожным при использовании больших заголовков в мобильных приложениях. Часто использование в мобильных приложениях заголовков большого размера приводит к тому, что заголовок растягивается на 3–4 строки с 1 или 2 словами в строке. Такие заголовки выглядят неаккуратно и их трудно читать.
Рекомендации
Выберите размер заголовка, контрастирующий с основным текстом и умещающийся в среднем на 2–3 строки.
🤓 Совет
В некоторых случаях вы можете использовать составные заголовки (eyebrow headline), чтобы сократить название.
Контраст
Также из особенностей использования мобильных приложений очень важными параметрами являются фон и контрастность текста.
Рекомендации
- Следуйте стандартам контрастности WCAG 2.0
- Убедитесь, что текст, который вы размещаете поверх изображений, достаточно контрастный.
- Предоставьте два варианта размещения текста на светлом и темном фоне.
🤓 Совет
Используйте плагин Stark (или другие аналогичные плагины) для Sketch, Adobe XD и Figma или инструменты онлайн-тестирования контрастности, чтобы проверить контраст текста.
Системные шрифты
В настоящее время для iOS можно использовать два системных шрифта: San Francisco и New York. А шрифт Roboto является системным шрифтом для Android.
Системные шрифты сделают дизайн вашего приложения более совместимым с операционной системой. Но использование только системных шрифтов не позволит вашему приложению получить уникальный вид.
Рекомендации
Самый простой и наиболее распространенный способ добавить акценты и сохранить уникальный вид типографики мобильного приложения – использовать системный шрифт для основного текста и различных элементов управления, а для заголовков использовать шрифт, отличный от шрифта по умолчанию. Такое сочетание всегда будет смотреться интересно и свежо.
Вы можете использовать один из сервисов, представленных ниже, чтобы выбрать интересные пары шрифтов.
🤓 Совет
Обратите внимание, что системные шрифты Apple можно использовать только в продуктах экосистемы Apple (iOS, macOS и т. д.). Шрифт Google Roboto можно использовать в любой операционной системе. Помните об этом при разработке одного приложения для обеих платформ.
Коммерческие шрифты
Рано или поздно многие дизайнеры обнаруживают, что системные или бесплатные шрифты не могут удовлетворить их потребности в конкретном проекте. И тогда перед ними стоит задача выбрать коммерческий шрифт. Обычно именно с выбором коммерческого шрифта связаны основные трудности.
Рекомендации
Если вы решили интегрировать кастомный шрифт в дизайн приложения, вам необходимо учесть следующее:
- Узнайте все нюансы лицензии. Условия распространения шрифтов могут сильно отличаться
- Изучите все технические нюансы шрифта, такие как читабельность при малых размерах.
- Подумайте, как ваш продукт будет масштабироваться в будущем. Например, может оказаться, что выбранный шрифт не поддерживает кириллицу.
- Узнайте, есть ли у шрифта достаточное количество весов или стилей.
🤓 Совет
Ищите шрифты для вашего приложения прямо на сайтах Type Foundries. Так вы сможете сэкономить на лицензии и найти более интересные стили.
Ниже в качестве примера я привожу несколько ссылок на мои любимые ресурсы.
Бесплатные шрифты
В настоящее время появляется все больше и больше хороших бесплатных шрифтов, не уступающих по качеству коммерческим. Если вы избирательно подходите к выбору бесплатного шрифта, вы можете уберечь проект от лишних расходов, не жертвуя качеством или уникальностью дизайна.
10 недооцененных бесплатных Google шрифтов без засечек В этой статье предлагаем вам тщательно отобранный список из 10 привлекательных, но мало используемых шрифтов без засечек, которые доступны бесплатно в Google FontsРекомендации
При выборе бесплатного шрифта нужно учитывать те же нюансы, что и при покупке коммерческого. 👆
Ниже в качестве примера я привожу несколько ссылок на мои любимые сайты бесплатных шрифтов.
Базовая линия
Часто можно наблюдать типичную ситуацию. Из-за разницы в рендеринге текста в инструментах дизайна и мобильных операционных системах поля между текстовыми блоками и другими элементами интерфейса могут визуально отличаться.
Чтобы этого не произошло, вы можете учитывать все поля относительно базовой линии. Такой подход позволит максимально совместить макеты и реализацию в приложении.
* В настоящее время Android не поддерживает методы полной поддержки интервалов относительно базовых линий.
Рекомендации
Скорее всего, использование базовой линии для всех текстовых элементов вашего интерфейса будет трудным и дорогостоящим в разработке. Поэтому я рекомендую использовать этот подход только для элементов, где особенно важна точность.
Пробелы и поля
Мобильные устройства имеют очень ограниченный размер экрана, поэтому вам нужно разместить как можно больше текста на одном видимом экране.
Для этого не нужно жертвовать пробелами, уменьшая поля между текстовыми блоками. Это нарушит иерархию между различными стилями текста и блоками, и затруднит чтение текста.
Рекомендации
Составьте макет так, чтобы часть содержимого находилась над сгибом, тем самым поощряя скроллинг и показывая пользователю, что доступно больше контента.
«Учите правила как профессионал, чтобы нарушать их, как художник» Пабло Пикассо
Рекомендации от дизайнеров развлекательной соцсети «Фотострана».
Считается, что в коммуникации главную роль играет текст, ведь именно он информирует пользователя и предоставляет ему нужный контент. Однако не стоит недооценивать важность типографики: хороший шрифт облегчает чтение, а плохой, наоборот, затрудняет восприятие текста.
Нет единого набора правил, которые были бы эффективны при выборе шрифта. Однако существует несколько закономерностей, которые помогут повысить удобство чтения в мобильных устройствах.
До запуска iOS 9 системным шрифтом iOS был Helvetica Neue, однако после выхода новой версии его заменили на San Francisco. Шрифт предлагается в двух начертаниях: Display (для использования в UI-элементах интерфейса и для текстов с большим кеглем) и Text (для объёмного текста меньшего размера).
В подсемействе Text расстояние между буквами больше, чем в Display. Апертуры этих текстовых шрифтов тоже шире, чтобы маленький кегль был более разборчивым. Одна из особенностей San Francisco заключается в том, что это динамический шрифт: он меняет начертание в зависимости от кегля. Система автоматически переключает шрифт на Display после того, как его размер превысит 20pt.
Android использует в качестве системного шрифта Roboto или, если язык его не поддерживает, Noto. Каждый из них представлен в кириллице.
Material Design, который применяется на Android-устройствах, предусматривает большие отступы между элементами, а также широкую вариацию кеглей для создания иерархии.
В iOS с этой целью, как правило, используют не размер шрифта, а его насыщенность. Если у Roboto только шесть её вариаций, то у San Francisco их 15: шесть для подсемейства Text и девять — для Display.
В своем приложении можно использовать любой шрифт формата True Type (.TTF), при этом следует уделить особое внимание приобретению лицензии. Даже если шрифт бесплатный, необходимо уточнить, требуется ли плата за его коммерческое использование. Лицензия также должна соответствовать изначальному запросу: шрифт, который был куплен для веб-интерфейса, нельзя использовать в мобильном приложении или в логотипе.
В приложении следует обходиться одной или двумя гарнитурами: одна — для основного текста, другая — для заголовков. Однако лучше установить в приложении единый шрифт. При использовании шрифта, отличного от системного, необходимо учесть его разборчивость, кегль, длину строки, межстрочное и межбуквенное расстояние.
Начертания букв должны быть четкими и узнаваемыми — только в этом случае они будут работать лучше в качестве элемента интерфейса. Многие шрифты без засечек, включая Helvetica, содержат неразборчивую заглавную букву I и строчную l, поэтому их не стоит выбирать для мобильных устройств.
В Helvetica почти невозможно разобрать первые три буквы, тогда как Source Sans Pro читать легко. Helvetica не подходит для работы с интерфейсами: шрифт создавался ещё в 1957 году и изначально не был предусмотрен для использования на небольших экранах. Именно поэтому Apple разработала San Francisco.
Размер шрифта влияет на читаемость элементов, особенно в больших блоках текста. Чтение текстов с маленьким кеглем займет у пользователя больше времени, поскольку в этом случае ему сложно будет найти начало и конец строки. В результате читатель будет намеренно пропускать большое количество информации.
Однако слишком крупный шрифт также неудобен. Из-за чересчур короткой строки мы вынуждаем читателя бегать глазами и тем самым сбиваем его ритм чтения. В таких условиях информацию воспринимать сложнее. Лучше использовать базовые параметры устройства, для которого создаётся дизайн. Для iOS это 17pt, для Android — 13sp.
При выборе базового размера шрифта нужно учесть количество контента и круг его потребителей. Если основная аудитория приложения — люди старше 50 лет, следует использовать более крупный кегль вроде 21px, ведь с возрастом зрение ухудшается.
Необходимо заранее определиться с иерархией контента, чтобы в соответствии с ней подбирать размеры шрифта. Если базовый шрифт — это 1em, то заголовок уровня H1 — 3em. Надписи и маленький текст будут на размер меньше базового кегля.
Оптимальная для комфортного чтения длина строки — 50-60 знаков с пробелами. Такой размер подходит для десктопных приложений, однако экраны мобильных устройств меньше, поэтому для них лучше использовать строки длиной в 30-40 знаков.
Размер шрифта важнее, чем длина строки, поэтому в первую очередь нужно выбрать правильный кегль.
- Чем меньше размер экрана, тем больше внимания стоит уделить межбуквенному расстоянию.
- Лучше добавить в текст «воздуха» и увеличить высоту строки так, чтобы она была пропорциональна базовому размеру шрифта (обычно она соответствует 120-150% от кегля основного текста) — так можно облегчить чтение. Для этого также пригодится система интервалов, которая нужна для определения размера разных элементов текста. Если в кегле используется золотое сечение, то оно должно быть и в интервалах. Так дизайн будет выглядеть аккуратно и гармонично.
- Следует обращать внимание на пробелы между абзацами: это дополнительное пространство служит опорной точкой для глаза и создаёт ощущение, что текст не слишком плотный и его легко читать.
- При организации композиции экрана нужно помнить о «законе близости»: расположенные рядом объекты воспринимаются как единая группа. И наоборот: однородные элементы, между которыми есть интервал, не будут считаться одним целым.
Контраст особенно важен в дизайне мобильного приложения, потому что при использовании на улице экран сильно отсвечивает. Среди дизайнеров распространены два неверных представления о цветовом контрасте:
- Чем сильнее контраст, тем сложнее глазам. Поэтому серый оттенок текста лучше. В итоге получается серый текст на сером или белом фоне. Однако если цвет текста и фона похожи, то восприятие затрудняется.
- Чем сильнее контраст, тем лучше. Текст, который сильно контрастирует с фоном, также сложен для восприятия. Чтение белого текста на черном фоне быстро утомляет глаза. Даже пользователи с хорошим зрением будут испытывать дискомфорт.
Подобрать нужный контраст непросто. Тот, что кажется удачным на мониторе разработчика, может быть плохо виден на экране пользователя. Избежать ошибок поможет руководство от W3.
Минимальный коэффициент контраста для шрифтовых блоков — 4,5:1, рекомендуемый — 7:1. Но из этого правила есть исключения:
- Крупный текст (18 кегль и выше или 14 кегль в полужирном начертании) — 3:1.
- Текст, который выступает частью неактивного элемента интерфейса, не требует контрастности.
Обеспечить достаточную контрастность текста поможет сервис Color Contrast Checker.
Выбранный шрифт нужно проверить среди пользователей, на устройствах с экранами разной ширины. Чем больше устройств включено в тестирование, тем лучше.
Как визуальное представление языка, основная задача типографии — передавать информацию. Стиль шрифтов никогда не должен затмевать эту цель. В этой статье мы обсудим, как использовать шрифтовое оформление в вашем приложении Windows, чтобы помочь пользователям легко понимать содержимое.
Шрифт
в пользовательском интерфейсе приложения следует использовать один шрифт, и мы рекомендуем придерживаться шрифта по умолчанию для Windows приложений, Segoe UI переменную. Он создан для обеспечения оптимальной четкости для любых размеров и любой плотности пикселей, а также отличается четкой, легкой и открытой эстетикой, которая дополняет содержимое системы.
Сведения об отображениях текста на языках, отличных от английского, или выборе другого шрифта для приложения см. в разделах Языки и Шрифты, в которых описываются шрифты, рекомендованные для приложений Windows.
Выберите один шрифт пользовательского интерфейса.
Не используйте несколько шрифтов сразу.
Переменные Шрифтовые оси
Шрифт переменной Segoe UI содержит две оси для более точного управления текстом. Этот шрифт имеет весовую ось ( wght ) со плотностью от тонкого (100) до полужирного (700). Он также имеет ось оптического размера ( opsz ) для оптического масштабирования от 8 пт до 36pt. При использовании общих элементов управления XAML для поддерживаемых языковпо умолчанию выбирается шрифтовая переменная Segoe UI. Если используется этот шрифт или другой переменный шрифт с оптической осью, то оптический размер автоматически будет соответствовать запрошенному размеру шрифта. При использовании HTML оптическое масштабирование также выполняется автоматически, но в CSS необходимо указать шрифт переменной Segoe UI.
Размер и масштабирование
Размеры шрифтов в приложениях UWP масштабируются автоматически на всех устройствах. Алгоритм масштабирования позволяет добиться того, что шрифт размером 24 пикселя на Surface Hub, который располагается на расстоянии трех метров от пользователя, будет таким же читаемым, как и шрифт аналогичного размера, отображаемый на телефоне с диагональю экрана 5 дюймов, который располагается на расстоянии нескольких сантиметров от пользователя.
В силу особенностей работы системы масштабирования вы работаете с эффективными пикселями, а не физическими пикселями, и вам не следует изменять размер шрифта для различных размеров и разрешений экрана.
Соблюдайте размеры набора шрифтов Windows.
Используйте размер шрифта меньше 12 точек.
Иерархия
Пользователи полагаются на визуальную иерархию при просмотре страницы, когда заголовки представляют сводку содержимого, а основной текст содержит более подробные сведения. Чтобы создать четкую визуальную иерархию в приложении, используйте набор шрифтов Windows.
Набор шрифтов
Набор шрифтов Windows определяет важные отношения между начертаниями шрифтов на странице, помогая пользователям легко читать содержимое. Все размеры указываются в эффективных пикселях и оптимизированы для приложений UWP, работающих на всех устройствах.
Дополнительные сведения см. в руководстве по использованию увеличения типа XAML .
Соответствие
Значение TextAlignment по умолчанию — "Left", и в большинстве случаев такой подход, в котором содержимое сдвинуто влево и не выравнивается по правому краю, обеспечивает согласованную привязку содержимого и универсальный макет. Сведения о языках RTL см. в разделе Настройка макета и шрифтов для поддержки глобализации.
Количество символов
Для простоты чтения в строке должно быть не более 50–60 символов.
Используйте не менее 20 60 символов в строке, так как это трудно прочесть.
Обрезка и многоточия
Если объем текста выходит за пределы доступного места, рекомендуется обрезать текст и вставить многоточия [. ], что является поведением по умолчанию большинства текстовых элементов управления UWP.
Настройте обрезку текста и его перенос, если включено несколько строк.
Используйте многоточия во избежание визуальной помехи.
Если контейнеры не определены точно (например, не указан отличающий цвет фона) или доступна ссылка для просмотра всего текста, используйте многоточия.
Языки
Segoe UI переменная — наш шрифт для английского, европейских языков, греческого и русского. Для других языков см. следующие рекомендации.
Шрифты для глобализации и локализации
Используйте API сопоставления шрифтов LanguageFont для программного доступа к рекомендуемому семейству, размеру, насыщенности и стилю шрифта определенного языка. Объект LanguageFont предоставляет доступ к нужной информации о шрифте для различных категорий содержимого, включая заголовки, уведомления, текст и шрифты доступных для редактирования текстов пользовательского интерфейса. Дополнительные сведения см. в разделе Настройка макета и шрифтов для поддержки глобализации.
Шрифты для языков, не использующих латинский алфавит
Семейство шрифтов | Стили | Примечания |
---|---|---|
Ebrima | Обычный, полужирный | Шрифт пользовательского интерфейса для скриптов "африканского уровня" (Адлам, эфиопского, Н'ко, Османя, тифинаг, Вай). |
Gadugi | Обычный, полужирный | Шрифт пользовательского интерфейса для сценариев Северной Америки (Канадское слоговое письмо, чероки, Осаже). |
Leelawadee UI |
Fonts
Рубленые шрифты (без засечек)
Рубленые шрифты хорошо подходят для заголовков и элементов пользовательского интерфейса.
Семейство шрифтов | Стили | Примечания |
---|---|---|
Arial | Обычный, курсив, полужирный, полужирный курсив, черный | Поддерживает европейские и средние наборы символов (латиница, Греческий, кириллица, арабский, армянский и иврит). Черный вес поддерживает только европейские сценарии. |
Calibri | Обычный, курсив, полужирный, полужирный курсив, светлый, светлый курсив | Поддерживаются наборы знаков для европейских и ближневосточных языков (латинский, греческий, кириллический, арабский и иврит). Арабские символы доступны только в вертикальном написании. |
Consolas | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины, поддерживающий наборы знаков для европейских языков (латинский, греческий и кириллический). |
Segoe UI | Обычный, курсив, светлый курсив, черный курсив, полужирный, полужирный курсив, светлый, полусветлый, плотный, черный | Шрифт пользовательского интерфейса для набора знаков европейских и ближневосточных языков (арабский, армянский, кириллический, грузинский, греческий, иврит и латинский), а также набора знаков письма Лису. |
Selawik | Обычный, полусветлый, светлый, полужирный, плотный | Шрифт с открытым исходным кодом, совместимый с Segoe UI, предназначенный для приложений на других платформах, которые не хотят объединять Segoe UI. Получите Селавик на GitHub. |
Шрифты с засечками
Шрифты с засечками хорошо подходят для представления больших объемов текста.
Семейство шрифтов | Стили | Примечания |
---|---|---|
Cambria | Обычный | Шрифт с засечками, поддерживающий наборы знаков для европейских языков (латинский, греческий, кириллический). |
Courier New | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины с засечками, поддерживающий европейские и средние наборы символов (латиница, Греческий, кириллица, арабский, армянский и иврит). |
Грузия | Обычный, курсив, полужирный, полужирный курсив | Поддерживаются наборы знаков европейских языков (латинский, греческий и кириллический). |
Times New Roman | Обычный, курсив, полужирный, полужирный курсив | Устаревший шрифт, поддерживающий наборы знаков для европейских языков (латинский, греческий, кириллический, арабский, армянский, иврит). |
Переменные шрифты
Переменные шрифты хорошо подходят для точного управления внешним видом текста.
В этой статье Magora Systems не будет писать о кеглях, цветах, контрастности и сочетаемости. Компания рассказывает о правилах, ограничениях и лицензиях на использование шрифтов в web, десктопных и мобильных приложениях.
Сайты и веб-приложения
Шрифты состоят из глифов – векторных форм каждой буквы или символа.
Веб-шрифты поставляются в 4 форматах: EOT, TTF, WOFF и WOFF2. Ни один из них не поддерживается всеми браузерами, поэтому в проект добавляют сразу несколько файлов.
Найти их в инете – не проблема. Например, шрифты Google Fonts – полностью бесплатны. Adobe TypeKit тоже предлагает платные и бесплатные опции для сайтов. Подключаются к проекту они копи-пастом 1 строчки кода.
Мобильные приложения
Здесь все не так просто. В мобильных операционках есть системные шрифты. Они используются для любого текста по умолчанию.
До 9 версии системным шрифтом iOS была Helvetica Neue, а затем ее сменил San Francisco (начертание Display – для заголовков, Text – для основного текста).
Дефолтный шрифт Android – Roboto, если его нет в каком-то языке – заменяется на Noto Sans.
Получается, что можно:
- Оставить системные шрифты (ничего делать не надо);
- Добавить свой шрифт в приложение (платный или бесплатный в формате True Type (.TTF)).
Важно проверить лицензию – некоторые шрифты бесплатны для веба, но не для мобильных или десктопных приложений. Подробнее об ограничениях – здесь.
При выборе обращают внимание на разборчивость, кегль, длину строки, межстрочные и межбуквенные расстояния… Но это уже тема для отдельной статьи.
Кастомные шрифты
Пока стартапы обходятся open source решениями, крупные компании увлекаются кастомными шрифтами. Корпорации заказывают их своим или сторонним дизайнерам, умеющим разрабатывать типографику, и получают в собственность. Большие бренды хотят индивидуальности, но еще больше – сэкономить сотни тысяч долларов, которые раньше уходили на покупку лицензиии. А все потому, что для веба стоимость пропорциональна трафику, чем больше пользователей – тем дороже. Поэтому компании IBM, General Electric, Intel, Coca Cola уже сделали свои шрифты.
Недавно и команда Netflix разработала простенький Netflix Sans именно для того, чтобы сократить расходы.
Резюмируем
Стартапам – смело использовать системные или бесплатные веб-шрифты. Google Fonts в помощь. Тем более, уникальная палитра, фотографии, иллюстрации, анимации обычно запоминаются сильнее, чем типографика.
Кастомный шрифт – круто, но пригодится только известным брендам и популярным платформам. Разработка обойдется недешево, но в долгосрочной перспективе сэкономит кучу денег тем, у кого много трафика. А если у вас 342 пользователя – вложитесь лучше в маркетинг.
Читайте также: