Dynamic Type: nyckelbegrepp, textstilar och hur det fungerar i iOS

Vad är Dynamic Type i iOS

Dynamic Type är en iOS-teknik som introducerades i iOS 7 och som gör att text i applikationen automatiskt kan anpassas till systemets teckenstorleksinställningar. Användaren kan öka eller minska teckensnittet i alla applikationer samtidigt — utan att behöva ändra inställningar i varje applikation separat.

Enligt Apple WWDC 2023, ”Make Your App Visually Accessible” ändrar över 40 % av iOS-användarna teckenstorleken från standardinställningen. För åldersgruppen 65+ når denna siffra 70 %. Dynamic Type är ett obligatoriskt krav för tillgänglighetscertifiering i App Store. Brist på stöd är en anledning till att applikationen avvisas vid granskning.

Funktionsprincip: applikationen använder UIFont.preferredFont(forTextStyle:) istället för UIFont(name:size:). iOS returnerar automatiskt ett teckensnitt skalat enligt aktuell systeminställning. När storleken ändras i inställningarna genererar iOS ett meddelande UIContentSizeCategory.didChangeNotification — applikationen måste beräkna layouten på nytt.

Historia om Dynamic Type

Dynamic Type dök upp i iOS 7 tillsammans med platt design. I iOS 10 lades stöd för anpassade teckensnitt till via UIFontMetrics. iOS 11 introducerade tillgänglighetsnivåer (upp till AccessibilityXXXL). iOS 15 lade till Dynamic Type i SwiftUI med automatiskt stöd. Med varje release skärper Apple kraven: från och med iOS 17 får applikationer utan Dynamic Type-stöd en varning vid uppladdning till App Store Connect.

Textstilar UIFont.TextStyle

iOS tillhandahåller 8 textstilar, var och en med fördefinierad storlek och stil för standardinställningen:

Att använda rätt stil är inte bara en fråga om utseende. UIFont.TextStyle.body i AccessibilityXXXL-läge kan nå 53px. Om applikationen använder fast teckensnitt 17px för body blir texten oläslig för användare som har ökat teckensnittet.

Visuell hierarki genom stilar

Dynamic Type skal inte bara — det bevarar den visuella hierarkin. Large Title är alltid större än Title 1, som är större än Body, oavsett skalningsnivå. Skalningskoefficienterna varierar: rubriker skalas mer aggressivt än brödtext, så att hierarkin bevaras även på tillgänglighetsnivåer.

Skalningsnivåer

iOS stöder 11 nivåer av textskalning, indelade i två kategorier:

• Standard sizes (5 nivåer): XS, S, M, L (standard), XL
• Accessibility sizes (6 nivåer): accessibilityXL, accessibilityXXL, accessibilityXXXL, accessibilityXXXXL, accessibilityXXXXXL, accessibilityXXXXXXL

Skillnaden mellan XS och AccessibilityXXXL för body-stilen är från 14px till 53px — nästan 4×. Layout designad för 17px kollapsar helt vid 53px: text går utanför gränser, knappar överlappar, celler krockar med varandra.

Kontrollera aktuell kategori i koden:

let category = UIApplication.shared.preferredContentSizeCategory
// .extraSmall, .small, .medium, .large, .extraLarge ...
if category.isAccessibilityCategory {
    // Aktivera alternativ layout
}

traitCollection och textstorlek

Textstorlekskategorin är tillgänglig via traitCollection.uiContentSizeCategory. När systeminställningen ändras anropar iOS traitCollectionDidChange på alla UIView. I denna metod måste du uppdatera teckensnitt och beräkna om layouten. SwiftUI gör detta automatiskt — UIKit kräver manuell prenumeration.

För UICollectionView, använd UICollectionViewCompositionalLayout — den anpassar automatiskt antalet kolumner efter skärmbredd och textstorlek. På tillgänglighetsnivåer, växla från tvåkolumns- till enkolumnslayout så att texten inte kapas och element inte överlappar. Använd villkorsstyrd layout: för regular width — två kolumner, för compact eller accessibility — en kolumn.

Implementering i UIKit

Grundläggande implementering i UIKit — UIFont.preferredFont(forTextStyle:). Denna metod returnerar ett teckensnitt skalat enligt aktuell systeminställning:

titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
bodyLabel.font = UIFont.preferredFont(forTextStyle: .body)

För anpassade teckensnitt använd UIFontMetrics:

let customFont = UIFont(name: "Montserrat-Regular", size: 16)!
titleLabel.font = UIFontMetrics(forTextStyle: .body)
    .scaledFont(for: customFont)

// Spåra storleksändringar
NotificationCenter.default.addObserver(
    self,
    selector: #selector(preferredContentSizeChanged),
    name: UIContentSizeCategory.didChangeNotification,
    object: nil
)

För UILabel i Interface Builder räcker det att ställa in teckensnittet som textstil (Text Style) och aktivera ”Automatically Adjusts Font”. För anpassade teckensnitt stöder inte IB UIFontMetrics — endast via kod.

UIFontMetrics och skalningskurva

UIFontMetrics använder samma skalningskurva som preferredFont. Du kan ställa in fromTextStyle: .body, .headline etc. Varje stil har sin egen skalningskoefficient. Body skalas måttligt, Large Title — aggressivt. Om ditt anpassade teckensnitt används för brödtext, använd .body.

Dynamic Type i SwiftUI

I SwiftUI är stödet för Dynamic Type inbyggt som standard. Alla systemmodifierare (.font(.body), .font(.title)) skalas automatiskt. Utvecklaren behöver inte anropa UIFont.preferredFont.

Exempel:

Text("Brödtext")
    .font(.body)
    .lineLimit(nil)
    .minimumScaleFactor(0.5)

För anpassade skalor använd DynamicTypeSize:

@Environment(\.dynamicTypeSize) var dynamicTypeSize

var body: some View {
    Text("Adaptiv text")
        .font(.body)
        .padding(dynamicTypeSize <= .large ? 8 : 16)
}

SwiftUI uppdaterar automatiskt vyn när systemets textstorlek ändras — inga ytterligare prenumerationer på meddelanden krävs.

Begränsningar för Dynamic Type i SwiftUI

Modifieraren .font(.body) fungerar endast för systemteckensnitt. För anpassade teckensnitt i SwiftUI, använd Font.custom med UIFontMetrics i bakgrunden. Från och med iOS 16 stöder SwiftUI DynamicTypeSize i @Environment, vilket möjliggör anpassning av marginaler och layout.

Anpassning av layout för stora teckensnitt

Auto Layout är ett obligatoriskt villkor för Dynamic Type-stöd. Fasta bredder och höjder (>=, <=) bryts vid tillgänglighetsstorlekar. Använd intrinsicContentSize för UILabel — den beräknar automatiskt höjden baserat på aktuell teckenstorlek.

Regler för adaptiv layout:

• UIStackView med distribution = fill och spacing = >= 8 — element flyttas till nästa rad
• UITableViewCell med automaticDimension — cellhöjd anpassas efter innehåll
• numberOfLines = 0 på UILabel — text kapas inte utan radbryts
• Knappar med edgeInsets — lägg till marginaler på tillgänglighetsnivåer via traitCollection.preferredContentSizeCategory

För långa texter (t.ex. artiklar, användarvillkor) ställ in minimumScaleFactor på UILabel — minskar texten som sista utväg när Auto Layout inte kan rymma innehållet. Värdet 0.5 innebär att teckensnittet kan minskas till 50 % av föredragen storlek.

Exempel på anpassning av marginaler efter storlekskategori:

let isAccessibility = traitCollection
    .preferredContentSizeCategory.isAccessibilityCategory
stackView.spacing = isAccessibility ? 16 : 8
button.contentEdgeInsets = isAccessibility
    ? UIEdgeInsets(top: 16, left: 24, bottom: 16, right: 24)
    : UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)

Typiska layoutproblem på tillgänglighetsnivåer

Textkapning — UILabel med numberOfLines = 1 och fast bredd kapar text vid AccessibilityXL. Lösning: numberOfLines = 0 och trailing constraint. Elementöverlappning — knappar med fast höjd överlappar varandra. Lösning: UIStackView med automatic spacing. Utanför skärmgränser — ScrollView är obligatorisk för tillgänglighetsnivåer.

Testa Dynamic Type

Xcode-simulatorn gör det möjligt att ändra textstorlek: i simulators menyn Settings → Accessibility → Display & Text Size → Larger Text. Växla mellan alla 11 nivåer och kontrollera att texten inte kapas, knapparna är tillgängliga och layouten inte bryts.

För automatiserad testning använd inställningen contentSizeCategory i XCUIApplication:

func testAccessibilitySizes() {
    let app = XCUIApplication()
    app.launchArguments += [
        "-UIPreferredContentSizeCategoryName",
        "UICTContentSizeCategoryAccessibilityXXXL"
    ]
    app.launch()
    app.scrollViews.buttons["Skicka"].tap()
    XCTAssertTrue(app.staticTexts["Formuläret har skickats"]
        .waitForExistence(timeout: 5))
}

XCUITest med olika launchArguments gör det möjligt att testa alla skalningsnivåer i CI. Glöm inte att kontrollera tillgänglighetskategorier separat — de bryter oftast layouten. Enligt Apple upptäcks 70 % av Dynamic Type-felen just på tillgänglighetsnivåer, eftersom utvecklare bara testar standardstorlekar.

Accessibility Inspector: kontroll av Dynamic Type

Xcode Accessibility Inspector visar vilka teckensnitt det valda elementet använder — fast eller skalbart. Om elementet inte reagerar på textstorleksändring i simulatorn betyder det att ett fast teckensnitt används. Ersätt med UIFont.preferredFont eller UIFontMetrics.