Tipografi di Aplikasi Windows
Sebagai representasi visual bahasa, tugas utama tipografi adalah mengomunikasikan informasi. Gayanya seharusnya tidak pernah menghalangi tujuan itu. Dalam artikel ini, kita akan membahas cara menata tipografi di aplikasi Windows Anda untuk membantu pengguna memahami konten dengan mudah dan efisien.
Font
Anda harus menggunakan satu font di seluruh UI aplikasi Anda, dan sebaiknya tetap menggunakan font default untuk aplikasi Windows, Variabel UI Segoe. Ini dirancang untuk menjaga legibilitas optimal di seluruh ukuran dan kepadatan piksel dan menawarkan estetika yang bersih, ringan, dan terbuka yang melengkapi konten sistem.
Untuk menampilkan bahasa non-bahasa Inggris atau memilih font yang berbeda untuk aplikasi Anda, silakan lihat Bahasa dan Font untuk font yang direkomendasikan untuk aplikasi Windows.
Pilih satu font untuk UI Anda.
Jangan mencampur beberapa font.
Sumbu font variabel
Font Variabel UI Segoe berisi dua sumbu untuk kontrol teks yang lebih halus. Font ini memiliki sumbu bobot (wght) dengan bobot dari Tipis (100) hingga Tebal (700). Ini juga memiliki sumbu ukuran optik (opsz) untuk penskalaan optik dari 8pt hingga 36pt. Saat menggunakan kontrol umum XAML, font Variabel Segoe UI akan dipilih secara default untuk bahasa yang didukung. Ketika font ini atau font variabel lain dengan sumbu optik digunakan, ukuran optik akan secara otomatis cocok dengan ukuran font yang diminta. Saat menggunakan HTML, penskalaan optik juga otomatis, tetapi Anda harus menentukan font Segoe UI Variable di CSS.
Ukuran dan penskalan
Ukuran font di aplikasi UWP secara otomatis diskalakan di semua perangkat. Algoritma penskalaan memastikan bahwa font 24 px di Surface Hub berjarak 10 kaki sama mudahnya dengan font 24 px pada ponsel 5" yang berjarak beberapa inci.
Karena cara kerja sistem penskalaan, Anda merancang dalam piksel yang efektif, bukan piksel fisik aktual, dan Anda tidak perlu mengubah ukuran font untuk ukuran atau resolusi layar yang berbeda.
Ikuti ukuran ramp jenis Windows.
Jangan gunakan ukuran font yang lebih kecil dari 12 px.
Hierarki
Pengguna mengandalkan hierarki visual saat memindai halaman: header meringkas konten, dan teks isi memberikan detail lebih lanjut. Untuk membuat hierarki visual yang jelas di aplikasi Anda, ikuti ramp jenis Windows.
Jenis ramp
Ramp jenis Windows membangun hubungan penting antara gaya jenis di halaman, membantu pengguna membaca konten dengan mudah. Semua ukuran dalam piksel yang efektif dan dioptimalkan untuk aplikasi UWP yang berjalan di semua perangkat.
Lihat panduan tentang menggunakan ramp jenis XAML untuk detail selengkapnya.
Penjajaran
TextAlignment default adalah Kiri, dan dalam sebagian besar instans, kanan kiri-siram dan ragged menyediakan penjangkaran konten yang konsisten dan tata letak yang seragam. Untuk bahasa RTL, lihat Menyesuaikan tata letak dan font untuk mendukung globalisasi.
<TextBlock TextAlignment="Left">
Jumlah karakter
Simpan hingga 50–60 huruf per baris untuk kemudahan membaca.
Jangan gunakan kurang dari 20 karakter atau lebih dari 60 karakter per baris karena ini sulit dibaca.
Kliping dan elipsis
Ketika jumlah teks melampaui ruang yang tersedia, sebaiknya kliping teks dan sisipkan elipsis [...], yang merupakan perilaku default sebagian besar kontrol teks UWP.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Klip teks, dan bungkus jika beberapa baris diaktifkan.
Jangan gunakan elipsis untuk menghindari kekacauan visual.
Catatan
Jika kontainer tidak terdefinisi dengan baik (misalnya, tidak ada warna latar belakang yang membedakan), atau ketika ada tautan untuk melihat lebih banyak teks, maka gunakan elipsis.
Bahasa
Segoe UI Variable adalah font kami untuk bahasa Inggris, Eropa, Yunani, dan Rusia. Untuk bahasa lain, lihat rekomendasi berikut.
Mengoralisasi/melokalisasi font
Gunakan API pemetaan font LanguageFont untuk akses terprogram ke keluarga font, ukuran, berat, dan gaya yang direkomendasikan untuk bahasa tertentu. Objek LanguageFont menyediakan akses ke info font yang benar untuk berbagai kategori konten termasuk header UI, pemberitahuan, teks isi, dan font isi dokumen yang dapat diedit pengguna. Untuk informasi selengkapnya, lihat Menyesuaikan tata letak dan font untuk mendukung globalisasi.
Font untuk bahasa non-Latin
| Font-family | Gaya | Catatan |
|---|---|---|
| Ebrima | Reguler, Tebal | Font antarmuka pengguna untuk skrip Afrika (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai). |
| Gadugi | Reguler, Tebal | Font antarmuka pengguna untuk skrip Amerika Utara (Kanada Syllabics, Cherokee, Osage). |
| Leelawadee UI | Reguler, Semilight, Tebal | Font antarmuka pengguna untuk skrip Asia Tenggara (Buginese, Khmer, Lao, Thai). |
| Malgun Gothic | Reguler | Font antarmuka pengguna untuk bahasa Korea. |
| Microsoft JhengHei UI | Reguler, Tebal, Ringan | Font antarmuka pengguna untuk Bahasa Tionghoa Tradisional. |
| Microsoft YaHei UI | Reguler, Tebal, Ringan | Font antarmuka pengguna untuk Bahasa Tionghoa Sederhana. |
| Teks Myanmar | Reguler | Font fallback untuk skrip Myanmar. |
| Nirmala UI | Reguler, Semilight, Tebal | Font antarmuka pengguna untuk skrip Asia Selatan (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu). |
| Segoe UI | Reguler, Miring, Miring Muda, Miring Hitam, Tebal, Miring Tebal, Cahaya, Semilight, Semibold, Hitam | Font antarmuka pengguna untuk Arab, Armenia, Georgia, dan Ibrani. |
| Simsun | Reguler | Font UI Tionghoa warisan. |
| Yu Gothic UI | Ringan, Semilight, Reguler, Semibold, Tebal | Font antarmuka pengguna untuk bahasa Jepang. |
Font
Font sans-serif
Font sans-serif adalah pilihan yang bagus untuk judul dan elemen UI.
| Font-family | Gaya | Catatan |
|---|---|---|
| Arial | Reguler, Miring, Tebal, Tebal Miring, Hitam | Mendukung skrip Eropa dan Timur Tengah (Latin, Yunani, Sirilik, Arab, Armenia, dan Ibrani). Bobot hitam hanya mendukung skrip Eropa. |
| Calibri | Reguler, Miring, Tebal, Miring Tebal, Ringan, Miring Ringan | Mendukung skrip Eropa dan Timur Tengah (Latin, Yunani, Sirilik, Arab dan Ibrani). Bahasa Arab hanya tersedia di tegak lurus. |
| Konsol | Reguler, Miring, Tebal, Tebal Miring | Font lebar tetap yang mendukung skrip Eropa (Latin, Yunani, dan Sirilik). |
| Segoe UI | Reguler, Miring, Miring Muda, Miring Hitam, Tebal, Miring Tebal, Cahaya, Semilight, Semibold, Hitam | Font antarmuka pengguna untuk skrip Eropa dan Timur Tengah (Arab, Armenia, Sirilik, Georgia, Yunani, Ibrani, Latin), dan juga skrip Lisu. |
| Selawik | Reguler, Semilight, Light, Bold, Semibold | Font sumber terbuka yang kompatibel secara metrik dengan Segoe UI, ditujukan untuk aplikasi di platform lain yang tidak ingin menggabungkan Segoe UI. Dapatkan Selawik di GitHub. |
Font serif
Font serif baik untuk menyajikan teks dalam jumlah besar.
| Font-family | Gaya | Catatan |
|---|---|---|
| Cambria | Reguler | Font serif yang mendukung skrip Eropa (Latin, Yunani, Sirilik). |
| Kurir Baru | Reguler, Miring, Tebal, Tebal Miring | Font lebar tetap Serif yang mendukung skrip Eropa dan Timur Tengah (Latin, Yunani, Sirilik, Arab, Armenia, dan Ibrani). |
| Georgia | Reguler, Miring, Tebal, Tebal Miring | Mendukung skrip Eropa (Latin, Yunani, dan Sirilik). |
| Times New Roman | Reguler, Miring, Tebal, Tebal Miring | Font warisan yang mendukung skrip Eropa (Latin, Yunani, Sirilik, Arab, Armenia, Ibrani). |
Font variabel
Font variabel baik untuk mengontrol tampilan teks dengan tepat.
| Font-family | Sumbu | Catatan |
|---|---|---|
| Bahnschrift | Berat, Lebar | Font variabel yang mendukung Latin, Yunani, dan Sirilik. |
| Variabel UI Segoe | Berat, Ukuran Optik | Font variabel yang mendukung Latin, Yunani, dan Sirilik. |
Simbol dan ikon
| Font-family | Gaya | Catatan |
|---|---|---|
| Aset Segoe MDL2 | Reguler | Font antarmuka pengguna untuk ikon aplikasi. Untuk informasi selengkapnya, lihat artikel Aset Segoe MDL2 . |
| Segoe UI Emoji | Reguler | Font antarmuka pengguna untuk Emoji. |
| Simbol UI Segoe | Reguler | Font fallback untuk simbol. |
Artikel terkait
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk