Bagikan melalui

Tipografi di Windows 11

  • Artikel

Beberapa kata yang dirender dalam Variabel UI Segoe

Sebagai representasi visual bahasa, tugas utama tipografi adalah mengomunikasikan informasi. Sistem jenis Windows 11 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.

Metrik

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

Variabel UI Segoe mendukung dua sumbu: berat dan ukuran optik. Sumbu berat bertambah bertahas, sementara sumbu ukuran optik otomatis dan aktif secara default. Sumbu ukuran optik mengontrol bentuk dan ukuran penghitung dalam font, untuk memprioritaskan legibilitas pada ukuran kecil dan kepribadian pada ukuran besar.

Menggunakan Variabel Fasih Segoe

Jenis ramp

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

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

Tip

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