Bold Text i mobilappar: vad är det, konfiguration av fet text

Vad är Bold Text inom tillgänglighet?

Bold Text — är en systeminställning i operativsystem som föreskriver användning av fetstil för alla textuella gränssnittselement istället för standard (regular eller normal). Till skillnad från enkel förstoring av teckenstorleken ändrar Bold Text inte skalan — det ökar tjockleken på bokstävernas linjer, vilket gör dem mer mättade och kontrastrika mot bakgrunden.

Funktionen tillhör kategorin display accommodations — skärminställningar som hjälper personer med synnedsättning att uppfatta information bekvämare. Bold Text är särskilt effektivt vid låg synskärpa (amblyopi), åldersrelaterad översynthet (presbyopi) och vissa former av dyslexi där bokstäver "dubblas" eller "flyter" vid standardtjocklek.

Fetstil ökar readability — hastigheten och noggrannheten för igenkänning av enskilda tecken. Forskning från Usability.gov visar att fetstil ökar läsprestandan med 12–18% hos användare med synnedsättning jämfört med regular-teckensnitt i samma storlek. Bold Text ersätter inte textförstoring — båda funktionerna kan kombineras.

Skillnad mellan Bold Text och teckenstorleksförstoring

Den viktigaste skillnaden mellan Bold Text och Dynamic Type (iOS) eller Font Size (Android) — verkningsmekanismen. Teckenstorleksförstoring ändrar bokstävernas storlek, Bold Text — endast tjockleken. Vid teckenstorleksförstoring minskar skärmkapaciteten (mindre innehåll får plats på en skärm), Bold Text bevarar antalet synliga element. För användare med presbyopi i tidiga stadier är Bold Text ofta tillräckligt utan textförstoring.

Vem behöver Bold Text

Den huvudsakliga målgruppen för Bold Text — personer med amblyopi (minskad synskärpa som inte kan korrigeras med glasögon), presbyopi (åldersrelaterad översynthet efter 40–45 år) och vissa former av dyslexi. Funktionen är också användbar vid läsning i starkt solljus — fetstil bevarar kontrasten vid bländning. Hjälpmedelstekniker som VoiceOver och TalkBack fungerar oberoende av Bold Text — inställningen påverkar endast den visuella visningen.

Bold Text i iOS: inställning och funktionsprincip

I iOS är Bold Text en av de äldsta tillgänglighetsfunktionerna, som dök upp i iOS 7 (2013). Inställningen finns i Settings > Display & Brightness > Bold Text och kräver omstart av iPhone: systemet bygger om alla teckensnitt i systemappar (Settings, Mail, Messages, Calendar, Notes) och tredjepartsappar som använder systemteckensnittet San Francisco.

Tekniskt sett ersätter iOS systemteckensnittsfilen San Francisco med dess fetstilade variant (SF Pro Bold / SF Pro Rounded Bold) på CoreText-ramverkets nivå. Efter aktivering av Bold Text visas alla rader på skärmen — från navigeringstitlar till knapptext — med font-weight 700 istället för 400. Utvecklaren kan inte åsidosätta detta beteende för systemelement, men kan hantera teckensnitt i sitt eget gränssnitt via Dynamic Type.

För utvecklaren innebär aktivt Bold Text att alla UIFont med textStyle (.body, .headline, .caption och andra) automatiskt får fetstil. UIFontWeight finns i två varianter: regular (0.0) och bold (1.0). Vid aktivt Bold Text ökar systemet fontWeight med 0.3–0.5 för varje stil. Status kan kontrolleras via UIAccessibility.isBoldTextEnabled.

Kontroll av Bold Text i iOS-app

Utvecklaren kan kontrollera om Bold Text är aktivt på enheten och anpassa gränssnittet. Till exempel, om tabellrubriker redan använder fetstil, kan det vid aktiverad funktion vara nödvändigt att minska tjockleken för att undvika visuellt brus. Kontrollkoden använder UIAccessibility-ramverket.

import UIKit

class BoldTextManager {

    // Kontroll av Bold Text-status
    static var isBoldTextEnabled: Bool {
        return UIAccessibility.isBoldTextEnabled
    }

    // Anpassning av teckensnitt till Bold Text
    static func adjustedFont(
        textStyle: UIFont.TextStyle,
        weight: UIFont.Weight
    ) -> UIFont {
        let baseFont = UIFont.preferredFont(
            forTextStyle: textStyle
        )
        guard isBoldTextEnabled else {
            return baseFont
        }
        // Minska tjockleken för att undvika 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
        )
    }

    // Cachat teckensnitt med stöd för Bold Text
    static func labelFont() -> UIFont {
        return adjustedFont(
            textStyle: .body,
            weight: .regular
        )
    }
}

// Prenumeration på Bold Text-ändringar (Notification)
NotificationCenter.default.addObserver(
    self,
    selector: #selector(boldTextStatusChanged),
    name: UIAccessibility.boldTextStatusDidChangeNotification,
    object: nil
)

@objc func boldTextStatusChanged() {
    // Uppdatera gränssnittet vid ändring av Bold Text
    updateFonts()
}

Klassen BoldTextManager kontrollerar isBoldTextEnabled, justerar teckensnittsvikten (minskar heavy/bold till semibold/medium när funktionen är aktiv) och prenumererar på aviseringen boldTextStatusDidChangeNotification. Detta förhindrar double-bold-effekten, när utvecklaren redan använder fetstil för rubriker och systemet gör dem ännu tjockare.

Påverkan på UITableView och UICollectionView

Bold Text påverkar layouten av celler i UITableView och UICollectionView, eftersom ökad teckensnittstjocklek kan ändra radhöjden. Vid användning av self-sizing cells (estimatedRowHeight + UITableView.automaticDimension) räknar iOS automatiskt om höjden vid teckensnittsändring. För fasta cellhöjder måste utvecklaren anropa reloadData() efter att ha mottagit aviseringen boldTextStatusDidChangeNotification, annars kan texten kapas.

Förbättrad läsbarhet i Android: motsvarighet till Bold Text

I Android kallas Bold Text-funktionen "Förbättrad läsbarhet" (Improve readability) i inställningsgränssnittet och finns i avsnittet "Tillgänglighet" (Accessibility). I vissa versioner av Android, särskilt på Samsung One UI-enheter, kallas funktionen "Text med hög kontrast" eller High Contrast Text. Inställningen gäller alla systemelement och de flesta tredjepartsappar.

Den tekniska implementeringen i Android skiljer sig från iOS: istället för att ersätta systemteckensnittet åsidosätter Android Typeface på systemnivå via Resources.Theme. Vid aktivering av inställningen ändrar systemet attributet android:textStyle för alla textelement och anger bold eller italic+bold. Utvecklaren kan kontrollera status via Settings.Global.getFloat() eller AccessibilityManager.

Kontroll av Bold Text i Android-app

I Android finns det ingen direkt API-motsvarighet till UIAccessibility.isBoldTextEnabled. Kontrollen görs via ContentResolver och Settings.System. Funktionen lagras i globala inställningar som font_weight_adjustment. För Jetpack Compose är den tillgänglig via LocalDensity och fontScale.

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

class AndroidBoldTextHelper {

    // Kontroll av förbättrad läsbarhet via systeminställningar
    fun isBoldTextEnabled(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "font_weight_adjustment"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — justering av 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 — tillämpning via TypedValue
    fun applyBoldStyleFix(context: Context, textView: android.widget.TextView) {
        if (isBoldTextEnabled(context)) {
            val paint = textView.paint
            val fakeBold = paint.isFakeBoldText
            // Minska fakeBold om det redan är aktiverat av systemet
            if (fakeBold) {
                paint.isFakeBoldText = false
                textView.invalidate()
            }
        }
    }
}

Klassen AndroidBoldTextHelper läser systeminställningen font_weight_adjustment, justerar FontWeight i Jetpack Compose och tar bort dubblerad fakeBold i XML View. Till skillnad från iOS tillhandahåller Android ingen aviseringskanal för ändring av Bold Text — utvecklaren kontrollerar inställningen vid start av Activity eller via ContentObserver.

ContentObserver för att spåra ändringar

För att spåra ändringar av Bold Text under körning kan Android-utvecklaren använda ContentObserver. När inställningen font_weight_adjustment ändras meddelar systemet ContentResolver och appen kan uppdatera gränssnittet. Detta är viktigt för AccessibilityService och anpassade startprogram som måste reagera omedelbart på ändringar av användarinställningar.

CSS font-weight: typer av teckensnittstjocklek

Inom webbutveckling styrs teckensnittstjockleken av CSS-egenskapen font-weight med värden från 100 (Thin) till 900 (Black). Standardvärden: normal = 400, bold = 700. Bold Text i operativsystemet påverkar inte direkt CSS font-weight — webbläsare får ingen systemsignal om aktivt Bold Text på CSS-nivå. Utvecklaren kan dock använda CSS-mediafunktionen om plattformen stöder det.

För iOS stöder Safari mediafunktionen -webkit-text-size-adjust, men har ingen direkt media query för Bold Text. På Android tillhandahåller Chrome inte heller någon media query för systeminställningen av fet text. Webbutvecklare rekommenderas att använda prefers-contrast och prefers-reduced-motion för anpassning, och för fet text — kontrollera inställningen via User-Agent eller reservstilar.

Användning av variabla teckensnitt (Variable Fonts)

Variable Fonts (OpenType Font Variations) möjliggör smidig justering av teckensnittstjocklek via CSS font-weight i intervallet 1–999 i steg om 1 enhet. Till skillnad från standardteckensnitt där endast diskreta värden (400, 700) är tillgängliga, ger variable fonts möjlighet att välja optimal tjocklek för varje användare. Vid tillgänglighetsinställningar kan ett bredare intervall användas.

/* Variabelt teckensnitt med smidig tjockleksjustering */
@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/Inter-Variable.woff2")
        format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
}

/* Anpassning till systemets Bold Text via klass */
.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 — reservmetod */
@media (prefers-contrast: more) {
    .content {
        --font-weight-increase: 100;
    }
    .content .text {
        font-weight: calc(
            var(--font-weight-base) +
            var(--font-weight-increase)
        );
    }
}

I CSS-exemplet visas anslutning av det variabla teckensnittet Inter Variable, CSS-variabler för hantering av tjocklek och anpassning via prefers-contrast: more. Variable fonts möjliggör ökning av font-weight med 50–100 enheter vid aktivt system Bold Text utan kvalitetsförlust i renderingen. För att bestämma status för Bold Text på klientsidan kan JavaScript-kontroll av User-Agent och en klass på html-elementet användas.

JavaScript-detektion av Bold Text på webbsida

Eftersom CSS inte tillhandahåller en direkt media query för Bold Text, använder webbutvecklare JavaScript: de skapar ett osynligt element med ett känt teckensnitt, mäter dess bredd, ändrar font-weight och jämför skillnaden. Om skillnaden är större än förväntad — är systemets Bold Text troligen aktivt. Denna metod används i tillgänglighetsbibliotek för automatisk justering av stilar.

Hur Bold Text påverkar tillgängligheten i appar

Bold Text löser specifika problem för användare med synnedsättning: ökar särskiljbarheten av symboler vid amblyopi, minskar visuell trötthet vid långvarig läsning och kompenserar för låg skärmkontrast i starkt solljus. Enligt WebAIM Million (2025) har 12,3% av alla sidor text med otillräcklig kontrast — Bold Text kan delvis kompensera denna brist på användarsidan.

För utvecklaren ingår stöd för Bold Text i kraven i WCAG 2.2: kriterium 1.4.1 (Use of Color) och 1.4.3 (Contrast Minimum). Appen måste visas korrekt med aktiv systeminställning Bold Text utan förlust av innehåll, överlappning av element eller kapning av text. Testning med aktivt Bold Text är obligatorisk vid förberedelse för publicering i App Store och Google Play.

Rekommendationer för testning

Vid testning av appen med Bold Text kontrollera: visas alla textelement fullständigt (utan kapning), dupliceras inte tjockleken (double-bold), beräknas cellhöjder i tabeller korrekt om, förskjuts inte element i förhållande till varandra. Använd Accessibility Inspector (Xcode) eller Accessibility Scanner (Android) för automatisk upptäckt av problem med Bold Text.

• Xcode Accessibility Inspector — teckensnittsgranskning med simulering av Bold Text-läge
• Android Accessibility Scanner — kontroll av kontrastförhållande och font-weight-duplicering
• UI Testing — skärmbildstester med aktiverad och avaktiverad Bold Text
• Dynamic Type testing — kombination Bold Text + förstorat teckensnitt

Framtiden för Bold Text på mobila plattformar

Moderna iOS och Android utvecklar Bold Text mot finare inställningar: iOS 18 (2024) lade till app-specifika teckensnittsinställningar inklusive tjocklek, och Android 16 (2025) utökade API:et font_weight_adjustment för utvecklare. Förväntningen är att framtida versioner kommer att ge webbutvecklare en CSS media query för Bold Text, vilket eliminerar behovet av JS-detektion.