Как добавить шрифт в приложение vn

Обновлено: 08.01.2025

Рекомендации от дизайнеров развлекательной соцсети «Фотострана».

Считается, что в коммуникации главную роль играет текст, ведь именно он информирует пользователя и предоставляет ему нужный контент. Однако не стоит недооценивать важность типографики: хороший шрифт облегчает чтение, а плохой, наоборот, затрудняет восприятие текста.

Нет единого набора правил, которые были бы эффективны при выборе шрифта. Однако существует несколько закономерностей, которые помогут повысить удобство чтения в мобильных устройствах.

До запуска 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.

Выбранный шрифт нужно проверить среди пользователей, на устройствах с экранами разной ширины. Чем больше устройств включено в тестирование, тем лучше.

Без красивых шрифтов на iPad не обойтись

Где взять шрифты для iPhone и iPad

Следует сказать, что многие знакомые нам шрифты, доступные на iPhone и iPad, уже идут «из коробки» вместе с iOS и iPadOS. Аналоги их также представлены на компьютерах Mac. Некоторые шрифты легко доустанавливаются в систему вместе с соответствующими программами. Например, получить заветные Cambria и Calibri, так хорошо знакомые пользователям Windows, можно, установив Microsoft Office на яблочные гаджеты. Начиная с iOS 13 и iPadOS 13, Apple позволила устанавливать пользователям кастомные шрифты для применения их в поддерживаемых приложениях.

Font Diner предлагает пакеты шрифтов на основе годовой подписки

Но что делать, если пользователю для определенных целей нужен какой-то конкретный шрифт, который ни одно из приложений в App Store не предлагает? И, допустим, этот шрифт уже скачан на устройство. Как установить его в систему и воспользоваться? Об этом и поговорим в этой статье.

Где посмотреть, какие шрифты установлены на iPad и iPhone

Для того, чтобы посмотреть какие шрифты уже установлены на iPad и iPhone, нужно перейти в “Настройки”→”Основные”→”Шрифты”.

Находим шрифты в настройках на iPad

В открывшемся окне настроек можно увидеть установленные в систему шрифты от сторонних разработчиков. У меня, например, на момент начала написания этой статьи было установлено два сторонних шрифта, предназначенных для работы с текстом, которым писались книги до реформы грамматики русского языка в начале ХХ века. Иногда мне приходится работать с нестандартными начертаниями символов, и в этой статье я покажу, как можно установить любой такой экзотический шрифт.

Установленные на моем гаджете шрифты

Если тапнуть по имени шрифта, то система отобразит название шрифта, приложение, с помощью которого он был установлен, и авторские права. Ниже будет указано название гарнитуры. При нажатии на этом названии откроется экран с начертанием всех символов, входящих в этот шрифт. Информация будет представлена на трех экранах, проматываемых свайпом влево и вправо, а на втором из них будет пресловутое “Lorem ipsum dolor sit amet…” и далее по тексту.

Какие приложения на iPad и iPhone поддерживают пользовательские шрифты

На сегодняшний день шрифты от сторонних разработчиков отлично поддерживаются во встроенном e-mail клиенте iOS и iPadOS (Mail.app), а также в почтовике Spark, в текстовых редакторах Pages и MS Word, в презентациях Keynote, электронных таблицах Numbers. Перечень приложений, скорее всего, со временем будет расширяться. Главное, чтобы разработчики добавляли эту возможность.

Как установить собственный шрифт на iPad и iPhone

Предположим, у нас есть собственный шрифт, который мы хотим использовать на нашем яблочном гаджете. Для установки его в систему нам понадобится приложение AnyFont, которое легко установить из AppStore. Приложение платное. Стоит оно 149 р. Однако поверьте, это очень небольшая цена за очень необходимую функциональность.

Окно приложения AnyFont представляет собой файловый менеджер шрифтов. Внизу есть две вкладки: “Собственные шрифты”, в которой отображаются установленные в программу шрифты самим пользователем, и “Доступные шрифты”, в которой отображаются все шрифты, установленные в операционной системе гаджета. При тапе на названии шрифта во вкладке “Доступные шрифты” отобразится полная информация о выбранном шрифте. При тапе по названию шрифта во вкладке “Собственные шрифты” выскочит окошко с кнопкой “Install”, что означает “Установить”, а также четырьмя кнопками вверху этого окошка, позволяющими поделиться шрифтом, переместить его в созданную пользователем папку внутри самого приложения AnyFont, просмотреть начертание символов в выбранном шрифте и вывести подробную информацию о нем.

Интерфейс приложения AnyFont

В верхней части окна приложения AnyFont также расположены четыре кнопки, предназначенные для управления собственными шрифтами пользователя. Первая открывает команды для удаления, перемещения и экспорта шрифтов. Вторая позволяет добавить источник шрифтов. Третья предназначена для создания папки пользователя внутри приложения. Это может оказаться полезным для сортировки шрифтов. А четвертая выводит информацию о версии приложения AnyFont.

Далее выскочит стандартное меню операционной системы, но в нем не будет среди представленных в верхнем ряду иконок приложений нашей программы AnyFont. Для того, чтобы добраться до нее, нужно тапнуть кнопку “Еще” с тремя точками. Откроется дополнительный перечень программ, из которого и нужно выбрать “Скопировать в AnyFont”.

AnyFont доступна в дополнительном перечне совместимых приложений

После выбора команды “Скопировать в AnyFont” откроется искомое приложение, и в нем на вкладке “Собственные шрифты” появится добавленный из приложения Файлы шрифт. Остается лишь установить его. Для этого тапаем по названию шрифта. Выскакивает окошко с зеленой кнопкой “Install”.

Разрешаем загрузку профиля конфигурации

Приложение выведет информацию о том, что профиль загружен, но его нужно установить в настройках. Далее AnyFont предлагает перейти в настройки для завершения установки профиля. Переходим в “Настройки”→“Основные”→“Профили”.

Заходим в настройки профилей

В открывшемся окне верхним пунктом будет загруженный профиль. Он нам как раз и нужен. А ниже будут отображаться уже установленные профили конфигурации. Тапаем по имени загруженного профиля и в открывшемся окне в верхнем правом углу тапаем синюю надпись “Установить”.

Устанавливаем выбранный профиль

Подтверждаем наше желание установить профиль шрифта

Так новый шрифт выглядит в Pages

Вот такая, надеюсь, простая и доступная инструкция поможет добавить любой TrueType шрифт для комфортной работы на iPad и iPhone. А вам приходится использовать нестандартные шрифты на своих гаджетах? Делитесь своим опытом в комментариях и в нашем Telegram-чате.

Ранее мы писали о том, Google добавили в Android поддержку шрифтов из своего каталога Google Fonts. В этой статье мы подробно рассмотрим, как можно это реализовать в своём приложении.

Благодаря Google Fonts вы можете использовать тысячи самых разных шрифтов в своих приложениях. Более того, эта возможность теперь распространяется не только на Android O (API 26), но также на все устройства, начиная с API 14, благодаря использованию библиотеки поддержки.

Использование загружаемых шрифтов несёт в себе следующие преимущества:

уменьшение размера APK (вам не нужно включать в проект .ttf файлы со шрифтами);
приложение на устройстве пользователя могут совместно использовать шрифты из одного источника, не раздувая хранилище избыточными файлами.

Благодаря встроенной поддержке шрифтов, особенно подчёркивается второй пункт. Например, ниже представлена схема, по которой разные приложения могут пользоваться общими шрифтами.

По этой схеме можно увидеть, что приложения, запрашивающие шрифты, обращаются к одному поставщику, указав контракт на шрифт. Поэтому если одно приложение уже запросило шрифт, другие приложения не будут запускать загрузку и сразу получат шрифт из кеша.

Такая схема необходима, чтобы система не вносила вредоносного кода в файлы.

В приложении Фонарик используется таймер со специальным шрифтом, который хранится в папке assets проекта. Чтобы уменьшить размер APK файла, перепишем приложение, используя загружаемые шрифты.

Добавить загружаемые шрифты в своё приложение можно двумя способами.

Через Android Studio

Откроется окно со списком всех шрифтов, доступных в Google Fonts, где можно выбрать любой понравившийся. Выберем шрифт Orbitron и нажмём ОК. Важно здесь выбрать именно Create downloable font, поскольку Add font to project просто добавит шрифт в проект, что противоречит текущей цели.

После этого Android Studio сама создаст необходимые файлы. В папке res/font будет создан файл orbitron.xml, в папке res/values файлы preloaded_fonts.xml и font_certs.xml.

orbitron.xml

Этот файл содержит определения для Android о семействе шрифтов. Как вы можете видеть, в нём перечислены fontProvider, fontProviderCerts, которые были автоматически созданы в Android Studio.

preloaded_fonts.xml

Android Studio создаёт этот файл, чтобы помочь предварительно загрузить шрифты. Это нужно, чтобы избежать задержки, когда шрифт не отображается при старте приложения. Рендеринг картинки является синхронным процессом, поэтому первый рендер может занять некоторое время, пока Android загружает шрифт. Объявление этого файла в манифесте нужно для того, чтобы приложение получило шрифт в начале работы, до отрисовки экрана.

Android Studio сама добавляет в манифест метатег, содержащий путь до файла preloaded_fonts.xml.

font_certs.xml

Этот файл содержит огромные зашифрованные сертификаты, которые проверяют шрифты.

Теперь мы может просто указать в разметке у любого виджета свой шрифт в атрибуте fontFamily и увидеть результат.

Здесь новый шрифт используется только у одного виджета. Если вы хотите поменять шрифт всего приложения, вам нужно перейти в styles.xml и добавить его в тему вашего приложения.

Как использовать загружаемые шрифты на старых устройствах?

Для этого вам нужно добавить библиотеку поддержки в файл build.gradle модуля приложения.

Кроме того, библиотека поддержка была перенесена в maven репозиторий Google, поэтому вам больше не нужен SDK Manager для загрузки библиотеки. Чтобы добавить maven репозиторий Google, добавьте следующую строку в repositories файла build.gradle модуля проекта.

Программное добавление загружаемых шрифтов

Чтобы добавить шрифт программно, нам понадобятся два класса:

для создания запроса на получение шрифта для создания объекта Typeface после получения результата запроса шрифта

Приложение будет извлекать шрифты из провайдера с помощью API FontsContract. У каждого провайдера есть свой собственный набор ограничений на версии Android и язык запросов, который он поддерживает.

Итак, для начала создадим экземпляр класса FontRequest.

В параметрах указываются:

Владелец провайдера шрифтов
Пакет провайдера шрифтов для проверки личности провайдера
Строка запроса шрифта. О том, как формируется запрос, мы писали здесь.
Список сертификатов. Необязателен, если вы запрашиваете шрифты из предустановленных провайдеров, однако необходим, если используется библиотека поддержки.

Теперь достаточно вызвать метод FontsContract.requestFont(), чтобы получить шрифт. Этот метод проверит, находится ли шрифт в кеше. Если его там нет, то он обращается к провайдеру шрифтов, чтобы извлечь шрифт и передать в callback.

Как только FontRequestCallback получает объект Typeface, он устанавливает его в нужный виджет. Это наглядно можно увидеть на GIF ниже.

Вот и всё! Теперь с помощью загружаемых шрифтов вы можете использовать огромный ассортимент самых разных шрифтов и при этом не увеличивать размер вашего APK файла.

Выбор хорошего шрифта имеет решающее значение для UI/UX-дизайнеров при создании успешного мобильного приложения по следующим причинам:

Хороший шрифт обеспечивает читабельность и разборчивость. Текст помогает пользователям интуитивно понимать контент и эффективно взаимодействовать с приложением. Четкий и аккуратный шрифт упрощает использование и повышает производительность мобильных страниц.
Чтобы выделиться среди конкурентов, важно произвести достойное первое впечатление. Можно персонализировать логотип и активно производить впечатление на аудиторию.
Правильно подобранный шрифт оказывает непосредственное влияние на ваши мобильные приложения и помогает легко улучшить жизнь пользователя – командам разработчиков следует уделять достаточно внимания данному вопросу.

А теперь перейдем непосредственно к виновникам торжества.

Roboto (бесплатный шрифт Google для Android)

Roboto

Цена: Бесплатно

Формат: TTF

Это нео-гротескное семейство шрифтов без засечек, отличающееся приятными и открытыми кривыми. Google разработала его в качестве одного из основных системных шрифтов для своей ОС. Он быстро запал в душу и стал популярным в наши дни, поэтому рассматривайте данный вариант в качестве основного для разработки.

San Francisco (Бесплатный шрифт для iOS)

San Francisco

Цена: Бесплатно

Еще одно нео-гротескное семейство шрифтов без засечек, которое может помочь вам создать удобное и так полюбившееся яблоководам визуальное представление макета. Поскольку ребята из Apple выбрали его в качестве системного шрифта для своих iOS-устройств, вы не промахнетесь в выборе. Семейство лучше всего подходит для логотипов и брендирования.

Open Sans (Бесплатный шрифт Google)

Open Sans

Цена: Бесплатно

Формат: TTF

Это известный шрифт без засечек, разработанный Стивеном Меттисоном. Он отличается нейтральными формами, дружелюбным внешним видом, и считается вторым по популярности шрифтом Google. Идеально подойдет для использования как в приложениях Android, так и iOS.

Lato (Бесплатный шрифт Google)

Lato

Цена: Бесплатно

Формат: TTF

Разработанное Дзедзицем Лукашем семейство шрифтов без засечек обладает полукруглыми деталями на буквах, а структура обеспечивает стабильность и серьезность. Отличный вариант, как для личного, так и для коммерческого использования.

Montserrat (Бесплатный шрифт Google)

Montserrat

Цена: Бесплатно

Формат: TTF

Montserrat – это знаменитый шрифт Google в стиле ретро. Он имеет два родственных семейства шрифтов с похожим стилем: Alternates и Subrayada. Если вы ищете шрифты для создания ретро-приложений – выбирайте этот вариант, он будет очень кстати.

Proxima Nova

Цена: Бесплатно

Формат: TTF , OTF

Proxima Nova – шрифт без засечек с 48 стилями. Это полная реконструкция Proxima Sans 1994 года, устраняющая разрыв между такими шрифтами, как Futura и Akzidenz Grotesk, а также замена Helvetica в качестве одного из самых популярных шрифтов для мобильных устройств .

Nexa

Цена: Бесплатно

Формат: TTF , OTF

Это простое и современное семейство шрифтов включает в себя 16 уникальных стилей. Они будут хорошо смотреться в заголовках, текстовых блоках и страницах с четкой компоновкой.

Ubuntu

Цена: Бесплатно

Формат: TTF

Семейство Ubuntu – это набор libre/open шрифтов, поддерживаемое широким сообществом Open Source и проекта Ubuntu.

Область применения – языки, используемые юзерами Ubuntu по всему миру в соответствии с философией, которая гласит, что каждый пользователь должен иметь возможность использовать свое программное обеспечение на выбранном им языке.

Nunito

Цена: Бесплатно

Формат: TTF

Nunito – это хорошо сбалансированный шрифт без засечек с закругленными краями, который был разработан в основном для использования в качестве “экранного”, но он также может применяться и в качестве текстового шрифта. Отлично смотрится в браузерах, на десктопах, ноутбуках и мобильных устройствах.

Source Sans Pro

Цена: Бесплатно

Формат: TTF

Source Sans Pro известно как первое семейство шрифтов с открытым исходным кодом от Adobe, и предоставляет пользователям шесть шрифтов в вертикальном и курсивном стилях. Это хороший вариант, чтобы помочь вам создать более приятные тексты для чтения ваших мобильных приложений.

Шрифты влияют на многие аспекты ваших мобильных приложений, и их никогда нельзя игнорировать.

Библиотека программиста надеется, что лучшие бесплатные примеры шрифтов, упомянутые выше, помогут легко создавать удобные UX -приложения. Если вы не найдете интересных вариантов в этой подборке, не отчаивайтесь – ссылки в каждом пункте, несомненно, помогут быстро выбрать правильный шрифт. Удачи!

Читайте также: