Розробка кастомних шрифтів та типографіки мобільного додатку

Розробка кастомних шрифтів та типографики мобільного застосунку

Підключити кастомний шрифт у мобільне застосунок — звучить просто. Але до продакшену шлях проходить через ліцензування, правильний формат файлів, завантаження без затримок, Dynamic Type, fallback при помилці завантаження та читаємість на малих екранах. Кожна точка — окрема задача.

Ліцензування: найчастіший джерело проблем

Шрифт для десктопного сайту та шрифт для мобільного застосунку — різні ліцензії у більшості фаундрі. Google Fonts — безплатно для мобільних застосунків (OFL, Apache 2.0). Adobe Fonts через Creative Cloud — потребує перевірки ліцензії для app embedding. Комерційні шрифти типу Helvetica Neue, Gotham, Brandon Grotesque — потрібна окремої ліцензія на embedded use.

Порушення ліцензії — це не тільки юридичний ризик. App Store Review Team іноді відхиляє застосунки з нелікензованими шрифтами, якщо це виявляється. Перевіряємо ліцензію до початку роботи.

Формати та підготовка файлів

iOS приймає OTF та TTF. Android — TTF. React Native та Flutter — TTF/OTF.

Якщо шрифт поставляється тільки в одному начертанні, а дизайн використовує Regular, Medium, SemiBold, Bold — потрібні окремі файли для кожного ваги. Фейковий bold (system synthetic bold) на мобілі виглядає погано та може привести до reject на iOS.

Variable Fonts (.ttf з fvar таблицею) — прогресивний підхід: один файл покриває весь діапазон weight та width. iOS підтримує variable fonts з iOS 14, Android — з API 26. React Native — часткова підтримка через fontVariationSettings. Flutter — через FontVariation у TextStyle.

Оптимізація розміру: якщо використовуєте тільки латиницю та кирилицю — subsetting через pyftsubset (fonttools) убирає невживані глифи. Типовий Latin+Cyrillic subset з повного шрифту: з 800KB до 150KB.

Підключення на iOS

Шрифт додається в Bundle, реєструється в Info.plist під ключем UIAppFonts:

<key>UIAppFonts</key>
<array>
  <string>CustomFont-Regular.otf</string>
  <string>CustomFont-Bold.otf</string>
</array>

У SwiftUI використовується через .font(Font.custom("CustomFont-Regular", size: 16)). У UIKit — UIFont(name: "CustomFont-Regular", size: 16).

Типова помилка: ім'я шрифту в коді та Postscript Name файлу не збігаються. Перевіряємо через CTFontManagerCopyAvailableFontFamilyNames() або Font Book на macOS.

Dynamic Type на кастомному шрифті: UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont) — це масштабує кастомний шрифт пропорційно системним налаштуванням розміру. Без цього застосунок не пройде accessibility audit.

Підключення на Android

Шрифт кладеться в res/font/, використовується через XML або код:

val typeface = ResourcesCompat.getFont(context, R.font.custom_regular)
textView.typeface = typeface

У Compose:

val customFontFamily = FontFamily(
    Font(R.font.custom_regular, FontWeight.Normal),
    Font(R.font.custom_bold, FontWeight.Bold)
)
Text(text = "Hello", fontFamily = customFontFamily)

Downloadable Fonts через Google Fonts API — економить розмір APK, але потребує інтернету при першому запуску та fallback-шрифту на випадок недоступності мережі.

Типографічна шкала

Кастомний шрифт потрібно правильно «настроїти» у масштабі: підібрати line height, letter spacing, оптимальний size для кожного текстового стилю. Це не те, що робиться за годину — потрібно тестувати на реальних екранах різних розмірів та щільностей (iPhone SE vs iPhone 15 Pro Max, ldpi vs xxxhdpi на Android).

Мінімальний читаємий розмір на мобілі: 12pt/sp для Caption, 14pt/sp для Body Small. Нижче — тільки у дуже специфічних випадках.

Для дизайн-передачі: всі текстові стилі оформлюються у Figma як Text Styles з повною специфікацією, передаються розробнику через Figma Dev Mode з конкретними значеннями.

Вартість розраховується індивідуально після аналізу проекту.