Hierarki dikomunikasikan melalui perbedaan ketebalan font, ukuran, tinggi garis, dan spasi huruf. Skala huruf yang diperbarui mengatur gaya menjadi enam peran yang diberi nama untuk menjelaskan tujuannya: display, title, label, body, numeral, dan arc. Peran baru ini tidak bergantung pada ukuran layar sehingga memungkinkan penerapan yang lebih mudah di berbagai kasus penggunaan.
Gaya tampilan
Tampilan digunakan untuk string teks besar dan pendek yang digunakan untuk menampilkan informasi penting yang sangat mudah dilihat, metrik penting, keyakinan, atau momen merek yang ekspresif.
- DisplayLarge adalah judul terbesar. Tampilan adalah teks terbesar di layar, khusus untuk informasi penting yang singkat dan mudah dilihat, metrik penting, keyakinan, atau momen merek ekspresif yang diuntungkan dari skala dan gaya yang mencolok.
- DisplayMedium adalah judul terbesar kedua. Tampilan adalah teks terbesar di layar, khusus untuk informasi penting yang singkat dan mudah dilihat, metrik penting, keyakinan, atau momen merek ekspresif yang diuntungkan dari skala dan gaya yang mencolok.
- DisplaySmall adalah judul terkecil. Tampilan adalah teks terbesar di layar, khusus untuk informasi penting yang singkat dan mudah dilihat, metrik penting, keyakinan, atau momen merek ekspresif yang diuntungkan dari skala dan gaya yang mencolok.
Judul
Judul adalah teks hierarkis yang digunakan sebagai mekanisme untuk menemukan arah, seperti halaman, judul bagian, atau judul sub-bagian (dalam kasus TitleSmall).
- TitleLarge adalah judul terbesar. Judul lebih kecil daripada Tampilan. Biasanya digunakan untuk teks dengan penekanan sedang yang lebih pendek dan tidak direkomendasikan untuk komponen interaktif, melainkan judul atau subjudul halaman.
- TitleMedium adalah judul sedang. Judul lebih kecil daripada Tampilan. Biasanya digunakan untuk teks dengan penekanan sedang yang lebih pendek dan tidak direkomendasikan untuk komponen interaktif, melainkan judul atau subjudul halaman.
- TitleSmall adalah judul terkecil. Judul lebih kecil daripada Tampilan. Biasanya digunakan untuk teks dengan penekanan sedang yang lebih pendek dan tidak direkomendasikan untuk komponen interaktif, melainkan judul atau subjudul halaman.
Label
Label digunakan untuk teks tingkat komponen yang menjelaskan tindakan yang akan terjadi jika berinteraksi. Aplikasi yang paling umum dan banyak digunakan untuk label adalah untuk teks yang berada dalam tombol.
- LabelLarge adalah label terbesar. Label digunakan untuk menampilkan teks penting seperti label pada tombol judul, yang diterapkan ke komponen interaktif.
- LabelMedium adalah label sedang, dan yang paling umum digunakan. Label digunakan untuk menampilkan teks seperti label utama pada tombol, diterapkan ke komponen interaktif.
- LabelSmall adalah label kecil. Label digunakan untuk menampilkan teks seperti label sekunder pada tombol, label pada tombol ringkas, diterapkan ke komponen interaktif.
Isi
Body dicadangkan untuk teks konten seperti paragraf teks isi, teks yang digunakan dalam visualisasi data yang kompleks, stempel waktu, dan metadata.
- BodyLarge adalah ukuran body terbesar. Teks isi biasanya digunakan untuk penulisan tipografi panjang karena berfungsi cukup baik untuk ukuran teks kecil. Untuk bagian teks yang lebih panjang, sebaiknya gunakan jenis huruf serif atau sans serif.
- BodyMedium adalah ukuran body terbesar kedua. Teks isi biasanya digunakan untuk penulisan tipografi panjang karena berfungsi cukup baik untuk ukuran teks kecil. Untuk bagian teks yang lebih panjang, sebaiknya gunakan jenis huruf serif atau sans serif.
- BodySmall adalah ukuran body terbesar ketiga. Teks isi biasanya digunakan untuk penulisan tipografi panjang karena berfungsi cukup baik untuk ukuran teks kecil. Untuk bagian teks yang lebih panjang, sebaiknya gunakan jenis huruf serif atau sans serif.
- BodyExtraSmall adalah ukuran body terkecil. Teks isi biasanya digunakan untuk penulisan tipografi panjang karena berfungsi cukup baik untuk ukuran teks kecil. Untuk bagian teks yang lebih panjang, sebaiknya gunakan jenis huruf serif atau sans serif.
Angka
Gaya teks angka digunakan untuk digit angka, biasanya terbatas pada beberapa karakter. Dapat memiliki properti yang lebih ekspresif pada ukuran tampilan yang lebih besar. Memberikan fleksibilitas untuk memperluas sumbu lebar dengan masalah penskalaan font dan pelokalan minimal.
- NumeralsExtraLarge adalah peran terbesar untuk digit. Angka menggunakan spasi tabular secara default. Mereka menyoroti dan mengekspresikan angka yang dapat dilihat sekilas yang hanya dibatasi hingga dua atau tiga karakter, yang tidak memerlukan pelokalan seperti layar pengisian daya atau pemilih waktu.
- NumeralsLarge adalah peran terbesar kedua untuk digit. Angka menggunakan penspasian tabular secara default. String angka berukuran besar ini terbatas pada tampilan waktu yang besar, yang tidak memerlukan pelokalan seperti hitung mundur timer atau pemilih waktu.
- NumeralsMedium adalah peran terbesar ketiga untuk digit. Angka menggunakan penspasian tabular secara default. Ini adalah angka berukuran sedang yang terbatas pada string digit pendek, yang tidak memerlukan pelokalan seperti jumlah langkah atau pemilih waktu.
- NumeralsSmall adalah peran terbesar keempat untuk digit. Angka menggunakan penspasian tabular secara default. Gaya ini digunakan untuk angka yang perlu ditekankan dalam skala yang lebih kecil, yang tidak memerlukan pelokalan seperti pemilih tanggal dan waktu.
- NumeralsExtraSmall adalah peran terkecil untuk digit. Angka menggunakan spasi tabular secara default. Format ini digunakan untuk angka yang perlu mengakomodasi string digit yang lebih panjang, yang tidak memerlukan pelokalan seperti metrik dalam latihan.
Busur
Teks header busur digunakan untuk teks melengkung yang membentuk penanda di UI seperti teks waktu dan label melengkung. Sumbu font yang disesuaikan yang secara khusus mengoptimalkan huruf di sepanjang kurva dan untuk mengakomodasi jarak yang berbeda yang muncul di antara karakter saat diposisikan di bagian atas, dibandingkan dengan bagian bawah, layar melengkung.
Top
- ArcLarge adalah untuk header dan judul arc. Arc adalah untuk teks di sepanjang jalur melengkung di layar, yang dikhususkan untuk string teks header pendek di bagian paling atas atau bawah layar seperti overlay konfirmasi.
- ArcMedium adalah untuk header dan judul arc. Arc adalah untuk teks di sepanjang jalur melengkung di layar, yang dikhususkan untuk string teks header pendek di bagian paling atas atau bawah layar seperti judul halaman.
- ArcSmall adalah untuk string teks busur terbatas. Arc adalah untuk teks di sepanjang jalur melengkung di layar, yang dikhususkan untuk string teks melengkung pendek di bagian atas layar seperti teks waktu.
Bawah
- ArcLarge adalah untuk header dan judul arc. Arc adalah untuk teks di sepanjang jalur melengkung di layar, yang dikhususkan untuk string teks header pendek di bagian paling atas atau bawah layar seperti overlay konfirmasi.
- ArcMedium adalah untuk header dan judul arc. Arc adalah untuk teks di sepanjang jalur melengkung di layar, yang dikhususkan untuk string teks header pendek di bagian paling atas atau bawah layar seperti judul halaman.
- ArcSmall adalah untuk string teks busur terbatas. Arc adalah untuk teks di sepanjang jalur melengkung di layar, yang dikhususkan untuk string teks melengkung pendek di bagian bawah layar seperti pesan ajakan (CTA).
Pengetikan
Tata huruf vertikal mengandalkan padding, kotak pembatas, dan garis dasar untuk memastikan keterbacaan teks dalam ukuran apa pun. Pertimbangkan aspek teknik dan konvensi platform Anda saat membuat keputusan untuk penataan huruf, pengubahan ukuran teks, kepadatan, dan penggunaan teks dalam tata letak adaptif.
Menggunakan tolok ukur
Baseline adalah garis tidak terlihat yang menjadi dasar teks. Dalam Desain Material, garis dasar adalah spesifikasi penting dalam mengukur jarak vertikal antara teks dan elemen.
Memeriksa keterbacaan
Untuk meningkatkan keterbacaan font yang ditampilkan di aplikasi Anda, selesaikan pemeriksaan keterbacaan ini.
Angka tabular dan mono
Gunakan angka tabular (juga dikenal sebagai angka monospasi) daripada angka proporsional di tempat yang nilainya dapat sering berubah atau beranimasi atau memiliki nilai yang berubah dengan cepat, seperti timer hitung mundur, pemilih, atau metrik kebugaran yang sedang berlangsung.
Gunakan angka tabular monospace agar nilai tetap selaras secara visual untuk pemindaian dan penyelarasan yang lebih baik, serta untuk menghindari angka atau teks yang berdekatan melompat-lompat.
Tinggi baris
Tinggi baris adalah ruang di antara setiap baris teks dan terhubung langsung dengan ukuran huruf. Di Watch, ruang vertikal terbatas, sehingga tinggi baris dioptimalkan untuk memastikan keterbacaan, sekaligus memaksimalkan jumlah baris teks yang terlihat dalam area tampilan.
Tinggi baris tambahan
Di Jetpack Compose, dan di Android, tipografi otomatis mendapatkan tinggi baris tambahan di baris terakhir untuk mencegah karakter yang lebih panjang tumpang-tindih. Inilah alasan beberapa pengujian screenshot tidak selaras dengan sempurna.
Panduan cepat tinggi baris tambahan
| Gaya default (ukuran teks / tinggi baris) | Tinggi baris default di setiap baris | Tinggi baris tambahan hanya pada baris bawah | Perhitungan |
|---|---|---|---|
| 60 / 60 | 0 (100%) | + 15 (125%) | 60 / 75 (15/125%) (60+15) |
| 50 / 50 | 0 (100%) | + 13 (126%) | 50 / 63 (13/126%) (50+13) |
| 40 / 44 | 4 (110%) | + 7 (127,5%) | 40 / 51 (11/127,5%) (44+7) |
| 30 / 34 | 4 (113%) | + 3 (123,3%) | 30 / 37 (7/123,3%) (34+3) |
| 24 / 26 | 2 (108%) | + 4 (125%) | 24 / 30 (6/125%) (26+4) |
| 20 / 22 | 2 (110%) | + 3 (125%) | 20 / 25 (5/125%) (22+3) |
| 18 / 20 | 2 (111%) | + 3 (125%) | 18 / 23 (5/125%) (20+3) |
| 16 / 18 | 2 (112,5%) | + 2 (125%) | 16 / 20 (4/125%) (18+2) |
| 15 / 18 | 3 (120%) | + 1 (126,6%) | 15 / 19 (4/126,6%) (18+1) |
| 14 / 16 | 2 (114%) | + 2 (128,5%) | 14 / 18 (4/128,5%) (16+2) |
| 13 / 16 | 3 (123%) | + 0 (123%) | 13 / 16 (3/123%) (16+0) |
| 12 / 14 | 2 (116,6%) | + 1 (125%) | 12 / 15 (3/125%) (14+1) |
| 10 / 12 | 2 (120%) | + 0 (120%) | 10 / 12 (2/120%) (12+0) |