Font

Artikel
06/13/2023

Catatan

Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kita saat ini.

Pengguna berinteraksi dengan teks lebih dari dengan elemen lain di Microsoft Windows. Segoe UI (diucapkan "SEE-go") adalah font sistem Windows. Ukuran font standar telah ditingkatkan menjadi 9 poin.

ilustrasi alfabet dalam font ui segoe

Font UI Segoe.

Segoe UI dan Segoe bukan font yang sama. Segoe UI adalah font Windows yang ditujukan untuk string teks antarmuka pengguna. Segoe adalah font merek yang digunakan oleh Microsoft dan mitra untuk menghasilkan materi untuk cetak dan iklan.

Segoe UI adalah typeface yang mudah didekati, terbuka, dan ramah, dan sebagai hasilnya memiliki keterbacaan yang lebih baik daripada Tahoma, Microsoft Sans Serif, dan Arial. Ini memiliki karakteristik sans serif humanis: berbagai lebar ibukotanya (E dan S sempit, misalnya, dibandingkan dengan Helvetica, di mana lebarnya lebih mirip, cukup lebar); stres dan bentuk huruf dari huruf kecilnya; dan miring sejatinya (bukan "miring" atau romawi miring, seperti banyak serif sans yang tampak industri). Typeface dimaksudkan untuk memberikan efek visual yang sama pada layar dan di cetak. Ini dirancang untuk menjadi sans serif humanis tanpa karakter yang kuat atau mengalihkan perhatian keanehan.

Segoe UI dioptimalkan untuk ClearType, yang aktif secara default di Windows. Dengan ClearType diaktifkan, Segoe UI adalah font yang elegan dan dapat dibaca. Tanpa ClearType diaktifkan, Segoe UI hanya dapat diterima secara marginal. Faktor ini menentukan kapan Anda harus menggunakan Segoe UI.

Segoe UI mencakup karakter Latin, Yunani, Sirilik, dan Arab. Ada font baru, juga dioptimalkan untuk ClearType, dibuat untuk kumpulan karakter dan penggunaan lainnya. Ini termasuk Meiryo untuk Jepang, Malgun Gothic untuk Korea, Microsoft JhengHei untuk Cina (Tradisional), Microsoft YaHei untuk Cina (Sederhana), Gisha untuk Ibrani, dan Leelawadee untuk Thailand, dan font Koleksi ClearType yang dirancang untuk penggunaan dokumen.

Meiryo menyertakan karakter Latin berdasarkan Verdana. Malgun Gothic, Microsoft JhengHei, dan Microsoft YaHei menggunakan Segoe UI yang disesuaikan. Penggunaan versi miring font ini tidak disarankan. Malgun Gothic, Microsoft JhengHei, dan Microsoft YaHei disediakan dalam gaya reguler dan tebal saja, yang berarti karakter miring disintesis dengan miring gaya tegak. Meskipun Meiryo menyertakan miring sejati dan miring tebal, gaya ini hanya berlaku untuk karakter Latin, karakter Jepang tetap tegak ketika gaya miring diterapkan.

Variasi Meiryo, yang disebut Meiryo UI, lebih disukai dalam antarmuka pengguna perintah pita.

Untuk mendukung lokal menggunakan set karakter ini, Segoe UI diganti dengan font yang benar tergantung pada setiap lokal selama proses pelokalan .

Untuk melisensikan Segoe UI dan font Microsoft lainnya untuk didistribusikan dengan program berbasis Windows, hubungi Monotype.

Catatan: Panduan yang terkait dengan gaya dan nada dan teks antarmuka pengguna disajikan dalam artikel terpisah.

Konsep desain

Font, typeface, ukuran titik, dan atribut

Dalam tipografi tradisional, font menjelaskan kombinasi typeface, ukuran titik, dan atribut. Typeface adalah tampilan font. Segoe UI, Tahoma, Verdana, dan Arial semuanya adalah typeface. Ukuran titik mengacu pada ukuran font, diukur dari bagian atas percender ke bagian bawah turun, dikurangi penspasian internal (disebut di depan). Titik sekitar 1/72 inci. Akhirnya, font dapat memiliki atribut tebal atau miring.

Secara informal, orang sering menggunakan font sebagai pengganti typeface seperti yang dilakukan dalam artikel ini tetapi secara teknis, Segoe UI adalah typeface, bukan font. Setiap kombinasi atribut adalah font unik (misalnya, reguler Segoe UI 9 poin, tebal UI Segoe 10 poin, dan sebagainya).

Serif dan sans serif

Jenis huruf adalah serif atau sans serif. Serif mengacu pada giliran kecil yang sering menyelesaikan goresan huruf dalam font. Typeface sans serif tidak memiliki serif.

Pembaca umumnya lebih suka font serif yang digunakan sebagai teks isi dalam dokumen. Serif memberikan perasaan formalitas dan keanggunan pada dokumen. Untuk teks UI, kebutuhan akan tampilan yang bersih dan resolusi monitor komputer yang lebih rendah membuat jenis huruf sans serif menjadi pilihan yang lebih baik.

Kontras

Teks paling mudah dibaca ketika ada perbedaan besar antara luminance teks dan latar belakang. Teks hitam pada latar belakang putih memberikan teks gelap kontras tertinggi pada latar belakang yang sangat terang juga dapat memberikan kontras tinggi. Kombinasi ini paling baik untuk permukaan UI utama.

Teks terang pada latar belakang gelap menawarkan kontras yang baik, tetapi tidak sebagus teks gelap pada latar belakang terang. Kombinasi ini berfungsi dengan baik untuk permukaan UI sekunder, seperti panel tugas Explorer, yang ingin Anda de-tekankan relatif terhadap permukaan UI utama.

Jika Anda ingin memastikan pengguna membaca teks Anda, gunakan teks gelap di latar belakang terang.

Ketahanan

Teks dapat menggunakan ketahanan berikut untuk menunjukkan cara penggunaannya:

Pointer. Penunjuk I-bar ("teks pilih") menunjukkan bahwa teks dapat dipilih, sedangkan penunjuk panah menunjuk ke kiri ("pilih normal") menunjukkan bahwa teks tidak.
Perlahan- lara. Ketika teks memiliki fokus input, tanda sisipan adalah bilah vertikal berkedip yang menunjukkan titik penyisipan/pilihan dalam teks yang dapat dipilih atau dapat diedit.
Kotak. Kotak di sekitar teks yang menunjukkan bahwa kotak dapat diedit. Untuk mengurangi bobot presentasi, kotak mungkin ditampilkan secara dinamis hanya saat teks yang dapat diedit dipilih.
Warna latar depan. Abu-abu muda menunjukkan bahwa teks dinonaktifkan. Warna non-abu-abu, terutama biru dan ungu, menunjukkan bahwa teks adalah tautan.
Warna latar belakang. Latar belakang abu-abu muda dengan lemah menunjukkan bahwa teks bersifat baca-saja, tetapi dalam praktiknya teks baca-saja dapat memiliki latar belakang warna apa pun.

Ketahanan ini digabungkan untuk arti berikut:

Dapat diedit. Teks ditampilkan dalam kotak, dengan penunjuk pemilihan teks, tanda sisipan (pada fokus input), dan biasanya pada latar belakang putih.
Baca-saja, dapat dipilih. Teks dengan penunjuk pilih dan tanda sisipan (pada fokus input).
Baca-saja, tidak dapat dipilih. Teks dengan penunjuk panah.
Nonaktif. Teks abu-abu muda dengan penunjuk panah, terkadang di latar belakang abu-abu.

Teks baca-saja secara tradisional memiliki latar belakang abu-abu, tetapi latar belakang abu-abu tidak diperlukan. Bahkan, latar belakang abu-abu bisa tidak diinginkan, terutama untuk blok teks besar, karena menunjukkan bahwa teks dinonaktifkan dan mencegah pembacaan.

Aksesibilitas dan font, ukuran, dan warna sistem

Panduan untuk membuat teks dapat diakses oleh pengguna dengan disabilitas atau gangguan dapat direbus ke satu aturan sederhana: Menghormati pengaturan pengguna dengan selalu menggunakan font, ukuran, dan warna sistem.

Jika Anda hanya melakukan satu hal ...

Hormati pengaturan pengguna dengan selalu menggunakan font, ukuran, dan warna sistem.

Pengembang: Dari kode, Anda dapat menentukan properti font sistem (termasuk ukurannya) menggunakan fungsi GETThemeFont API. Anda dapat menentukan warna sistem menggunakan fungsi GetThemeSysColor API.

Karena Anda tidak dapat membuat asumsi tentang pengaturan tema sistem pengguna, Anda harus:

Selalu dasarkan warna font dan latar belakang Anda dari warna tema sistem. Jangan pernah membuat warna Anda sendiri berdasarkan nilai RGB tetap (merah, hijau, biru).
Selalu cocokkan warna teks sistem dengan warna latar belakang yang sesuai. Misalnya, jika Anda memilih COLOR_STATICTEXT untuk warna teks, Anda juga harus memilih COLOR_STATIC untuk warna latar belakang.
Selalu buat font baru berdasarkan variasi font sistem berukuran proporsional. Mengingat metrik font sistem, Anda dapat membuat variasi yang tebal, miring, lebih besar, dan lebih kecil.

Cara sederhana untuk memastikan bahwa program Anda mematuhi pengaturan pengguna adalah dengan menguji menggunakan ukuran font yang berbeda dan skema warna kontras tinggi. Semua teks harus mengubah ukuran dan menampilkan dengan benar dalam skema warna yang dipilih.

Pola penggunaan

Teks memiliki beberapa pola penggunaan:

Penggunaan	Deskripsi
Teks bilah judul Teks pada bilah judul yang mengidentifikasi jendela.
Instruksi utama Teks yang menjelaskan apa yang harus dilakukan pada halaman, jendela, atau kotak dialog.
Instruksi sekunder Teks tambahan yang menjelaskan apa yang harus dilakukan pada halaman, jendela, atau kotak dialog.
Teks normal Teks biasa (baca-saja) ditampilkan di antarmuka pengguna.
Teks yang ditekankan Teks tebal digunakan untuk membuat teks lebih mudah diurai dan untuk menarik perhatian pengguna teks harus dibaca. teks miring digunakan untuk merujuk ke teks secara harfiah (bukan tanda kutip) dan untuk menekankan kata-kata tertentu.
Teks yang dapat diedit Teks yang bisa diedit pengguna ditampilkan dalam kotak. untuk mengurangi bobot presentasi, kotak hanya dapat ditampilkan saat teks yang dapat diedit dipilih.
Teks yang dinonaktifkan Teks yang tidak berlaku untuk konteks saat ini, seperti label untuk kontrol yang dinonaktifkan. teks yang dinonaktifkan menunjukkan bahwa pengguna (biasanya) tidak boleh repot-repot membaca teks.
Tautan Teks yang digunakan untuk menavigasi ke halaman, jendela, atau topik bantuan lain, atau memulai perintah.
Header grup Teks yang digunakan untuk mengelompokkan item dalam tampilan daftar.
Nama file Teks nama file (hanya dalam tampilan konten).
Teks dokumen Teks yang digunakan dalam dokumen (dibandingkan dengan teks ui).
Judul dokumen Teks yang digunakan sebagai judul dalam dokumen.

Panduan

Font dan warna

Font dan warna berikut adalah default untuk Windows Vista dan Windows 7.

Pola	Simbol tema	Font, Warna
	CaptionFont	9 pt. black (#000000) Segoe UI
	MainInstruction	12 pt. blue (#003399) Segoe UI
	Instruksi	9 pt. black (#000000) Segoe UI
	BodyText	9 pt. black (#000000) Segoe UI
	BodyText	9 pt. black (#000000) Segoe UI, tebal atau miring
	BodyText	9 pt. black (#000000) Segoe UI, dalam kotak
	Nonaktif	9 pt. abu-abu gelap (#323232) Segoe UI
	HyperLinkText	9 pt. blue (#0066CC) Segoe UI
	Panas	9 pt. biru muda (#3399FF) Segoe UI
		11 pt. biru (#003399) Segoe UI
		11 pt. black (#000000) Segoe UI
	(tidak ada)	9 pt. hitam (#000000) Calibri
	(tidak ada)	17 pt. hitam (#000000) Calibri

Pilih font dan optimalkan tata letak jendela berdasarkan teknologi UI dan versi target Windows:

Teknologi UI	Versi Windows target	Font yang digunakan dan dioptimalkan untuk
Windows Presentation Foundation	Semua	Gunakan bagian tema WPF.
Win32 atau WinForms	Windows Vista atau yang lebih baru	Gunakan font Segoe UI yang sesuai.
	Komponen yang dapat diperluas atau Pra-Windows Vista	Untuk menargetkan Windows XP dan Windows 2000, gunakan font pseudo MS Shell Dlg 2 8 poin, yang memetakan ke Tahoma. Untuk menargetkan versi Windows yang lebih lama, gunakan font pseudo MS Shell Dlg 8 poin, yang memetakan ke Tahoma pada Windows 2000 dan Windows XP, dan ke MS Sans Serif pada Windows 95, Windows 98, Windows Millennium Edition, dan Windows NT 4.0.

Pengembang:
- Untuk elemen yang menggunakan tata letak tetap (seperti templat dialog Windows dan WinForms), kode keras font yang sesuai dari tabel sebelumnya.
- Untuk elemen yang menggunakan tata letak dinamis (seperti Windows Presentation Foundation), gunakan font tema. Gunakan API tema seperti DrawThemeText untuk menggambar teks berdasarkan simbol tema. Pastikan untuk memiliki alternatif berdasarkan metrik sistem jika layanan tema tidak berjalan.
Untuk Segoe UI, gunakan ukuran font 9 titik atau lebih besar. Font UI Segoe dioptimalkan untuk ukuran ini, jadi hindari menggunakan ukuran yang lebih kecil.
Selalu cocokkan warna teks sistem dengan warna latar belakang yang sesuai. Misalnya, jika Anda memilih COLOR_STATICTEXT untuk warna teks, Anda juga harus memilih COLOR_STATIC untuk warna latar belakang.
Selalu buat font baru berdasarkan variasi font sistem berukuran proporsional. Mengingat metrik font sistem, Anda dapat membuat variasi yang tebal, miring, lebih besar, dan lebih kecil.
Tampilkan blok besar teks baca-saja (seperti istilah lisensi) terhadap latar belakang terang alih-alih latar belakang abu-abu. Latar belakang abu-abu menunjukkan bahwa teks dinonaktifkan dan mencegah pembacaan.
Pertimbangkan panjang baris maksimum 65 karakter untuk membuat teks mudah dibaca. (Karakter mencakup huruf, tanda baca, dan spasi.)

Atribut

Sebagian besar teks UI harus biasa tanpa atribut apa pun. Atribut dapat digunakan sebagai berikut:
- Tebal. Gunakan dalam label kontrol untuk membuat teks lebih mudah diurai. Gunakan dengan hemat untuk menarik perhatian pengguna teks harus membaca. Menggunakan terlalu banyak tebal mengurangi dampaknya.
- Miring. Gunakan untuk merujuk ke teks secara harfiah alih-alih tanda kutip. Gunakan dengan hemat untuk menekankan kata-kata tertentu. Gunakan untuk perintah dalam kotak teks dan daftar drop-down yang dapat diedit.
- Tebal miring. Jangan gunakan.
- Menggarisbawahi. Jangan gunakan kecuali untuk tautan. Gunakan miring sebagai gantinya untuk penekanan.
Tidak semua font mendukung huruf tebal dan miring, sehingga tidak boleh penting untuk memahami teks.

Bagikan melalui