Bold Text у мобільних додатках: що це та налаштування жирного тексту

Що таке Bold Text у доступності?

Bold Text — це системне налаштування операційних систем, яке наказує використовувати жирне накреслення шрифту для всіх текстових елементів інтерфейсу замість стандартного (regular або normal). На відміну від простого збільшення розміру шрифту, Bold Text не змінює масштаб — він збільшує товщину ліній букв, роблячи їх більш насиченими та контрастними на фоні.

Функція належить до категорії display accommodations — налаштувань екрану, які допомагають людям з порушеннями зору комфортніше сприймати інформацію. Bold Text особливо ефективний при низькій гостроті зору (амбліопія), віковій далекозорості (пресбіопія) та деяких формах дислексії, при яких букви «двояться» або «пливуть» при стандартній товщині.

Жирний шрифт збільшує читабельність — швидкість і точність розпізнавання окремих символів. Дослідження Usability.gov показують, що жирне накреслення підвищує точність читання на 12–18% у користувачів з порушеннями зору порівняно зі звичайним шрифтом того ж кеглю. При цьому Bold Text не замінює збільшення тексту — обидві функції можна комбінувати.

Відмінність Bold Text від збільшення шрифту

Ключова відмінність Bold Text від Dynamic Type (iOS) або Font Size (Android) — механізм впливу. Збільшення шрифту змінює розмір букв, Bold Text — лише товщину. При збільшенні шрифту страждає місткість екрану (на один екран поміщається менше контенту), Bold Text зберігає кількість видимих елементів. Для користувачів з пресбіопією на ранніх стадіях Bold Text часто виявляється достатнім без збільшення тексту.

Кому потрібен Bold Text

Основна аудиторія Bold Text — люди з амбліопією (зниження гостроти зору, що не коригується окулярами), пресбіопією (вікова далекозорість після 40–45 років) і деякими формами дислексії. Функція також корисна при читанні на яскравому сонці — жирний шрифт зберігає контрастність при відблисках. Допоміжні технології, такі як VoiceOver і TalkBack, працюють з Bold Text незалежно — налаштування впливає лише на візуальне відображення.

Bold Text в iOS: налаштування та принцип роботи

В iOS Bold Text — одна з найстаріших функцій доступності, що з’явилася в iOS 7 (2013). Налаштування знаходиться в Settings > Display & Brightness > Bold Text і потребує перезавантаження iPhone: система перебудовує всі шрифти в системних додатках (Settings, Mail, Messages, Calendar, Notes) і сторонніх додатках, які використовують системний шрифт San Francisco.

Технічно iOS замінює файл системного шрифту San Francisco на його Bold-варіант (SF Pro Bold / SF Pro Rounded Bold) на рівні CoreText framework. Після ввімкнення Bold Text всі рядки на екрані — від заголовків навігації до тексту кнопок — відображаються з font-weight 700 замість 400. Розробник не може перевизначити цю поведінку для системних елементів, але може керувати шрифтами у власному інтерфейсі через Dynamic Type.

Для розробника ввімкнений Bold Text означає, що всі UIFont з textStyle (.body, .headline, .caption та інші) автоматично отримують жирне накреслення. UIFontWeight існує в двох варіантах: regular (0.0) та bold (1.0). При активному Bold Text система збільшує fontWeight на 0.3–0.5 для кожного стилю. Перевірити стан можна через UIAccessibility.isBoldTextEnabled.

Перевірка Bold Text в iOS-додатку

Розробник може перевірити, чи ввімкнено Bold Text на пристрої, та адаптувати інтерфейс. Наприклад, якщо заголовки таблиці вже використовують жирний шрифт, при ввімкненій функції може знадобитися зменшити жирність, щоб уникнути візуального шуму. Код перевірки використовує UIAccessibility фреймворку.

import UIKit

class BoldTextManager {

    // Перевірка стану Bold Text
    static var isBoldTextEnabled: Bool {
        return UIAccessibility.isBoldTextEnabled
    }

    // Адаптація шрифту під Bold Text
    static func adjustedFont(
        textStyle: UIFont.TextStyle,
        weight: UIFont.Weight
    ) -> UIFont {
        let baseFont = UIFont.preferredFont(
            forTextStyle: textStyle
        )
        guard isBoldTextEnabled else {
            return baseFont
        }
        // Зменшуємо жирність, щоб не було double-bold
        let adjustedWeight: UIFont.Weight
        switch weight {
        case .bold, .heavy:
            adjustedWeight = .semibold
        case .semibold:
            adjustedWeight = .medium
        default:
            adjustedWeight = weight
        }
        return UIFont.systemFont(
            ofSize: baseFont.pointSize,
            weight: adjustedWeight
        )
    }

    // Кешований шрифт з підтримкою Bold Text
    static func labelFont() -> UIFont {
        return adjustedFont(
            textStyle: .body,
            weight: .regular
        )
    }
}

// Підписка на зміни Bold Text (Notification)
NotificationCenter.default.addObserver(
    self,
    selector: #selector(boldTextStatusChanged),
    name: UIAccessibility.boldTextStatusDidChangeNotification,
    object: nil
)

@objc func boldTextStatusChanged() {
    // Оновити UI при зміні Bold Text
    updateFonts()
}

Клас BoldTextManager перевіряє isBoldTextEnabled, адаптує вагу шрифту (зменшує heavy/bold до semibold/medium при активності функції) та підписується на сповіщення boldTextStatusDidChangeNotification. Це запобігає ефекту double-bold, коли розробник вже використовує жирний шрифт для заголовків, а система потовщує їх ще сильніше.

Вплив на UITableView та UICollectionView

Bold Text впливає на layout комірок UITableView та UICollectionView, оскільки збільшення товщини шрифту може змінити висоту рядка. При використанні self-sizing cells (estimatedRowHeight + UITableView.automaticDimension) iOS автоматично перераховує висоту при зміні шрифту. Для фіксованих висот комірок розробнику потрібно викликати reloadData() після отримання сповіщення boldTextStatusDidChangeNotification, інакше текст може обрізатися.

Improve Readability в Android: аналог Bold Text

В Android функція Bold Text називається «Improve Readability» в інтерфейсі налаштувань і знаходиться в розділі «Спеціальні можливості» (Accessibility). У деяких версіях Android, особливо на пристроях Samsung One UI, функція називається «High Contrast Text». Налаштування застосовується до всіх системних елементів і більшості сторонніх додатків.

Технічна реалізація Android відрізняється від iOS: замість заміни системного шрифту Android перевизначає Typeface на системному рівні через Resources.Theme. При активації налаштування система змінює атрибут android:textStyle для всіх текстових елементів, встановлюючи bold або italic+bold. Розробник може перевірити стан через Settings.Global.getFloat() або AccessibilityManager.

Перевірка Bold Text в Android-додатку

В Android немає прямого аналогічного UIAccessibility.isBoldTextEnabled API. Перевірка здійснюється через ContentResolver та Settings.System. Функція зберігається в глобальних налаштуваннях як font_weight_adjustment. Для Jetpack Compose доступна через LocalDensity та fontScale.

import android.content.Context
import android.provider.Settings
import android.util.TypedValue
import androidx.compose.ui.text.font.FontWeight

class AndroidBoldTextHelper {

    // Перевірка покращеної читабельності через системні налаштування
    fun isBoldTextEnabled(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "font_weight_adjustment"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — адаптація FontWeight
    fun adjustFontWeight(
        context: Context,
        original: FontWeight
    ): FontWeight {
        if (!isBoldTextEnabled(context)) return original

        return when (original) {
            FontWeight.Bold, FontWeight.ExtraBold -> FontWeight.SemiBold
            FontWeight.SemiBold -> FontWeight.Medium
            else -> original
        }
    }

    // XML View — застосування через TypedValue
    fun applyBoldStyleFix(context: Context, textView: android.widget.TextView) {
        if (isBoldTextEnabled(context)) {
            val paint = textView.paint
            val fakeBold = paint.isFakeBoldText
            // Зменшуємо fakeBold, якщо він уже ввімкнений системою
            if (fakeBold) {
                paint.isFakeBoldText = false
                textView.invalidate()
            }
        }
    }
}

Клас AndroidBoldTextHelper читає системне налаштування font_weight_adjustment, адаптує FontWeight в Jetpack Compose та прибирає дублюючий fakeBold в XML View. На відміну від iOS, Android не надає notification-канал для зміни Bold Text — розробник перевіряє налаштування при старті Activity або через ContentObserver.

ContentObserver для відстеження змін

Для відстеження змін Bold Text в рантаймі Android-розробник може використовувати ContentObserver. При зміні налаштування font_weight_adjustment система сповіщає ContentResolver, і додаток може оновити UI. Це важливо для AccessibilityService та кастомних лаунчерів, які повинні миттєво реагувати на зміни налаштувань користувача.

CSS font-weight: типи насиченості шрифту

У веб-розробці насиченість шрифту керується CSS-властивістю font-weight зі значеннями від 100 (Thin) до 900 (Black). Стандартні значення: normal = 400, bold = 700. Bold Text в операційній системі не впливає безпосередньо на CSS font-weight — веб-браузери не отримують системного сигналу про ввімкнений Bold Text на рівні CSS. Однак розробник може використовувати CSS-медіа-функцію, якщо платформа її підтримує.

Для iOS Safari підтримує медіа-функцію -webkit-text-size-adjust, але не має прямої media query для Bold Text. На Android Chrome також не надає media query для системного налаштування жирного тексту. Веб-розробникам рекомендується використовувати prefers-contrast та prefers-reduced-motion для адаптації, а для жирного тексту — перевіряти налаштування через User-Agent або резервні стилі.

Використання варіативних шрифтів (Variable Fonts)

Variable Fonts (OpenType Font Variations) дозволяють плавно регулювати насиченість шрифту через CSS font-weight в діапазоні 1–999 з кроком в 1 одиницю. На відміну від стандартних шрифтів, де доступні лише дискретні значення (400, 700), variable fonts дають змогу підібрати оптимальну товщину для кожного користувача. При налаштуваннях доступності можна використовувати більш широкий діапазон.

/* Варіативний шрифт з плавним регулюванням товщини */
@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/Inter-Variable.woff2")
        format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
}

/* Адаптація під системний Bold Text через клас */
.bold-text-enabled {
    --font-weight-body: 500;
    --font-weight-heading: 700;
}

.bold-text-enabled .text-body {
    font-weight: var(--font-weight-body);
}

.bold-text-enabled .text-heading {
    font-weight: var(--font-weight-heading);
}

/* prefers-contrast: more — запасний підхід */
@media (prefers-contrast: more) {
    .content {
        --font-weight-increase: 100;
    }
    .content .text {
        font-weight: calc(
            var(--font-weight-base) +
            var(--font-weight-increase)
        );
    }
}

В прикладі CSS показано підключення варіативного шрифту Inter Variable, CSS-змінні для керування жирністю та адаптація через prefers-contrast: more. Variable fonts дозволяють збільшити font-weight на 50–100 одиниць при ввімкненому системному Bold Text без втрати якості рендерингу. Для визначення стану Bold Text на клієнті можна використовувати JavaScript-перевірку User-Agent та клас на html-елементі.

JavaScript-детекція Bold Text на веб-сторінці

Оскільки CSS не надає прямої media query для Bold Text, веб-розробники використовують JavaScript: створюють невидимий елемент з відомим шрифтом, вимірюють його ширину, змінюють font-weight та порівнюють різницю. Якщо різниця більша за очікувану — ймовірно, системний Bold Text активний. Цей метод використовується в бібліотеках доступності для автоматичної підстройки стилів.

Як Bold Text впливає на доступність додатків

Bold Text вирішує конкретні проблеми користувачів з порушеннями зору: підвищує розрізненність символів при амбліопії, знижує зорове стомлення при тривалому читанні та компенсує низьку контрастність дисплея на яскравому сонці. За даними WebAIM Million (2025), 12.3% всіх сторінок мають текст з недостатньою контрастністю — Bold Text може частково компенсувати цей дефект на стороні користувача.

Для розробника підтримка Bold Text входить до вимог WCAG 2.2: критерій 1.4.1 (Use of Color) та 1.4.3 (Contrast Minimum). Додаток повинен коректно відображатися при ввімкненому системному налаштуванні Bold Text без втрати контенту, накладання елементів або обрізання тексту. Тестування з ввімкненим Bold Text обов’язкове при підготовці до публікації в App Store та Google Play.

Рекомендації щодо тестування

При тестуванні додатка з Bold Text перевіряйте: чи всі текстові елементи відображаються повністю (без обрізання), чи не дублюється жирність (double-bold), чи коректно перераховуються висоти комірок в таблицях, чи не зсуваються елементи відносно один одного. Використовуйте Accessibility Inspector (Xcode) або Accessibility Scanner (Android) для автоматичного виявлення проблем з Bold Text.

• Xcode Accessibility Inspector — аудит шрифтів з симуляцією режиму Bold Text
• Android Accessibility Scanner — перевірка contrast ratio та font-weight дублювання
• UI Testing — скріншотні тести з ввімкненим та вимкненим Bold Text
• Dynamic Type testing — поєднання Bold Text + збільшений шрифт

Майбутнє Bold Text в мобільних платформах

Сучасні iOS та Android розвивають Bold Text в бік більш тонкого налаштування: iOS 18 (2024) додала пер-додаток налаштування шрифтів, включаючи жирність, а Android 16 (2025) розширив API font_weight_adjustment для розробників. Очікується, що майбутні версії нададуть веб-розробникам CSS media query для Bold Text, усунувши необхідність JS-детекції.