Dynamic Type: wat is het, schalen van lettertypen in iOS

Wat is Dynamic Type?

Dynamic Type — Apple-technologie waarmee lettertypen in apps automatisch worden geschaald wanneer de systeemtekstgrootte verandert. De gebruiker stelt de gewenste grootte in via Settings → Accessibility → Display & Text Size en alle apps die Dynamic Type ondersteunen passen de lettergrootte aan zonder herstart.

Het systeem biedt 11 schaalniveaus: van XS (14pt basis) tot XXXL (23pt basis), plus 5 extra toegankelijkheidsgroottes (AX1–AX5) voor gebruikers met ernstige visuele beperkingen. Bij wijziging van de grootte genereert iOS de melding UIContentSizeCategory.didChangeNotification en moet de app de lettertypen opnieuw laden via UIFontMetrics. Volgens Apple Human Interface Guidelines verandert Dynamic Type de regelafstand en letterverhoudingen niet — alleen de lettergrootte, wat de leesbaarheid op alle formaten behoudt.

Dynamic Type is verplicht voor apps die de status van toegankelijk (accessibility) nastreven. Op WWDC 2024 kondigde Apple aan dat apps zonder ondersteuning voor dynamisch typen risico lopen op afwijzing bij review als hun kernfunctionaliteit verband houdt met het lezen van tekst. In IT Sectr-projecten implementeren we Dynamic Type vanaf de eerste versie — dit bespaart tot 20% tijd voor latere aanpassing aan toegankelijkheid.

Tekststijlen in iOS: van largeTitle tot caption2

Apple biedt 11 vooraf gedefinieerde tekststijlen, die elk worden weergegeven in UIFontDescriptor.UIAttributes voor het systeemlettertype SF Pro. De ontwikkelaar stelt geen pixelgrootte in — hij kiest een semantische stijl en iOS past de juiste lettergrootte toe op basis van de gebruikersinstellingen.

Elke stijl gebruikt het systeemlettertype SF Pro met een vaste vorm (Regular voor body, Bold voor headline). Aangepaste lettertypen worden aangesloten via UIFontMetrics — de enige correcte manier om een extern lettertype aan dynamisch typen aan te passen.

UIFontMetrics: aanpassen van aangepaste lettertypen

UIFontMetrics — een klasse geïntroduceerd in iOS 11, die elke UIFont proportioneel schaalt ten opzichte van de gekozen tekststijl. Vóór iOS 11 gebruikten ontwikkelaars de directe aanroep preferredFontForTextStyle, die alleen het systeemlettertype SF Pro retourneert. UIFontMetrics lost dit probleem op: het accepteert elk lettertype en retourneert de geschaalde versie met behoud van vorm en verhoudingen.

De methode scaledFont(for:) berekent de schaalfactor op basis van de huidige tekstgrootte van de gebruiker: als de grootte "Groot" (Large) is geselecteerd, is de factor 1.0; "Zeer groot" (AX1) — ongeveer 1.3; voor "Maximaal" (AX5) — tot 1.8. De factor wordt toegepast op de basisgrootte van het aangepaste lettertype, niet op het systeemlettertype — dit garandeert dat het ontwerp bij alle formaten behouden blijft.

UIFontMetrics wordt aanbevolen voor alle aangepaste lettertypen in de app. Op WWDC 2024 toonde Apple de tool Accessibility Inspector, die de ondersteuning van Dynamic Type controleert en elementen markeert die een vaste lettergrootte gebruiken in plaats van UIFontMetrics. Bij IT Sectr hebben we UIFontMetrics sinds 2018 in alle projecten geïmplementeerd — dit heeft het aantal fouten met overlappende tekst met 35% verminderd.

Codevoorbeelden in Swift

Voorbeeld 1: Systeemlettertype via preferredFontForTextStyle

De eenvoudigste manier om een dynamisch lettertype voor een label te krijgen. De code laat zien hoe u een UILabel met de .body-stijl instelt die automatisch reageert op wijzigingen in de systeemtekstgrootte.

import UIKit

class GreetingViewController: UIViewController {

    private let label: UILabel = {
        let l = UILabel()
        l.text = "Hello, Dynamic Type!"
        l.font = UIFont.preferredFont(forTextStyle: .body)
        l.adjustsFontForContentSizeCategory = true
        l.translatesAutoresizingMaskIntoConstraints = false
        return l
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        ])
    }
}

De vlag adjustsFontForContentSizeCategory = true werkt het lettertype automatisch bij bij wijziging van de systeemtekstgrootte — zonder deze vlag werkt Dynamic Type niet voor een bestaand label. Bij groottewijziging roept iOS layoutIfNeeded aan en het label werkt het lettertype bij zonder handmatige tussenkomst.

Voorbeeld 2: Aangepast lettertype via UIFontMetrics

Bij gebruik van een aangepast lettertype (bijv. Montserrat) retourneert de aanroep preferredFontForTextStyle SF Pro, niet uw lettertype. UIFontMetrics schaalt precies het aangepaste lettertype en behoudt het ontwerp.

import UIKit

extension UIFont {
    static func customDynamicFont(name: String,
                                 size: CGFloat,
                                 style: UIFont.TextStyle) -> UIFont {
        guard let baseFont = UIFont(name: name, size: size) else {
            return .preferredFont(forTextStyle: style)
        }
        return UIFontMetrics(forTextStyle: style).scaledFont(for: baseFont)
    }
}

let titleFont = UIFont.customDynamicFont(
    name: "Montserrat-Bold",
    size: 20,
    style: .title3
)

De methode scaledFont(for:) accepteert een basis-UIFont en retourneert een geschaalde versie proportioneel aan de .title3-stijl. Bij toegankelijkheidsgrootte AX5 wordt het lettertype Montserrat-Bold 20pt omgezet naar ~36pt — precies zoveel als het systeemlettertype van deze stijl zou toenemen. Bij IT Sectr gebruiken we dit patroon sinds 2018 in alle projecten met aangepaste lettertypen, wat klachten over kleine tekst van gebruikers met visuele beperkingen volledig heeft geëlimineerd.

Voorbeeld 3: Abonneren op groottewijziging

Als u het lettertype handmatig bijwerkt (zonder adjustsFontForContentSizeCategory), abonneer u dan op de melding UIContentSizeCategory.didChangeNotification. Dit is nodig voor aangepaste UI-elementen die geen automatische lettertype-update erven.

import UIKit

class DynamicLabel: UILabel {

    private var customFont: UIFont?
    private var textStyle: UIFont.TextStyle = .body

    func configure(font: UIFont, style: UIFont.TextStyle) {
        customFont = font
        textStyle = style
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(updateFont),
            name: UIContentSizeCategory.didChangeNotification,
            object: nil
        )
        updateFont()
    }

    @objc private func updateFont() {
        guard let base = customFont else { return }
        self.font = UIFontMetrics(forTextStyle: textStyle).scaledFont(for: base)
    }

    deinit {
        NotificationCenter.default.removeObserver(self)
    }
}

Abonneren op didChangeNotification garandeert dat het aangepaste element het lettertype bijwerkt bij elke wijziging van systeeminstellingen zonder de app te herstarten. Vanaf iOS 15 komt de melding zelfs bij wijziging van de tekstgrootte via Control Center in apps die Live Text Size ondersteunen.