Aracılığıyla paylaş

Windows'da tipografi

Segoe UI Değişkeninde görünen birkaç sözcük

Dilin görsel gösterimi olarak tipografinin temel görevi bilgileri iletmektir. Windows türü sistemi, kullanıcı arabiriminizde okunabilirliği ve okunabilirliği en üst düzeye çıkarmak için içeriğinizde yapı ve hiyerarşi oluşturmanıza yardımcı olur.

Segoe UI Değişkeni , Windows için yeni sistem yazı tipidir. Klasik Segoe'nun yenilenmiş bir versiyonudur ve çok küçük boyutlarda dinamik bir şekilde mükemmel okunabilirlik, daha büyük boyutlarda ise geliştirilmiş ana hatlar sağlamak için değişken yazı tipi teknolojisini kullanır.

Tavsiye

Bu makalede , Fluent Design dilinin Windows uygulamalarına nasıl uygulandığı açıklanmaktadır. Daha fazla bilgi için bkz . Fluent Design - Tipografi.

Segoe Fluent Değişken Kullanma

Segoe UI Değişkeni, metnin daha ince denetimi için iki ekseni destekler: ağırlık ve optik boyut.

  • Ağırlık ekseni (wght), İnce (100) ile Kalın (700) arası ağırlıklarla artımlı olur.
  • Optik boyut ekseni (opsz) otomatiktir ve varsayılan olarak açıktır. Yazı tipindeki sayaçların şeklini ve boyutunu kontrol eder, küçük boyutlarda okunabilirliğe ve büyük boyutlarda kişiliğe öncelik vermek için (8pt ile 36pt arasında optik ölçeklendirme).

XAML ortak denetimleri kullanılırken, desteklenen diller için Segoe UI Değişkeni yazı tipi varsayılan olarak seçilir. Bu yazı tipi veya optik eksenli başka bir değişken yazı tipi kullanıldığında, optik boyut istenen yazı tipi boyutuyla otomatik olarak eşleşecektir. HTML kullanırken optik ölçeklendirme de otomatiktir, ancak CSS'de Segoe UI Değişkeni yazı tipini belirtmeniz gerekir.

Segoe UI Değişkeninde işlenen 'Segoe' sözcüğü, yazı tipinin çeşitli yönleri vurgulanarak gösterilmiştir

Ağırlık

Ağırlık adı Ağırlık ekseni değeri Görsel
Işık 300 Segoe UI Değişken ışıkta işlenen 'Segoe' sözcüğü
Yarı ışık 350 Segoe UI Değişkeni yarı aydınlatmasında işlenen 'Segoe' sözcüğü
Düzenli 400 'Segoe' sözcüğü Segoe UI Variable normal düzeninde işlenmiş
Semibold 600 'Segoe' kelimesi Segoe UI Değişken Semibold'la yazıldı
Kalın 700 'Segoe' sözcüğü Segoe UI Variable kalın olarak işlenmiştir

Optik eksen

Segoe UI Değişkeninde işlenen ve işlenmekte olduğu bağlama göre sahip olabileceği farklı şekillerin ana hatlarını içeren küçük harf

Windows 11'de tipografi en iyi yöntemleri

Windows 11, metnin görüntülendiği bağlama göre aşağıdaki özniteliklerle Segoe UI Değişkenini kullanır.

Özellik Değer Notlar
Ağırlık Düzenli, Semibold Çoğu metin için normal ağırlık kullanın, başlıklar için Semibold kullanın
Hizalama Sol, Ortala Varsayılan olarak sola hizala, Yalnızca simgelerin altındaki metin gibi nadir durumlarda ortaya hizala
En düşük değerler 14 piksel Yarı Kalın, 12 piksel Normal Bu boyutlardan ve ağırlıklardan küçük metinler bazı dillerde okunamaz
Kaplama Cümle büyük/küçük harf Başlıklar da dahil olmak üzere tüm kullanıcı arabirimi metinleri için tümce büyük/küçük harflerini kullanma
Kısaltma Üç nokta ve kırpma Çoğu durumda üç nokta işareti kullanın; Kısaltma yalnızca nadir durumlarda kullanılır

Örnekler

WinUI Galeri uygulamasını açın ve tipografi ilkelerinin nasıl çalıştığını görün

WinUI Galerisi uygulaması çoğu WinUI denetimi, özelliği ve işlevine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Windows Uygulamaları'nda tipografi

hero görüntüsü

Dilin görsel gösterimi olarak tipografinin temel görevi bilgileri iletmektir. Stili asla bu hedefin önüne geçmemelidir. Bu makalede, kullanıcıların içeriği kolay ve verimli bir şekilde anlamasına yardımcı olmak için Windows uygulamanızda tipografi stili oluşturma hakkında bilgi edineceğiz.

Yazı tipi

Uygulamanızın kullanıcı arabiriminde tek bir yazı tipi kullanmanız gerekir ve Windows uygulamaları için varsayılan yazı tipi olan Segoe UI Değişkenini kullanmanızı öneririz. Boyutlar ve piksel yoğunlukları arasında en uygun okunabilirliği korumak için tasarlanmıştır ve sistemin içeriğini tamamlayan temiz, hafif ve açık bir estetik sunar.

Segoe UI Değişkeni yazı tipinin örnek metni.

İngilizce olmayan dilleri görüntülemek veya uygulamanız için farklı bir yazı tipi seçmek için lütfen Windows uygulamaları için önerilen yazı tiplerimiz için Diller ve Yazı Tipleri bölümüne bakın.

Boyut ve ölçeklendirme

XAML uygulamalarında yazı tipi boyutları tüm cihazlara otomatik olarak ölçeklendirilir. Ölçeklendirme algoritması, 3 metre uzaklıktaki büyük bir ekranda 24 piksel yazı tipinin, birkaç inç uzaklıktaki küçük bir ekranda 24 piksel yazı tipi kadar okunaklı olmasını sağlar.

farklı cihazlar için mesafeleri görüntüleme.

Ölçeklendirme sisteminin çalışma şekli nedeniyle, gerçek fiziksel piksellerle değil etkili piksellerle tasarlarsınız ve farklı ekran boyutları veya çözünürlükleri için yazı tipi boyutlarını değiştirmeniz gerekmez.

Hiyerarşi

Kullanıcılar bir sayfayı tararken görsel hiyerarşiye güvenir: üst bilgiler içeriği özetler ve gövde metni daha fazla ayrıntı sağlar. Uygulamanızda net bir görsel hiyerarşi oluşturmak için Windows türü rampasını izleyin.

Yazı tipi boyutunun bir satırdan diğerine küçüldüğü üç metin satırının ekran görüntüsü.

Tür rampası

Windows tür rampası, sayfadaki tür stilleri arasında önemli ilişkiler kurarak kullanıcıların içeriği kolayca okumalarına yardımcı olur. Tüm boyutlar etkin piksel cinsindendir ve tüm ekran boyutlarında çalışan Windows uygulamaları için iyileştirilmiştir.

Windows 11, kullanıcı arabirimindeki çeşitli metin türleri için aşağıdaki değerleri kullanır.

Örnek Ağırlık Boyut/çizgi yüksekliği
Resim yazısı metni örneği Küçük 12/16 epx
Gövde metni örneği Metin 14/20 epx
Kalın metin örneği Yarı kalın metin 14/20 epx
Büyük gövde metni örneği Metin 18/24 epx
Alt yazı metni örneği Yarı kalın yap 20/28 epx
Başlık metni örneği Yarı kalın yap 28/36 epx
Başlık büyük metin örneği Yarı kalın yap 40/52 epx
Görüntüleme metni örneği Yarı kalın yap 68/92 ekran

Daha fazla ayrıntı için XAML türü rampasını kullanma yönergelerine göz atın.

Hizalama

TextAlignment varsayılan Sol'dur ve çoğu durumda, sola hizalanmış ve düzensiz sağ, içeriğin tutarlı bir şekilde sabitlenmesi ve tekdüzen bir düzen sağlar. RTL dilleri için bkz. Genelleştirmeyi desteklemek için düzeni ve yazı tiplerini ayarlama.

Sola yaslı metni gösterir. 

<TextBlock TextAlignment="Left">

Karakter sayısı

Yeşil onay işareti ve içinde Do sözcüğü bulunan yeşil bir çubuğun dördüncü ekran görüntüsü. Okuma kolaylığı için satır başına 50-60 harf tutun.

Yapmayın Okuması zor olduğundan satır başına 20 karakterden az veya 60 karakterden fazla kullanmayın.

Kırpma ve elips

Metin miktarı kullanılabilir alanın dışına çıktığında, metni kırpmanızı ve çoğu UWP metin denetiminin varsayılan davranışı olan üç nokta [...] eklemenizi öneririz.

Metni kısmen kesilmiş olarak gösteren bir cihaz çerçevesidir. 

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

Yeşil onay işareti ve içinde Do sözcüğü bulunan yeşil çubuğun beşinci ekran görüntüsü. Metni kırp ve birden çok satır etkinleştirildiyse kaydır.

Kullanmayın Görsel dağınıklığı önlemek için üç nokta işareti kullanmayın.

Uyarı

Konteynerler iyi tanımlanmadıysa (örneğin, ayırt edici bir arka plan rengi yoksa) veya daha fazla metin görmek için bir bağlantı varsa, üç nokta kullanın.

Diller

Segoe UI Variable, İngilizce, Avrupa dilleri, Yunanca ve Rusça için yazı tipimizdir. Diğer diller için aşağıdaki önerilere bakın.

Yazı tiplerini genelleştirme/yerelleştirme

Belirli bir dil için önerilen yazı tipi ailesine, boyutuna, kalınlığına ve stiline programlı erişim için LanguageFont yazı tipi eşleme API'lerini kullanın. LanguageFont nesnesi kullanıcı arabirimi üst bilgileri, bildirimler, gövde metni ve kullanıcı tarafından düzenlenebilir belge gövdesi yazı tipleri gibi çeşitli içerik kategorileri için doğru yazı tipi bilgilerine erişim sağlar. Daha fazla bilgi için bkz . Genelleştirmeyi desteklemek için düzeni ve yazı tiplerini ayarlama.

Latin olmayan diller için yazı tipleri

Yazı tipi ailesi Stil Notlar
Ebrima (Ebrima) Düzenli, Kalın Afrika alfabeleri için arayüz kullanıcı yazı tipi (ADLaM, Etiyopik, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi Belediyesi Düzenli, Kalın Kuzey Amerika betikleri için kullanıcı arabirimi yazı tipi (Kanada Syllabics, Cherokee, Osage).
Leelawadee Kullanıcı Arabirimi

 Normal, Yarı Işıklı, Kalın Güneydoğu Asya betikleri (Buginese, Khmer, Lao, Tayca) için kullanıcı arabirimi yazı tipi.
Malgun Gotik

 Düzenli Korece için kullanıcı arabirimi yazı tipi.
Microsoft JhengHei Kullanıcı Arayüzü

 Normal, Kalın, İnce Geleneksel Çince için kullanıcı arabirimi yazı tipi.
Microsoft YaHei Kullanıcı Arayüzü

 Normal, Kalın, İnce Basitleştirilmiş Çince için kullanıcı arabirimi yazı tipi.
Myanmar Metni

 Düzenli Myanmar betiği için yedek yazı tipi.
Nirmala Kullanıcı Arabirimi

 Normal, Yarı Işıklı, Kalın Güney Asya betikleri için kullanıcı arabirimi yazı tipi (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe Kullanıcı Arayüzü

 Normal, İtalik, İnce İtalik, Kalın Siyah İtalik, Kalın, Kalın İtalik, İnce, Yarım İnce, Yarım Kalın, Siyah Arapça, Ermeni, Gürcü dili ve İbranice için kullanıcı arabirimi yazı tipi.
Sim Güneş

 Düzenli Eski bir Çince kullanıcı arabirimi yazı tipi.
Yu Gotik Kullanıcı Arabirimi

 İnce, Yarı İnce, Normal, Yarı Kalın, Kalın Japonca için kullanıcı arabirimi yazı tipi.

Yazı tipleri

Sans-serif yazı tipleri

Sans-serif yazı tipleri, başlıklar ve kullanıcı arabirimi öğeleri için harika bir seçimdir.

Yazı tipi ailesi Stil Notlar
Arial Normal, İtalik, Kalın, Kalın İtalik, Siyah Avrupa ve Orta Doğu betiklerini (Latin, Yunanca, Kiril, Arapça, Ermeni ve İbranice) destekler. Siyah yazı tipi kalınlığı yalnızca Avrupa betiklerini destekler.
Calibri Belediyesi Normal, İtalik, Kalın, Kalın İtalik, Açık, Açık İtalik Avrupa ve Orta Doğu betiklerini (Latin, Yunanca, Kiril, Arapça ve İbranice) destekler. Arapça yalnızca dikey parçalarda kullanılabilir.
Consolas Normal, İtalik, Kalın, Kalın İtalik Avrupa betiklerini (Latin, Yunanca ve Kiril) destekleyen sabit genişlikli yazı tipi.
Segoe Kullanıcı Arayüzü Normal, İtalik, İnce İtalik, Kalın Siyah İtalik, Kalın, Kalın İtalik, İnce, Yarım İnce, Yarım Kalın, Siyah Avrupa ve Orta Doğu betikleri (Arapça, Ermeni, Kiril, Gürcü dili, Yunanca, İbranice, Latin) ve lisu betiği için kullanıcı arabirimi yazı tipi.
Selawik Belediyesi Normal, Yarı Hafif, Hafif, Kalın, Yarı Kalın Segoe kullanıcı arabirimini paketlemek istemeyen diğer platformlardaki uygulamalara yönelik, Segoe kullanıcı arabirimiyle ölçümlü olarak uyumlu bir açık kaynak yazı tipi. GitHub'dan Selawik'i edinin.

Serif yazı tipleri

Serif yazı tipleri, büyük miktarda metin sunmak için iyidir.

Yazı tipi ailesi Stil Notlar
Cambria Düzenli Avrupa betiklerini (Latin, Yunanca, Kiril) destekleyen serif yazı tipi.
Kurye Yeni Normal, İtalik, Kalın, Kalın İtalik Avrupa ve Orta Doğu betiklerini (Latin, Yunanca, Kiril, Arapça, Ermeni ve İbranice) destekleyen serif sabit genişlikli yazı tipi.
Gürcistan Normal, İtalik, Kalın, Kalın İtalik Avrupa betiklerini (Latin, Yunanca ve Kiril) destekler.
Times New Roman Normal, İtalik, Kalın, Kalın İtalik Avrupa betiklerini destekleyen eski yazı tipi (Latin, Yunanca, Kiril, Arapça, Ermeni, İbranice).

Değişken yazı tipleri

Değişken yazı tipleri, metnin görünümünü hassas bir şekilde denetlemek için iyidir.

Yazı tipi ailesi Eksenler Notlar
Bahnschrift Ağırlık, Genişlik Latin, Yunanca ve Kiril'i destekleyen değişken yazı tipi.
Segoe UI Değişkeni Ağırlık, Optik Boyut Latin, Yunanca ve Kiril'i destekleyen değişken yazı tipi.

Semboller ve simgeler

Yazı tipi ailesi Stil Notlar
Segoe MDL2 Varlıkları Düzenli Uygulama simgeleri için kullanıcı arabirimi yazı tipi. Daha fazla bilgi için Segoe Fluent Icons yazı tipi makalesine bakın.
Segoe Kullanıcı Arayüzü Emojisi Düzenli Emoji için kullanıcı arabirimi yazı tipi.
Segoe UI Simgesi Düzenli Simgeler için yedek yazı tipi.
  • Last updated on