Dynamic Type: konsep kunci, gaya teks, dan cara kerjanya di iOS

Apa itu Dynamic Type di iOS

Dynamic Type — teknologi iOS, muncul di iOS 7, yang memungkinkan teks dalam aplikasi secara otomatis menyesuaikan dengan pengaturan sistem ukuran font. Pengguna dapat memperbesar atau memperkecil font di semua aplikasi sekaligus — tanpa perlu mengubah pengaturan di setiap aplikasi secara terpisah.

Menurut Apple WWDC 2023, “Make Your App Visually Accessible”, lebih dari 40% pengguna iOS mengubah ukuran font dari standar. Untuk kelompok usia 65+, angka ini mencapai 70%. Dynamic Type adalah persyaratan wajib untuk sertifikasi aksesibilitas App Store. Kurangnya dukungan menjadi alasan penolakan aplikasi saat peninjauan.

Prinsip kerja: aplikasi menggunakan UIFont.preferredFont(forTextStyle:) alih-alih UIFont(name:size:). iOS secara otomatis mengembalikan font yang diskalakan sesuai pengaturan sistem saat ini. Saat ukuran diubah di pengaturan, iOS menghasilkan pemberitahuan UIContentSizeCategory.didChangeNotification — aplikasi harus menghitung ulang tata letak.

Sejarah Pengembangan Dynamic Type

Dynamic Type muncul di iOS 7 bersama dengan desain “datar”. Di iOS 10, dukungan untuk font kustom ditambahkan melalui UIFontMetrics. iOS 11 memperkenalkan tingkat aksesibilitas (hingga AccessibilityXXXL). iOS 15 menambahkan Dynamic Type di SwiftUI dengan dukungan otomatis. Dengan setiap rilis, Apple memperketat persyaratan: mulai iOS 17, aplikasi tanpa dukungan Dynamic Type menerima peringatan saat diunggah ke App Store Connect.

Gaya Teks UIFont.TextStyle

iOS menyediakan 8 gaya teks, masing-masing dengan ukuran dan tampilan yang telah ditentukan untuk pengaturan standar:

Menggunakan gaya yang tepat bukan hanya soal “penampilan”. UIFont.TextStyle.body dalam mode AccessibilityXXXL dapat mencapai 53px. Jika aplikasi menggunakan font tetap 17px untuk body, teks akan menjadi tidak terbaca bagi pengguna yang memperbesar font.

Hierarki Visual melalui Gaya

Dynamic Type tidak hanya menskalakan — ia mempertahankan hierarki visual. Large Title selalu lebih besar dari Title 1, yang lebih besar dari Body, terlepas dari tingkat penskalaan. Koefisien penskalaan berbeda: judul diskalakan lebih aktif daripada teks utama, sehingga hierarki tetap terjaga bahkan pada tingkat aksesibilitas.

Tingkat Penskalaan

iOS mendukung 11 tingkat penskalaan teks, dibagi menjadi dua kategori:

• Ukuran standar (5 tingkat): XS, S, M, L (default), XL
• Ukuran aksesibilitas (6 tingkat): accessibilityXL, accessibilityXXL, accessibilityXXXL, accessibilityXXXXL, accessibilityXXXXXL, accessibilityXXXXXXL

Perbedaan antara XS dan AccessibilityXXXL untuk gaya body adalah dari 14px hingga 53px — hampir 4×. Tata letak yang dirancang untuk 17px akan rusak total pada 53px: teks keluar dari batas, tombol saling tumpang tindih, sel bertumpukan.

Periksa kategori saat ini dalam kode:

let category = UIApplication.shared.preferredContentSizeCategory
// .extraSmall, .small, .medium, .large, .extraLarge ...
if category.isAccessibilityCategory {
    // Aktifkan tata letak alternatif
}

traitCollection dan Ukuran Teks

Kategori ukuran teks tersedia melalui traitCollection.uiContentSizeCategory. Saat pengaturan sistem berubah, iOS memanggil traitCollectionDidChange pada semua UIView. Dalam metode ini, font harus diperbarui dan tata letak dihitung ulang. SwiftUI melakukannya secara otomatis — UIKit memerlukan langganan manual.

Untuk UICollectionView, gunakan UICollectionViewCompositionalLayout — ini secara otomatis menyesuaikan jumlah kolom dengan lebar layar dan ukuran teks. Pada tingkat aksesibilitas, beralihlah dari tata letak dua kolom ke satu kolom agar teks tidak terpotong dan elemen tidak saling tumpang tindih. Gunakan tata letak bersyarat: untuk regular width — dua kolom, untuk compact atau accessibility — satu kolom.

Implementasi di UIKit

Implementasi dasar di UIKit — UIFont.preferredFont(forTextStyle:). Metode ini mengembalikan font yang diskalakan sesuai pengaturan sistem saat ini:

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

Untuk font kustom gunakan UIFontMetrics:

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

// Memantau perubahan ukuran
NotificationCenter.default.addObserver(
    self,
    selector: #selector(preferredContentSizeChanged),
    name: UIContentSizeCategory.didChangeNotification,
    object: nil
)

Untuk UILabel di Interface Builder, cukup atur font sebagai gaya teks (Text Style) dan aktifkan “Automatically Adjusts Font”. Untuk font kustom, IB tidak mendukung UIFontMetrics — hanya melalui kode.

UIFontMetrics dan Kurva Penskalaan

UIFontMetrics menggunakan kurva penskalaan yang sama dengan preferredFont. Anda dapat mengatur fromTextStyle: .body, .headline, dll. Setiap gaya memiliki koefisien penskalaannya sendiri. Body diskalakan secara moderat, Large Title — secara agresif. Jika font kustom Anda digunakan untuk teks utama, gunakan .body.

Dynamic Type di SwiftUI

Di SwiftUI, dukungan untuk Dynamic Type sudah terpasang secara default. Semua pengubah sistem (.font(.body), .font(.title)) secara otomatis diskalakan. Pengembang tidak perlu memanggil UIFont.preferredFont.

Contoh:

Text("Teks utama")
    .font(.body)
    .lineLimit(nil)
    .minimumScaleFactor(0.5)

Untuk skala kustom gunakan DynamicTypeSize:

@Environment(\.dynamicTypeSize) var dynamicTypeSize

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

SwiftUI secara otomatis memperbarui tampilan saat ukuran teks sistem berubah — tanpa langganan pemberitahuan tambahan.

Keterbatasan Dynamic Type di SwiftUI

Pengubah .font(.body) hanya berfungsi untuk font sistem. Untuk font kustom di SwiftUI, gunakan Font.custom dengan UIFontMetrics di balik layar. Mulai iOS 16, SwiftUI mendukung DynamicTypeSize di @Environment, yang memungkinkan penyesuaian jarak dan tata letak.

Adaptasi Tata Letak untuk Font Besar

Auto Layout — syarat wajib untuk dukungan Dynamic Type. Lebar dan tinggi tetap (>=, <=) akan rusak pada ukuran aksesibilitas. Gunakan intrinsicContentSize untuk UILabel — ini secara otomatis menghitung tinggi berdasarkan ukuran font saat ini.

Aturan tata letak adaptif:

• UIStackView dengan distribution = fill dan spacing = >= 8 — elemen akan dipindahkan ke baris berikutnya
• UITableViewCell dengan automaticDimension — tinggi sel menyesuaikan dengan konten
• numberOfLines = 0 pada UILabel — teks tidak terpotong tetapi membungkus
• Tombol dengan edgeInsets — tambahkan jarak pada tingkat aksesibilitas melalui traitCollection.preferredContentSizeCategory

Untuk teks panjang (misalnya artikel, persyaratan penggunaan), atur minimumScaleFactor pada UILabel — ini memperkecil teks sebagai upaya terakhir ketika Auto Layout tidak dapat memuat konten. Nilai 0.5 berarti font dapat diperkecil hingga 50% dari ukuran yang diinginkan.

Contoh penyesuaian jarak dengan kategori ukuran:

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)

Masalah Tata Letak Umum pada Tingkat Aksesibilitas

Pemotongan teks — UILabel dengan numberOfLines = 1 dan lebar tetap memotong teks pada AccessibilityXL. Solusi: numberOfLines = 0 dan trailing constraint. Tumpang tindih elemen — tombol dengan tinggi tetap saling bertumpukan. Solusi: UIStackView dengan jarak otomatis. Keluar dari batas layar — ScrollView wajib pada tingkat aksesibilitas.

Pengujian Dynamic Type

Simulator Xcode memungkinkan perubahan ukuran teks: di menu simulator Settings → Accessibility → Display & Text Size → Larger Text. Beralihlah di antara semua 11 tingkat dan periksa apakah teks tidak terpotong, tombol dapat diakses, dan tata letak tidak rusak.

Untuk pengujian otomatis gunakan pengaturan contentSizeCategory di XCUIApplication:

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

XCUITest dengan berbagai launchArguments memungkinkan pemeriksaan semua tingkat penskalaan di CI. Jangan lupa untuk memeriksa kategori aksesibilitas secara terpisah — mereka paling sering merusak tata letak. Menurut Apple, 70% bug Dynamic Type terdeteksi tepat pada tingkat aksesibilitas, karena pengembang hanya menguji ukuran standar.

Accessibility Inspector: Memeriksa Dynamic Type

Xcode Accessibility Inspector menunjukkan font apa yang digunakan elemen yang dipilih — tetap atau dapat diskalakan. Jika elemen tidak merespons perubahan ukuran teks di simulator, berarti font tetap digunakan. Ganti dengan UIFont.preferredFont atau UIFontMetrics.