Dynamic Type: apa itu, penskalaan font di iOS

Apa itu Dynamic Type?

Dynamic Type — teknologi Apple yang memungkinkan font aplikasi untuk secara otomatis diskalakan saat ukuran teks sistem berubah. Pengguna mengatur ukuran yang diinginkan di Settings → Accessibility → Display & Text Size, dan semua aplikasi yang mendukung Dynamic Type menyesuaikan ukuran huruf tanpa memulai ulang.

Sistem menawarkan 11 tingkat penskalaan: dari XS (14pt dasar) hingga XXXL (23pt dasar), serta 5 ukuran aksesibilitas tambahan (AX1–AX5) untuk pengguna dengan gangguan penglihatan parah. Saat ukuran berubah, iOS menghasilkan pemberitahuan UIContentSizeCategory.didChangeNotification, dan aplikasi harus membaca ulang font melalui UIFontMetrics. Menurut Apple Human Interface Guidelines, Dynamic Type tidak mengubah jarak antar baris dan proporsi huruf — hanya ukuran huruf, yang mempertahankan keterbacaan di semua ukuran.

Dynamic Type wajib bagi aplikasi yang mengincar status aksesibilitas (accessibility). Di WWDC 2024, Apple mengumumkan bahwa aplikasi tanpa dukungan tipe dinamis berisiko ditolak saat review jika fungsionalitas utamanya terkait dengan pembacaan teks. Di proyek IT Sectr, kami menerapkan Dynamic Type sejak versi pertama — ini menghemat hingga 20% waktu untuk adaptasi aksesibilitas di kemudian hari.

Gaya teks iOS: dari largeTitle hingga caption2

Apple menyediakan 11 gaya teks yang telah ditentukan sebelumnya, yang masing-masing ditampilkan di UIFontDescriptor.UIAttributes untuk font sistem SF Pro. Pengembang tidak menentukan ukuran piksel — ia memilih gaya semantik, dan iOS menerapkan ukuran huruf yang sesuai tergantung pada pengaturan pengguna.

Setiap gaya menggunakan font sistem SF Pro dengan bentuk tetap (Regular untuk body, Bold untuk headline). Font kustom dihubungkan melalui UIFontMetrics — satu-satunya cara yang benar untuk mengadaptasi font pihak ketiga ke tipe dinamis.

UIFontMetrics: adaptasi font kustom

UIFontMetrics — kelas yang diperkenalkan di iOS 11, yang menskalakan UIFont apa pun secara proporsional dengan gaya teks yang dipilih. Sebelum iOS 11, pengembang menggunakan panggilan langsung preferredFontForTextStyle, yang hanya mengembalikan font sistem SF Pro. UIFontMetrics memecahkan masalah ini: ia menerima font apa pun dan mengembalikan versi yang telah diskalakan, mempertahankan bentuk dan proporsi.

Metode scaledFont(for:) menghitung faktor penskalaan berdasarkan ukuran teks pengguna saat ini: jika ukuran "Besar" (Large) dipilih, faktornya adalah 1.0; jika "Sangat besar" (AX1) — sekitar 1.3; untuk "Maksimal" (AX5) — hingga 1.8. Faktor diterapkan pada ukuran dasar font kustom, bukan pada font sistem — ini memastikan bahwa desain tetap terjaga di semua ukuran.

UIFontMetrics direkomendasikan untuk semua font kustom dalam aplikasi. Di WWDC 2024, Apple menunjukkan alat Accessibility Inspector, yang memeriksa dukungan Dynamic Type dan menyoroti elemen yang menggunakan ukuran tetap alih-alih UIFontMetrics. Di IT Sectr, kami telah menerapkan UIFontMetrics di semua proyek sejak 2018 — ini mengurangi jumlah bug teks yang tumpang tindih hingga 35%.

Contoh kode dalam Swift

Contoh 1: Font sistem melalui preferredFontForTextStyle

Cara paling sederhana untuk mendapatkan font dinamis untuk label. Kode menunjukkan cara mengatur UILabel dengan gaya .body yang secara otomatis bereaksi terhadap perubahan ukuran teks sistem.

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),
        ])
    }
}

Bendera adjustsFontForContentSizeCategory = true secara otomatis memperbarui font saat ukuran teks sistem berubah — tanpa bendera ini Dynamic Type tidak akan berfungsi untuk label yang ada. Saat ukuran berubah, iOS memanggil layoutIfNeeded, dan label memperbarui font tanpa campur tangan manual.

Contoh 2: Font kustom melalui UIFontMetrics

Saat menggunakan font kustom (misalnya Montserrat), panggilan preferredFontForTextStyle akan mengembalikan SF Pro, bukan font Anda. UIFontMetrics menskalakan tepat font kustom, mempertahankan desainnya.

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
)

Metode scaledFont(for:) menerima UIFont dasar dan mengembalikan versi yang diskalakan secara proporsional dengan gaya .title3. Pada ukuran aksesibilitas AX5, font Montserrat-Bold 20pt berubah menjadi ~36pt — persis sebanyak font sistem gaya ini akan meningkat. Di IT Sectr, kami menggunakan pola ini di semua proyek dengan font kustom sejak 2018, yang sepenuhnya menghilangkan keluhan tentang teks kecil dari pengguna dengan keterbatasan penglihatan.

Contoh 3: Berlangganan perubahan ukuran

Jika Anda memperbarui font secara manual (tanpa adjustsFontForContentSizeCategory), berlangganlah pemberitahuan UIContentSizeCategory.didChangeNotification. Ini diperlukan untuk elemen UI kustom yang tidak mewarisi pembaruan font otomatis.

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)
    }
}

Berlangganan didChangeNotification memastikan bahwa elemen kustom memperbarui font pada setiap perubahan pengaturan sistem tanpa memulai ulang aplikasi. Mulai iOS 15, pemberitahuan datang bahkan saat mengubah ukuran teks melalui Control Center di aplikasi yang mendukung Live Text Size.