Yazı tip -leri
Not
Bu tasarım kılavuzu Windows 7 için oluşturulmuştur ve Windows'un daha yeni sürümleri için güncelleştirilmemiştir. Kılavuzun çoğu ilke olarak hala geçerlidir, ancak sunu ve örnekler geçerli tasarım kılavuzumuzu yansıtmaz.
Kullanıcılar, Microsoft Windows'daki diğer öğelerden daha fazla metinle etkileşim kurar. Segoe UI ("SEE-go" olarak okunur), Windows sistem yazı tipidir. Standart yazı tipi boyutu 9 noktaya yükseltildi.
segoe ui yazı tipiçizimi
Segoe UI yazı tipi.
Segoe UI ve Segoe aynı yazı tipi değildir. Segoe UI, kullanıcı arabirimi metin dizeleri için tasarlanan Windows yazı tipidir. Segoe, Microsoft ve iş ortakları tarafından baskı ve reklam malzemeleri üretmek için kullanılan bir markalama yazı tipidir.
Segoe UI ulaşılabilir, açık ve kolay bir yazı biçimidir ve sonuç olarak Tahoma, Microsoft Sans Serif ve Arial'dan daha iyi okunabilirliğe sahiptir. Hümalist sans serif'in özelliklerine sahiptir: büyük harflerinin değişen genişlikleri (örneğin dar E ve S, genişliklerin daha benzer, oldukça geniş olduğu Helvetica ile karşılaştırıldığında); küçük harflerinin stresi ve harf şekilleri; ve gerçek italik (endüstriyel görünümlü sans serifleri gibi "eğik" veya eğimli bir Roma dili yerine). Yazı biçimi, ekranda ve yazdırılırken aynı görsel efekti vermek için tasarlanır. Güçlü bir karakter veya dikkat dağıtıcı bir tuhaflık olmadan hümaist bir sans serif olacak şekilde tasarlanmıştır.
Segoe UI, Windows'ta varsayılan olarak açık olan ClearType için iyileştirilmiştir. ClearType etkinken, Segoe UI zarif, okunabilir bir yazı tipidir. ClearType etkinleştirilmeden Segoe UI yalnızca marjinal olarak kabul edilebilir. Bu faktör, Segoe kullanıcı arabirimini ne zaman kullanmanız gerektiğini belirler.
Segoe kullanıcı arabirimi Latin, Yunanca, Kiril ve Arapça karakterler içerir. Diğer karakter kümeleri ve kullanımları için oluşturulan, ClearType için iyileştirilmiş yeni yazı tipleri de vardır. Bunlar Japonca için Meiryo, Korece için Malgun Gothic, Çince için Microsoft JhengHei (Geleneksel), Çince için Microsoft YaHei (Basitleştirilmiş), İbranice için Gisha ve Tay dili için Leelawadee ve belge kullanımı için tasarlanmış ClearType Koleksiyonu yazı tiplerini içerir.
Meiryo, Verdana'ya dayalı Latin karakterler içerir. Malgun Gothic, Microsoft JhengHei ve Microsoft YaHei, özelleştirilmiş bir Segoe kullanıcı arabirimi kullanır. Bu yazı tiplerinin italik sürümlerinin kullanılması önerilmez. Malgun Gothic, Microsoft JhengHei ve Microsoft YaHei yalnızca normal ve kalın stillerde sağlanır, yani italik karakterler dik stiller eğilerek sentezlenir. Meiryo gerçek italik ve kalın italik içerse de, bu stiller yalnızca Italik stil uygulandığında Japonca karakterlerin dik kaldığı Latin karakterler için geçerlidir.
şeritlerinde komut kullanıcı arabiriminde Meiryo kullanıcı arabirimi olarak adlandırılan Meiryo çeşitlemesi tercih edilir.
Bu karakter kümelerini kullanarak yerel ayarları desteklemek için Segoe UI, yerelleştirme işlemi sırasında her yerel ayara bağlı olarak doğru yazı tipleriyle değiştirilir.
Segoe kullanıcı arabirimini ve diğer Microsoft yazı tiplerini Windows tabanlı bir programla dağıtmak üzere lisans etmek için Monotypeile iletişime geçin.
Not: stili ve ton ve kullanıcı arabirimi metin ile ilgili Yönergeleri ayrı makalelerde sunulmuştur.
Tasarım kavramları
Yazı tipleri, yazı tipleri, nokta boyutları ve öznitelikler
Geleneksel tipografide yazı tipi, yazı tipinin, nokta boyutunun ve özniteliklerin birleşimini açıklar. Yazı tipi, yazı tipinin görünümüdür. Segoe UI, Tahoma, Verdana ve Arial yazı biçimleridir. Nokta boyutu, artanların üstünden alta doğru ölçülen ve iç aralık (başta olarak adlandırılır) olan yazı tipinin boyutunu ifade eder. Bir nokta kabaca 1/72 inçtir. Son olarak, yazı tipi kalın veya italik özniteliklere sahip olabilir.
İnsanlar genellikle bu makalede olduğu gibi yazı tipi yerine yazı tipi kullanır ancak teknik olarak Segoe UI yazı tipi değil yazı tipidir. Özniteliklerin her birleşimi benzersiz bir yazı tipidir (örneğin, 9 punto Segoe UI normal, 10 punto Segoe UI kalın vb.).
Serif ve sans serif
Yazı biçimleri serif veya sans serif şeklindedir. Serif, genellikle yazı tipindeki harflerin vuruşlarını bitiren küçük dönüşleri ifade eder. Sans serif yazı tipinin serif'i yoktur.
Okuyucular genellikle belge içinde gövde metni olarak kullanılan serif yazı tiplerini tercih eder. Serifler, bir belgeye formalite ve zarafet hissi sağlar. Kullanıcı arabirimi metni için temiz bir görünüme ve bilgisayar monitörlerinin daha düşük çözünürlüğüne ihtiyaç duyulması, sans serif yazı biçimlerinin daha iyi bir seçim olmasını sağlar.
Karşıtlık
Metnin parlaklığı ile arka plan arasında büyük bir fark olduğunda metnin okunmasının en kolay yoludur. Beyaz arka plan üzerinde siyah metin, çok açık bir arka plan üzerinde en yüksek karşıtlık koyu metin verir, aynı zamanda yüksek karşıtlık sağlayabilir. Bu birleşim birincil kullanıcı arabirimi yüzeyleri için en iyisidir.
Koyu arka plandaki açık metin iyi karşıtlık sunar, ancak açık arka plandaki koyu metin kadar iyi değildir. Bu birleşim, birincil kullanıcı arabirimi yüzeylerine göre vurgularını çıkarmak istediğiniz Gezgin görev bölmeleri gibi ikincil kullanıcı arabirimi yüzeylerinde iyi çalışır.
Kullanıcıların metninizi okuduğuna emin olmak istiyorsanız, açık arka planda koyu metin kullanın.
Affordances
Metin, nasıl kullanıldığını belirtmek için aşağıdaki affordances kullanabilir:
- Işaretçi. I-bar ("metin seçme") işaretçisi metnin seçilebilir olduğunu belirtirken, sol işaret eden ok ("normal seçim") işaretçisi metnin seçilemez olduğunu gösterir.
- Düzeltme imi. Metinde giriş odağı olduğunda, şapka işareti seçilebilir veya düzenlenebilir metindeki ekleme/seçim noktasını gösteren yanıp sönen dikey çubukdur.
- Kutu. Metnin çevresinde düzenlenebilir olduğunu belirten bir kutu. Sununun ağırlığını azaltmak için kutu yalnızca düzenlenebilir metin seçildiğinde dinamik olarak görüntülenebilir.
- Ön plan rengi. Açık gri, metnin devre dışı bırakıldığını gösterir. Gri olmayan renkler, özellikle de mavi ve mor, metnin bir bağlantı olduğunu gösterir.
- Arka plan rengi. Açık gri arka plan zayıf bir şekilde metnin salt okunur olduğunu gösterir, ancak uygulamada salt okunur metin herhangi bir renk arka planına sahip olabilir.
Bu affordance'lar aşağıdaki anlamlar için birleştirilir:
- Düzenlenebilir. Metin seçimi işaretçisi, şapka işareti (giriş odağında) ve genellikle beyaz arka plan üzerinde olan bir kutuda görüntülenen metin.
- Salt okunur, seçilebilir. Seçme işaretçisi ve şapka işareti içeren metin (giriş odağında).
- Salt okunur, seçilemez. Ok işaretçisi olan metin.
- Sakat. Bazen gri bir arka plan üzerinde, ok işaretçisi olan açık gri metin.
Salt okunur metnin geleneksel olarak gri bir arka planı vardır, ancak gri arka plan gerekli değildir. Aslında, özellikle büyük metin blokları için gri bir arka plan istenmeyen olabilir, çünkü metnin devre dışı bırakıldığını ve okumayı önerilmez.
Erişilebilirlik ve sistem yazı tipi, boyutları ve renkleri
Metni engelli veya engelli kullanıcılar için erişilebilir hale getirme yönergeleri basit bir kurala dönüştürülebilir: Her zaman sistem yazı tipini, boyutlarını ve renklerini kullanarak kullanıcının ayarlarına saygı gösterin.
Tek bir şey yaparsanız...
Sistem yazı tipini, boyutlarını ve renklerini her zaman kullanarak kullanıcının ayarlarına saygı gösterin.
Developers: From code, GetThemeFont API işlevini kullanarak sistem yazı tipi özelliklerini (boyutu dahil) belirleyebilirsiniz. GetThemeSysColor API işlevini kullanarak sistem renklerini belirleyebilirsiniz.
Kullanıcıların sistem teması ayarları hakkında herhangi bir varsayımda bulunamadığınız için şunları yapmalısınız:
- Yazı tipi renklerinizi ve arka planlarınızı her zaman sistem teması renklerini temel alır. Sabit RGB (kırmızı, yeşil, mavi) değerlerine göre hiçbir zaman kendi renklerinizi oluşturun.
- Sistem metni renklerini her zaman karşılık gelen arka plan renkleriyle eşleştirin. Örneğin, metin rengi için COLOR_STATICTEXT seçerseniz arka plan rengi için de COLOR_STATIC seçmeniz gerekir.
- Sistem yazı tipinin orantılı boyutlu varyasyonlarını temel alarak her zaman yeni yazı tipleri oluşturun. Sistem yazı tipi ölçümleri göz önünde bulundurulduğunda kalın, italik, daha büyük ve daha küçük çeşitlemeler oluşturabilirsiniz.
Programınızın kullanıcıların ayarlarına saygı duymasını sağlamanın basit bir yolu, farklı bir yazı tipi boyutu ve yüksek karşıtlık renk düzeni kullanarak test etmektir. Tüm metinler seçilen renk düzeninde doğru şekilde yeniden boyutlandırılmalı ve görüntülenmelidir.
Kullanım desenleri
Metinde çeşitli kullanım desenleri vardır:
Kullanım | Açıklama |
---|---|
Başlık çubuğu metni Başlık çubuğundaki pencereyi tanımlayan metin. |
Başlık çubuğu metin yazı tipiörneği |
Ana yönergeler Sayfada, pencerede veya iletişim kutusunda yapılması gerekenleri açıklayan metin. |
Ana yönergeler metin yazı tipiörneği |
İkincil yönergeler Sayfa, pencere veya iletişim kutusunda ne yapılması gerekenleri açıklayan ek metin. |
İkincil yönergeler metin yazı tipiörneği |
Normal metin Kullanıcı arabiriminde görüntülenen normal (salt okunur) metin. |
Normal metin yazı tipiörneği |
vurgulanmış metin Kalın metin, metnin ayrıştırmasını kolaylaştırmak ve kullanıcıların okuması gereken metinlere dikkat çekmek için kullanılır. italik metin, metne kelimenin tam anlamıyla başvurmak (tırnak işaretleri yerine) ve belirli sözcükleri vurgu etmek için kullanılır. |
Vurgulanmış metin yazı tipiörneği |
düzenlenebilir metin Kullanıcıların düzenleyebilecekleri metin bir kutuda gösterilir. sununun ağırlığını azaltmak için kutu yalnızca düzenlenebilir metin seçildiğinde görüntülenebilir. |
Düzenlenebilir metin yazı tipiörneği |
devre dışı bırakılmış metin Devre dışı bırakılmış denetimlerin etiketleri gibi geçerli bağlama uygulanmayan metin. devre dışı bırakılan metin, kullanıcıların (normalde) metni okuma zahmetinde bulunmaması gerektiğini belirtir. |
Devre dışı bırakılmış metin yazı tipiörneği |
Bağlantıları Başka bir sayfaya, pencereye veya yardım konusuna gitmek veya komut başlatmak için kullanılan metin. |
Bağlantı metni yazı tipiörneği![]() |
Grup üst bilgisi Liste görünümünde öğeleri gruplandırmak için kullanılan metin. |
Grup üst bilgisi metin yazı tipiörneği |
Dosya adı Dosya adı metni (yalnızca içerik görünümünde). |
![]() |
Belge metni Belgelerde kullanılan metin (kullanıcı arabirimi metninin aksine). |
Belge metni yazı tipiörneği |
belge başlıklarını Belge içinde başlık olarak kullanılan metin. |
Belge başlıkları metin yazı tipiörneği |
Yönerge -leri
Yazı tipleri ve renkler
- Aşağıdaki yazı tipleri ve renkler Windows Vista ve Windows 7 için varsayılandır.
Desen | Tema simgesi | Yazı Tipi, Renk |
---|---|---|
Başlık çubuğu metin yazı tipiörneği |
CaptionFont |
9 nk. siyah (#000000) Segoe KULLANıCı Arabirimi |
Ana yönergeler metin yazı tipiörneği |
MainInstruction |
12 nk. mavi (#003399) Segoe KULLANıCı Arabirimi |
İkincil yönergeler metin yazı tipiörneği |
Talimat |
9 nk. siyah (#000000) Segoe KULLANıCı Arabirimi |
Normal metin yazı tipiörneği |
BodyText |
9 nk. siyah (#000000) Segoe KULLANıCı Arabirimi |
Vurgulanmış metin yazı tipiörneği |
BodyText |
9 nk. siyah (#000000) Segoe UI, kalın veya italik |
Düzenlenebilir metin yazı tipiörneği |
BodyText |
Kutuda 9 nk siyah (#0000000) Segoe UI |
Devre dışı bırakılmış metin yazı tipiörneği |
Sakat |
9 nk. koyu gri (#323232) Segoe UI |
Bağlantı metni yazı tipiörneği |
HyperLinkText |
9 pt. mavi (#0066CC) Segoe kullanıcı arabirimi |
![]() |
Sıcak |
9 pt. açık mavi (#3399FF) Segoe UI |
Grup üst bilgisi metin yazı tipiörneği |
11 nk. mavi (#003399) Segoe KULLANıCı Arabirimi |
|
![]() |
11 nk. siyah (#0000000) Segoe UI |
|
Belge metni yazı tipiörneği |
(yok) |
9 nk siyah (#000000) Calibri |
Belge başlıkları metin yazı tipiörneği |
(yok) |
17 nk siyah (#000000) Calibri |
- Kullanıcı arabirimi teknolojisine ve Windows'un hedef sürümüne göre yazı tipleri seçin ve pencere düzenlerini iyileştirin:
UI teknolojisi | Hedef Windows sürümü | Kullanılacak ve iyileştirecek yazı tipleri |
---|---|---|
Windows Presentation Foundation |
Tüm |
WPF tema bölümlerini kullanın. |
Win32 veya WinForms |
Windows Vista veya üzeri |
Uygun Segoe UI yazı tipini kullanın. |
Genişletilebilir bileşenler veya Windows Vista öncesi |
Windows XP ve Windows 2000'i hedeflemek için, Tahoma ile eşlenen 8 punto MS Shell Dlg 2 sahte yazı tipini kullanın. Windows'un önceki sürümlerini hedeflemek için Windows 2000 ve Windows XP'de Tahoma ve Windows 95, Windows 98, Windows Millennium Edition ve Windows NT 4.0'da MS Sans Serif ile eşlenen 8 punto MS Shell Dlg sahte yazı tipini kullanın. |
-
Geliştiricileri:
- Sabit düzen kullanan öğeler için (Windows iletişim kutusu şablonları ve WinForms gibi), önceki tablodan uygun yazı tipini sabit kodlayın.
- Dinamik düzen (Windows Presentation Foundation gibi) kullanan öğeler için tema yazı tiplerini kullanın. Tema simgesine dayalı metin çizmek için DrawThemeText gibi tema API'lerini kullanın. Tema hizmetinin çalışmadığı durumlarda sistem ölçümlerini temel alan bir alternatife sahip olduğundan emin olun.
- Segoe kullanıcı arabirimi için 9 punto veya daha büyük bir yazı tipi boyutu kullanın. Segoe UI yazı tipi bu boyutlar için iyileştirilmiştir, bu nedenle daha küçük boyutları kullanmaktan kaçının.
- Sistem metni renklerini her zaman karşılık gelen arka plan renkleriyle eşleştirin. Örneğin, metin rengi için COLOR_STATICTEXT seçerseniz arka plan rengi için de COLOR_STATIC seçmeniz gerekir.
- Sistem yazı tipinin orantılı boyutlu varyasyonlarını temel alarak her zaman yeni yazı tipleri oluşturun. Sistem yazı tipi ölçümleri göz önünde bulundurulduğunda kalın, italik, daha büyük ve daha küçük çeşitlemeler oluşturabilirsiniz.
- Gri arka plan yerine açık bir arka planda büyük salt okunur metin blokları (lisans koşulları gibi) görüntüleyin. Gri arka planlar, metnin devre dışı bırakıldığını ve okumayı önerilmez.
- Metnin okunmasını kolaylaştırmak için en fazla 65 karakterlik bir satır uzunluğu dikkate alın. (Karakterler harf, noktalama işareti ve boşluk içerir.)
Öznitelik
- Çoğu kullanıcı arabirimi metni herhangi bir öznitelik olmadan düz olmalıdır. Öznitelikler aşağıdaki gibi kullanılabilir:
- Kalın. Metnin ayrıştırma işlemini kolaylaştırmak için denetim etiketlerinde kullanın. Kullanıcıların okuması gereken metne dikkat çekmek için dikkatli kullanın. Çok fazla kalın kullanılması etkisini azaltıyor.
- İtalik. Tırnak işaretleri yerine metne tam anlamıyla başvurmak için kullanın. Belirli sözcükleri vurgularken tedbirli kullanın. metin kutularında istemleri için kullanın ve düzenlenebilir açılan listeleri.
- Kalın italik. Kullanma.
- Altını çizmek. Bağlantılar dışında kullanmayın. Vurgu için bunun yerine italik kullanın.
- Tüm yazı tipleri kalın ve italik yazı tiplerini desteklemez, bu nedenle metni anlamak için hiçbir zaman önemli olmamalıdır.