Bagikan melalui

Tipografi di Windows

  • Artikel

Beberapa kata yang dirender dalam Variabel UI Segoe

Sebagai representasi visual bahasa, tugas utama tipografi adalah mengomunikasikan informasi. Sistem jenis Windows membantu Anda membuat struktur dan hierarki dalam konten Anda untuk memaksimalkan legibilitas dan keterbacaan di UI Anda.

Variabel UI Segoe adalah font sistem baru untuk Windows. Ini adalah refresh pada Segoe klasik dan menggunakan teknologi font variabel untuk secara dinamis memberikan legibilitas yang besar pada ukuran yang sangat kecil, dan meningkatkan kerangka pada ukuran tampilan.

Tip

Artikel ini menjelaskan bagaimana bahasa Desain Fasih diterapkan ke aplikasi Windows. Untuk informasi selengkapnya, lihat Desain Lancar - Tipografi.

Menggunakan Variabel Fasih Segoe

Variabel UI Segoe mendukung dua sumbu untuk kontrol teks yang lebih halus: berat dan ukuran optik.

  • Sumbu berat (wght) bertambah bertahas dengan bobot dari Tipis (100) hingga Tebal (700).
  • Sumbu ukuran optik (opsz) bersifat otomatis dan aktif secara default. Ini mengontrol bentuk dan ukuran penghitung dalam font, untuk memprioritaskan legibilitas pada ukuran kecil dan kepribadian pada ukuran besar (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.

Kata 'Segoe' dirender dalam Variabel Segoe UI dengan beberapa aspek typeface disorot

Bobot

Nama berat Nilai sumbu berat Visual
Ringan 300 Kata 'Segoe' dirender dalam segoe UI Variable light
Semilight 350 Kata 'Segoe' dirender dalam semilight Variabel Segoe UI
Biasa 400 Kata 'Segoe' dirender dalam Segoe UI Variable regular
Semibold 600 Kata 'Segoe' dirender dalam semibold Variabel Segoe UI
Berani 700 Kata 'Segoe' yang dirender dalam Segoe UI Variable berani

Sumbu optik

Huruf kecil yang dirender dalam Variabel UI Segoe dengan kerangka berbagai bentuk yang dapat dimilikinya berdasarkan konteks di mana ia dirender

Praktik terbaik tipografi di Windows 11

Windows 11 menggunakan Variabel UI Segoe dengan atribut berikut berdasarkan konteks di mana teks ditampilkan.

Atribut Nilai Catatan
Berat Reguler, Semibold Gunakan bobot reguler untuk sebagian besar teks, gunakan Semibold untuk judul
Alignment Kiri, Tengah Rata kiri secara default, Rata tengah hanya dalam kasus yang jarang terjadi seperti teks di bawah ikon
Nilai minimum 14px Semibold, 12px Regular Teks yang lebih kecil dari ukuran dan bobot ini tidak dapat dilewati dalam beberapa bahasa
Casing Kasus kalimat Gunakan huruf kecil kalimat untuk semua teks UI, termasuk judul
Pemotongan Elipsis dan kliping Gunakan elipsis dalam banyak kasus; kliping hanya digunakan dalam kasus yang jarang terjadi

Contoh

Buka aplikasi Galeri WinUI 3 dan lihat Prinsip tipografi yang sedang beraksi.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

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.

Ukuran dan penskalakan

Ukuran font dalam aplikasi XAML secara otomatis diskalakan di semua perangkat. Algoritma penskalakan memastikan bahwa font 24 px pada layar besar yang berjarak 10 kaki sama mudahnya dengan font 24 px pada layar kecil 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.

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 berada dalam piksel yang efektif dan dioptimalkan untuk aplikasi Windows yang berjalan di semua ukuran layar.

Windows 11 menggunakan nilai berikut untuk berbagai jenis teks di UI.

Contoh Beban Ukuran/tinggi garis
Contoh teks keterangan Bentuk dan 16 epx 12/16
Contoh teks isi Teks 14/20 epx
Contoh teks kuat isi Semibold teks 14/20 epx
Contoh teks besar isi Teks 18/24 epx
Contoh teks subtitel Menampilkan semibold 20/28 epx
Contoh teks judul Menampilkan semibold 28/36 epx
Contoh teks besar judul Menampilkan semibold 40/52 epx
Contoh teks tampilan Menampilkan semibold 68/92 epx

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 font Segoe Fluent Icons.
Segoe UI Emoji Reguler Font antarmuka pengguna untuk Emoji.
Simbol UI Segoe Reguler Font fallback untuk simbol.