Dynamic Type: kernbegrippen, tekststijlen en hoe het werkt in iOS

Wat is Dynamic Type in iOS

Dynamic Type — iOS-technologie, geïntroduceerd in iOS 7, waarmee tekst in een app zich automatisch kan aanpassen aan de systeeminstellingen voor lettertypegrootte. De gebruiker kan het lettertype in alle apps tegelijk vergroten of verkleinen — zonder de instellingen in elke app afzonderlijk te hoeven wijzigen.

Volgens Apple WWDC 2023, „Make Your App Visually Accessible”, wijzigt meer dan 40% van de iOS-gebruikers het lettertypeformaat ten opzichte van de standaard. Voor de leeftijdsgroep 65+ bereikt dit cijfer 70%. Dynamic Type is een verplichte vereiste voor toegankelijkheidscertificering in de App Store. Het ontbreken van ondersteuning is een reden voor afwijzing van de app tijdens de beoordeling.

Werkingsprincipe: de app gebruikt UIFont.preferredFont(forTextStyle:) in plaats van UIFont(name:size:). iOS retourneert automatisch het lettertype geschaald op basis van de huidige systeeminstelling. Wanneer de grootte in de instellingen wordt gewijzigd, genereert iOS de melding UIContentSizeCategory.didChangeNotification — de app moet de lay-out opnieuw berekenen.

Geschiedenis van Dynamic Type

Dynamic Type verscheen in iOS 7 samen met het „vlakke” ontwerp. In iOS 10 werd ondersteuning voor aangepaste lettertypen toegevoegd via UIFontMetrics. iOS 11 introduceerde toegankelijkheidsniveaus (tot AccessibilityXXXL). iOS 15 voegde Dynamic Type toe in SwiftUI met automatische ondersteuning. Met elke release verscherpt Apple de vereisten: vanaf iOS 17 krijgen apps zonder Dynamic Type-ondersteuning een waarschuwing bij het uploaden naar App Store Connect.

Tekststijlen UIFont.TextStyle

iOS biedt 8 tekststijlen, elk met een vooraf gedefinieerd formaat en uiterlijk voor de standaardinstelling:

Het gebruik van de juiste stijl is niet alleen „uiterlijk”. UIFont.TextStyle.body kan in de AccessibilityXXXL-modus 53px bereiken. Als de app een vast lettertype van 17px gebruikt voor body, wordt de tekst onleesbaar voor gebruikers die het lettertype hebben vergroot.

Visuele hiërarchie door stijlen

Dynamic Type schaalt niet alleen — het behoudt visuele hiërarchie. Large Title is altijd groter dan Title 1, dat groter is dan Body, ongeacht het schalingsniveau. De schalingscoëfficiënten verschillen: koppen schalen actiever dan hoofdtekst, zodat de hiërarchie behouden blijft, zelfs op toegankelijkheidsniveaus.

Schalingsniveaus

iOS ondersteunt 11 niveaus van tekstschaling, verdeeld over twee categorieën:

• Standaardformaten (5 niveaus): XS, S, M, L (standaard), XL
• Toegankelijkheidsformaten (6 niveaus): accessibilityXL, accessibilityXXL, accessibilityXXXL, accessibilityXXXXL, accessibilityXXXXXL, accessibilityXXXXXXL

Het verschil tussen XS en AccessibilityXXXL voor de body-stijl is van 14px tot 53px — bijna 4×. Een lay-out ontworpen voor 17px gaat volledig kapot bij 53px: tekst valt buiten de grenzen, knoppen overlappen elkaar, cellen komen op elkaar.

Controleer de huidige categorie in code:

let category = UIApplication.shared.preferredContentSizeCategory
// .extraSmall, .small, .medium, .large, .extraLarge ...
if category.isAccessibilityCategory {
    // Alternatieve lay-out inschakelen
}

traitCollection en tekstgrootte

De categorie tekstgrootte is beschikbaar via traitCollection.uiContentSizeCategory. Bij het wijzigen van de systeeminstelling roept iOS traitCollectionDidChange aan op alle UIViews. In deze methode moeten lettertypen worden bijgewerkt en de lay-out worden herberekend. SwiftUI doet dit automatisch — UIKit vereist handmatig abonneren.

Gebruik voor UICollectionView UICollectionViewCompositionalLayout — dit past het aantal kolommen automatisch aan op basis van de schermbreedte en tekstgrootte. Schakel op toegankelijkheidsniveaus over van een twee-koloms naar een een-koloms lay-out, zodat tekst niet wordt afgesneden en elementen niet overlappen. Gebruik een conditionele lay-out: voor regular width — twee kolommen, voor compact of accessibility — één kolom.

Implementatie in UIKit

Basisimplementatie in UIKit — UIFont.preferredFont(forTextStyle:). Deze methode retourneert het lettertype geschaald op basis van de huidige systeeminstelling:

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

Gebruik voor aangepaste lettertypen UIFontMetrics:

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

// Wijzigingen in grootte volgen
NotificationCenter.default.addObserver(
    self,
    selector: #selector(preferredContentSizeChanged),
    name: UIContentSizeCategory.didChangeNotification,
    object: nil
)

Voor UILabel in Interface Builder volstaat het om het lettertype in te stellen als tekststijl (Text Style) en „Automatically Adjusts Font” in te schakelen. Voor aangepaste lettertypen ondersteunt IB geen UIFontMetrics — alleen via code.

UIFontMetrics en schalingscurve

UIFontMetrics gebruikt dezelfde schalingscurve als preferredFont. U kunt fromTextStyle: .body, .headline enz. instellen. Elke stijl heeft zijn eigen schalingscoëfficiënt. Body schaalt gematigd, Large Title — agressief. Als uw aangepaste lettertype voor hoofdtekst wordt gebruikt, gebruik dan .body.

Dynamic Type in SwiftUI

In SwiftUI is ondersteuning voor Dynamic Type standaard ingebouwd. Alle systeemmodifiers (.font(.body), .font(.title)) schalen automatisch. De ontwikkelaar hoeft UIFont.preferredFont niet aan te roepen.

Voorbeeld:

Text("Hoofdtekst")
    .font(.body)
    .lineLimit(nil)
    .minimumScaleFactor(0.5)

Gebruik voor aangepaste schalen DynamicTypeSize:

@Environment(\.dynamicTypeSize) var dynamicTypeSize

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

SwiftUI werkt de weergave automatisch bij bij wijziging van de systeemtekstgrootte — geen extra meldingsabonnementen nodig.

Beperking van Dynamic Type in SwiftUI

De modifier .font(.body) werkt alleen voor het systeemlettertype. Gebruik voor aangepaste lettertypen in SwiftUI Font.custom met UIFontMetrics onder de motorkap. Vanaf iOS 16 ondersteunt SwiftUI DynamicTypeSize in @Environment, waarmee afstanden en lay-out kunnen worden aangepast.

Lay-out aanpassen voor grote lettertypen

Auto Layout — verplichte voorwaarde voor Dynamic Type-ondersteuning. Vaste breedtes en hoogtes (>=, <=) breken bij toegankelijkheidsformaten. Gebruik intrinsicContentSize voor UILabel — dit berekent automatisch de hoogte op basis van het huidige lettertypeformaat.

Regels voor adaptieve lay-out:

• UIStackView met distribution = fill en spacing = >= 8 — elementen worden naar de volgende regel verplaatst
• UITableViewCell met automaticDimension — celhoogte past zich aan de inhoud aan
• numberOfLines = 0 op UILabel — tekst wordt niet afgesneden maar omgevouwen
• Knoppen met edgeInsets — voeg op toegankelijkheidsniveaus afstanden toe via traitCollection.preferredContentSizeCategory

Stel voor lange teksten (bijv. artikelen, gebruiksvoorwaarden) minimumScaleFactor in op UILabel — dit verkleint de tekst als laatste redmiddel wanneer Auto Layout de inhoud niet kan plaatsen. Waarde 0.5 betekent dat het lettertype tot 50% van het gewenste formaat kan worden verkleind.

Voorbeeld van het aanpassen van afstanden aan de groottecategorie:

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)

Veelvoorkomende lay-outproblemen op toegankelijkheidsniveaus

Tekst afsnijden — UILabel met numberOfLines = 1 en vaste breedte snijdt tekst af op AccessibilityXL. Oplossing: numberOfLines = 0 en trailing constraint. Overlappende elementen — knoppen met vaste hoogte overlappen elkaar. Oplossing: UIStackView met automatische afstand. Buiten scherm vallen — ScrollView is verplicht op toegankelijkheidsniveaus.

Dynamic Type testen

Xcode-simulator maakt het mogelijk het tekstformaat te wijzigen: in het simulatormenu Settings → Accessibility → Display & Text Size → Larger Text. Schakel tussen alle 11 niveaus en controleer of tekst niet wordt afgesneden, knoppen toegankelijk zijn en de lay-out niet kapot is.

Gebruik voor geautomatiseerd testen de instelling contentSizeCategory in XCUIApplication:

func testAccessibilitySizes() {
    let app = XCUIApplication()
    app.launchArguments += [
        "-UIPreferredContentSizeCategoryName",
        "UICTContentSizeCategoryAccessibilityXXXL"
    ]
    app.launch()
    app.scrollViews.buttons["Verzenden"].tap()
    XCTAssertTrue(app.staticTexts["Formulier verzonden"]
        .waitForExistence(timeout: 5))
}

XCUITest met verschillende launchArguments maakt het mogelijk alle schalingsniveaus in CI te controleren. Vergeet niet de toegankelijkheidscategorieën apart te controleren — zij breken het vaakst de lay-out. Volgens Apple wordt 70% van de Dynamic Type-fouten juist op toegankelijkheidsniveaus ontdekt, omdat ontwikkelaars alleen standaardformaten testen.

Accessibility Inspector: Dynamic Type controleren

Xcode Accessibility Inspector toont welke lettertypen het geselecteerde element gebruikt — vast of schaalbaar. Als het element niet reageert op tekstgrootteverandering in de simulator, wordt er een vast lettertype gebruikt. Vervang het door UIFont.preferredFont of UIFontMetrics.