Текст і типографіка в мобільній розробці: що це, які інструменти та як працює

Текст у мобільних додатках: NSAttributedString на iOS

NSAttributedString — фундаментальний клас iOS для роботи з форматованим текстом. Він дозволяє застосовувати атрибути до окремих символів або діапазонів: шрифт через UIFont, колір через UIColor, міжсимвольну відстань через kern та міжрядковий інтервал через NSMutableParagraphStyle. У мобільних додатках NSAttributedString використовується повсюдно — від UILabel до складних UITextView з підтримкою редагування.

UIFont та налаштування шрифту

UIFont — основний клас для роботи зі шрифтами на iOS. Він підтримує системні гарнітури, кастомні шрифти та Dynamic Type. UIFont(name:size:) завантажує шрифт за ім'ям, UIFont.systemFont(ofSize:weight:) — системний шрифт. UIFontDescriptor дозволяє модифікувати існуючий шрифт: змінити розмір, накреслення або додати матрицю трансформації. Для кастомних шрифтів файл .ttf додається до проекту та реєструється в Info.plist через ключ Fonts provided by application.

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont(name: "HelveticaNeue-Bold", size: 18) as Any,
    .foregroundColor: UIColor.darkGray as Any,
    .kern: 1.5 as Any
]
let attributedString = NSAttributedString(
    string: "Форматированный текст",
    attributes: attributes
)
label.attributedText = attributedString

NSMutableParagraphStyle та форматування абзаців

NSMutableParagraphStyle — змінювана версія ParagraphStyle для налаштування відображення абзаців. Він керує вирівнюванням (alignment), міжрядковим інтервалом (lineSpacing), відступами (headIndent, tailIndent) та режимом обрізки (lineBreakMode). ParagraphStyle критично важливий для читабельності довгих текстів на мобільних пристроях: правильний lineSpacing запобігає злиттю рядків, а lineBreakMode — обрізанню слів. Налаштування paragraphSpacing задає відступ між абзацами.

Текст у мобільних додатках: SpannableString на Android

SpannableString — основний інструмент для форматування тексту на Android. Він працює через механізм Span-об'єктів, кожен з яких відповідає за один аспект: StyleSpan — жирний або курсив, ForegroundColorSpan — колір, URLSpan — посилання, UnderlineSpan — підкреслення. SpannableStringBuilder — аналог NSMutableAttributedString, що дозволяє будувати текст з кількох фрагментів. Розуміння SpannableString необхідне для створення гнучких інтерфейсів з форматованим текстом у мобільних додатках.

Typeface та кастомні шрифти на Android

Typeface — клас для роботи зі шрифтами на Android. Він підтримує системні гарнітури Roboto та Noto, а також кастомні шрифти. Typeface.createFromResource() завантажує шрифт з res/font/, Typeface.createFromAsset() — з папки assets. Android 8.0+ підтримує шрифтові сімейства в XML, що об'єднують кілька файлів шрифту в один ресурс. Кастомний шрифт для тексту в мобільних додатках на Android задається через атрибут android:fontFamily або програмний виклик setTypeface().

TextMeasurer та вимірювання тексту

TextMeasurer (API 29+) — сучасний інструмент для вимірювання тексту без прив'язки до View. Він обчислює ширину, висоту та позиції символів до відмальовування. На старих API використовується Paint.measureText() для однорядкового тексту або StaticLayout для багаторядкового. TextMeasurer особливо корисний у кастомних View, де текст малюється через Canvas.drawText(). Коректне вимірювання запобігає обрізанню символів в інтерфейсі.

val spannable = SpannableString("Жирный текст с цветом")
spannable.setSpan(
    StyleSpan(Typeface.BOLD),
    0, 6,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    14, 19,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
textView.text = spannable

Типографіка в мобільній розробці: кернінг, лігатури та трекінг

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

Кернінг та Трекінг

Кернінг — зміна відстані між конкретними парами символів (AV, To, Wa). Трекінг — рівномірна міжсимвольна відстань для всього тексту або його фрагмента. На iOS кернінг задається через NSKernAttributeName, на Android — через властивість letterSpacing у TextView. Негативні значення зближують символи, позитивні — розширюють. Типографіка в мобільній розробці потребує акуратного налаштування цих параметрів: для великих заголовків міжсимвольну відстань зазвичай збільшують, для основного тексту залишають стандартною.

Лігатури

Лігатури — спеціальні гліфи, що замінюють поєднання двох і більше символів: fi, fl, ffi. На iOS лігатури керуються через NSLigatureAttributeName: 0 — вимкнені, 1 — стандартні, 2 — всі доступні. На Android лігатури контролюються на рівні шрифту через OpenType-фічі. Увімкнення лігатур покращує зовнішній вигляд тексту, особливо в гарнітурах із засічками. Типографіка в мобільній розробці використовує лігатури переважно для заголовків та логотипів.

Кастомні шрифти в мобільних додатках: завантаження та налаштування

Кастомні шрифти — один із головних інструментів створення унікального візуального стилю додатку. Вони дозволяють виділити бренд і покращити користувацький досвід. У мобільних додатках кастомні шрифти використовуються для заголовків, логотипів, акцентних елементів та фірмового стилю.

Variable Fonts

Variable Fonts — сучасна технологія шрифтів, де один файл містить безліч накреслень: від тонкого до наджирного, від вузького до широкого. Це скорочує розмір додатку, замінюючи кілька файлів шрифту одним. На iOS Variable Fonts підтримуються через UIFont з параметром weight. На Android — через Typeface.Builder із зазначенням осей варіативності wght, wdth, slnt. Використання Variable Fonts спрощує типографіку в мобільних додатках: розробнику не потрібно завантажувати окремі файли для кожного накреслення.

let customFont = UIFont(name: "CustomFont-Regular", size: 16)
let scaledFont = UIFontMetrics.default
    .scaledFont(for: customFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory(true)

NSTextAttachment та ImageSpan

NSTextAttachment на iOS дозволяє вбудовувати UIImage всередину NSAttributedString — зображення вирівнюється по baseline і переноситься разом із текстом. На Android аналогом є ImageSpan всередині SpannableString. Обидва підходи корисні для чатів з емодзі, новинних стрічок з іконками та форм з кастомними чекбоксами. Важливо правильно масштабувати зображення під висоту шрифту, щоб текст і графіка виглядали гармонійно.

Ефекти тексту, вирівнювання та еліпсис

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

Тінь та обведення тексту

Тінь тексту на iOS задається через NSShadow: offset, blurRadius та color. Обведення — через NSStrokeWidthAttributeName: від'ємні значення створюють заливку з обведенням, додатні — лише контур. Закреслення — NSUnderlineStyle (.single, .thick, .double). На Android тінь TextView налаштовується через android:shadowRadius, android:shadowDx, android:shadowDy. SpannableString підтримує StrikethroughSpan та UnderlineSpan. Обведення тексту на Android реалізується через OutlineSpan або кастомний шрифт.

Еліпсис та Marquee

Еліпсис — обрізка тексту з трикрапкою при переповненні контейнера. На iOS налаштовується через lineBreakMode .byTruncatingTail та numberOfLines. На Android — через android:ellipsize="end" та android:maxLines. Marquee (біжучий рядок) — анімація прокрутки тексту, доступна на Android через android:ellipsize="marquee". На iOS аналога немає — використовується бібліотека MarqueeLabel. Еліпсис обов'язковий для всіх однорядкових текстів у мобільних додатках, щоб уникнути обрізання контенту.

Dynamic Type на iOS

Dynamic Type — система адаптивного тексту в iOS, що підлаштовує розмір шрифту під налаштування Accessibility користувача. Використовуйте UIFontMetrics для масштабування кастомних шрифтів. Dynamic Type обов'язковий для Accessibility-compliant додатків. На Android аналог — одиниці sp та scaledPixels, що масштабуються під системні налаштування розміру тексту.