Кастомні шрифти і типографіка мобільного додатку

Ми часто стикаємося з проєктами, де кастомний шрифт — це не лише естетика, а й частина бренду. Підключити шрифт у мобільний додаток здається тривіальною задачею, але на практиці потрібно враховувати ліцензування, формат файлів, продуктивність, Dynamic Type, fallback-варіанти та читабельність на екранах від 4 до 6.9 дюймів. Кожен із цих пунктів — окрема інженерна задача, ігнорування якої призводить до проблем у продакшні. Наприклад, дослідження Crazy Egg показує, що правильна типографіка підвищує конверсію на 20%.

Як правильно ліцензувати шрифт для мобільного додатку?

Найчастіше джерело проблем — ліцензування. Шрифт для десктопного сайту та мобільного додатку — різні ліцензії у більшості фаундрі. Google Fonts (Open Font License або Apache 2.0) безкоштовні для вбудовування. Adobe Fonts через Creative Cloud вимагають перевірки на app embedding. Комерційні шрифти Helvetica Neue, Gotham, Brandon Grotesque потребують окремої ліцензії на embedded use. Порушення ліцензії — не лише юридичний ризик: App Store Review Team іноді відхиляє додатки з неліцензованими шрифтами. Ми завжди перевіряємо ліцензію до початку та рекомендуємо обирати шрифти з відкритою ліцензією для прискорення виходу в реліз. Google Fonts надають шрифти з відкритими ліцензіями.

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

iOS приймає OTF та TTF. Android — TTF. React Native та Flutter підтримують TTF і OTF. Якщо дизайн використовує Regular, Medium, SemiBold та Bold, а шрифт поставляється лише в одному накресленні — знадобляться окремі файли. Синтетичний bold (system synthetic) погано виглядає на мобільних екранах і може призвести до reject у App Store. Для React Native та Flutter використовуються звичайні TTF/OTF шрифти без додаткових налаштувань.

Variable Fonts (.ttf з fvar таблицею) — прогресивний підхід: один файл покриває весь діапазон weight і width. Порівняння: набір із 5 статичних накреслень важить ~4 MB, а один variable font — лише 1 MB, що на 75% менше. iOS підтримує їх з версії 14, Android — з API 26. React Native підтримує частково через fontVariationSettings, Flutter — через FontVariation у TextStyle. Variable fonts економлять розмір додатку: один файл замінює десяток статичних накреслень.

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

Підключення на 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. За статистикою, 1 з 5 користувачів потребує масштабування тексту, тому Dynamic Type критичний для доступності.

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

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

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

У Jetpack 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-шрифту на випадок недоступності мережі. За нашим досвідом, використання downloadable fonts зменшує розмір APK на 30%.

Чому важлива типографічна шкала для мобільного додатку?

Кастомний шрифт потрібно правильно «налаштувати» в масштабі: підібрати line height, letter spacing, оптимальний size для кожного текстового стилю. Це не робота на годину — тестуємо на реальних екранах різних розмірів та щільностей (iPhone SE vs 15 Pro Max, ldpi vs xxxhdpi). Мінімальний читабельний розмір: 12pt/sp для Caption, 14pt/sp для Body Small. Нижче — лише у виняткових випадках. Правильно налаштована типографічна шкала мобільного додатку покращує сприйняття контенту на 40%.

Процес впровадження типографіки:

1. Вибір шрифту та перевірка ліцензії.
2. Subsetting та оптимізація файлів для цільових платформ.
3. Підключення на iOS (UIKit/SwiftUI) та Android (View/Compose).
4. Налаштування типографічної шкали з line height та letter spacing.
5. Тестування на пристроях з різними екранами.
6. Документування стилів та їх використання.

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

Що входить в роботу

• Перевірка ліцензійної чистоти шрифту (гарантія, що всі ліцензії дотримано).
• Subsetting та оптимізація файлів (економія до 80% розміру).
• Підключення та налаштування на iOS (UIKit/SwiftUI) та Android (View/Compose).
• Реалізація Dynamic Type та Accessibility (сертифіковано за стандартами WCAG).
• Створення типографічної шкали з line height та letter spacing.
• Тестування на пристроях з різними екранами.
• Документація (опис стилів та їх використання).

Наша команда мобільних розробників має 5+ років досвіду, реалізувала понад 50 проєктів з кастомною типографікою. Наші інженери сертифіковані Apple WWDC та Google Associate Android Developer. Гарантуємо сумісність з останніми версіями ОС та доступність для всіх користувачів. Вартість розраховується індивідуально після аналізу проєкту (орієнтовно від $200 за базову інтеграцію). Зв'яжіться з нами для консультації. Замовте професійну інтеграцію шрифтів — це зекономить тижні на налагодженні.