Bagikan melalui


Tipografi di Aplikasi Windows

gambar hero

Sebagai representasi visual bahasa, tugas utama tipografi adalah mengomunikasikan informasi. Gayanya tidak boleh 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 mempertahankan legibilitas optimal di seluruh ukuran dan kepadatan piksel dan menawarkan estetika yang bersih, ringan, dan terbuka yang melengkapi konten sistem.

Contoh teks font Variabel Segoe UI.

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.

Cuplikan layar pertama bilah hijau yang memiliki tanda centang hijau dan kata Lakukan di dalamnya. Pilih satu font untuk UI Anda.

Jangan 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 Variabel Segoe UI di CSS.

Ukuran dan penskalakan

Ukuran font dalam aplikasi UWP secara otomatis diskalakan di semua perangkat. Algoritma penskalaan memastikan bahwa font 24 px di Surface Hub 10 kaki jauhnya sama mudah terbaca seperti font 24 px pada ponsel 5" yang berjarak beberapa inci.

melihat jarak untuk perangkat yang berbeda.

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.

Cuplikan layar kedua bilah hijau yang memiliki tanda centang hijau dan kata Lakukan di dalamnya.Ikuti ukuran ramp jenis Windows.

Jangan Jangan gunakan ukuran font yang lebih kecil dari 12 px.

Hirarki

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.

Cuplikan layar tiga baris teks di mana ukuran font menjadi lebih kecil dari satu baris ke baris berikutnya.

Jenis ramp

Ramp jenis Windows membangun hubungan penting antara gaya jenis pada halaman, membantu pengguna membaca konten dengan mudah. Semua ukuran dalam piksel yang efektif dan dioptimalkan untuk aplikasi UWP yang berjalan di semua perangkat.

Ramp jenis Windows.

Lihat panduan tentang menggunakan ramp jenis XAML untuk detail selengkapnya.

Penjajaran

TextAlignment default adalah Kiri, dan dalam sebagian besar instans, kanan flush-left dan ragged menyediakan penjangkaran konten yang konsisten dan tata letak yang seragam. Untuk bahasa RTL, lihat Menyesuaikan tata letak dan font untuk mendukung globalisasi.

Memperlihatkan teks kiri-buang.

<TextBlock TextAlignment="Left">

Jumlah karakter

Cuplikan layar keempat bilah hijau yang memiliki tanda centang hijau dan kata Lakukan di dalamnya. Simpan hingga 50–60 huruf per baris untuk kemudahan membaca.

Jangan Jangan gunakan kurang dari 20 karakter atau lebih dari 60 karakter per baris karena ini sulit dibaca.

Kliping dan elipsis

Ketika jumlah teks meluas di luar ruang yang tersedia, sebaiknya kliping teks dan menyisipkan elipsis [...], yang merupakan perilaku default dari sebagian besar kontrol teks UWP.

Memperlihatkan bingkai perangkat dengan beberapa kliping teks.

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

Cuplikan layar kelima dari bilah hijau yang memiliki tanda centang hijau dan kata Lakukan di dalamnya. Klip teks, dan bungkus jika beberapa baris diaktifkan.

Jangan 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

Variabel UI Segoe 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

Keluarga font 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 n (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 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.

Keluarga font Gaya Catatan
Arial Reguler, Miring, Tebal, Miring Tebal, 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 luncur.
Konsola Reguler, Miring, Tebal, Miring Tebal 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, Ringan, Tebal, Semibold Font sumber terbuka yang kompatibel secara metrik dengan Segoe UI, yang 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.

Keluarga font Gaya Catatan
Cambria Reguler Font serif yang mendukung skrip Eropa (Latin, Yunani, Sirilik).
Kurir Baru Reguler, Miring, Tebal, Miring Tebal Font lebar tetap Serif yang mendukung skrip Eropa dan Timur Tengah (Latin, Yunani, Sirilik, Arab, Armenia, dan Ibrani).
Georgia Reguler, Miring, Tebal, Miring Tebal Mendukung skrip Eropa (Latin, Yunani, dan Sirilik).
Times New Roman Reguler, Miring, Tebal, Miring Tebal Font warisan yang mendukung skrip Eropa (Latin, Yunani, Sirilik, Arab, Armenia, Ibrani).

Font variabel

Font variabel baik untuk mengontrol tampilan teks dengan tepat.

Keluarga font 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

Keluarga font 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.