SwiftUI Academy · Pelajaran

Dynamic Type & Font Berskala

Dukung teks yang lebih besar tanpa merusak layout.

Dynamic Type & Font Berskala adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

What Is Dynamic Type?

Dynamic Type lets users pick their preferred text size system-wide. Your app should respect it, not force one fixed size. 🔤

Use Text Styles

Pick semantic text styles like .title or .body instead of fixed point sizes. These scale automatically with the user's setting.

Text("Welcome")
    .font(.title)
Text("Details here")
    .font(.body)

Why Not Fixed Sizes

A hard-coded .font(.system(size: 17)) ignores the user's choice and stays small. Text styles adapt; fixed numbers don't.

Text("Stuck small")
    .font(.system(size: 17))

Scaling Custom Fonts

Have a brand font? Use .font(.custom:size:relativeTo:) so it still scales with a chosen text style.

Text("Brand")
    .font(.custom("Avenir", size: 17, relativeTo: .body))

The ScaledMetric Wrapper

Need a spacing or image size to grow with text? @ScaledMetric scales any number alongside Dynamic Type.

@ScaledMetric var iconSize = 24
Image(systemName: "star").frame(width: iconSize)

Let Text Wrap

Big text needs room. Avoid lineLimit(1) on important labels, or long words will be cut off with an ellipsis.

Text(longTitle)
    .lineLimit(2)

Allow Tighter Fitting

When space is truly tight, minimumScaleFactor lets text shrink a little before truncating, keeping it readable.

Text(price)
    .minimumScaleFactor(0.7)

Preview Large Sizes

Use dynamicTypeSize in a preview to simulate the largest setting and catch broken layouts early.

#Preview {
    ContentView()
        .dynamicTypeSize(.accessibility3)
}

Cap the Range If Needed

You can limit how far text scales with dynamicTypeSize(...), but cap sparingly so you don't shut out users who need more.

VStack { }
    .dynamicTypeSize(...DynamicTypeSize.accessibility1)

Stacks Over Fixed Frames

Prefer flexible stacks over rigid heights. A fixed frame can clip large text, while a stack grows to fit.

Test at Both Ends

Check your app at the smallest and the largest Dynamic Type sizes. If both read well, most users in between will too.

Quick Check

You want a custom brand font to grow with the user's text size. What do you use?

Recap

You made text adapt: choose semantic text styles, scale custom fonts and metrics, let text wrap, and test the largest size. 👍

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dynamic Type & Font Berskala” gratis?

Ya — teks lengkap “Dynamic Type & Font Berskala” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dynamic Type & Font Berskala”?

Dukung teks yang lebih besar tanpa merusak layout. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Dynamic Type & Font Berskala” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy