Yazı tipini uygulama

Hiyerarşi, yazı tipi ağırlığı, boyutu, satır yüksekliği ve harf aralığındaki farklılıklarla iletilir. Güncellenen tür ölçeği, stilleri amaçlarını açıklayacak şekilde adlandırılmış altı rolde düzenler: display (görüntü), title (başlık), label (etiket), body (gövde), numeral (sayı) ve arc (yay). Yeni roller, ekran boyutundan bağımsızdır ve çeşitli kullanım alanlarında daha kolay uygulanabilir.

Görüntüleme stilleri

Görüntü, bir bakışta görülebilecek önemli bilgileri, önemli metrikleri, güveni veya etkileyici marka anlarını göstermek için kullanılan kısa ve büyük metin dizileri için kullanılır.

  • DisplayLarge, en büyük başlıktır. Görüntüler, ekrandaki en büyük metinlerdir. Kısa, kolayca göz atılabilen önemli bilgiler, önemli metrikler, güven veya belirgin bir ölçek ve stilden yararlanan etkileyici marka anları için ayrılmıştır.
  • DisplayMedium, ikinci en büyük başlıktır. Görüntüler, ekrandaki en büyük metinlerdir. Kısa, kolayca göz atılabilen önemli bilgiler, önemli metrikler, güven veya belirgin bir ölçek ve stilden yararlanan etkileyici marka anları için ayrılmıştır.
  • DisplaySmall en küçük başlıktır. Görüntüler, ekrandaki en büyük metinlerdir. Kısa, kolayca göz atılabilen önemli bilgiler, önemli metrikler, güven veya belirgin bir ölçek ve stilden yararlanan etkileyici marka anları için ayrılmıştır.

Başlık

Başlık, yol bulma mekanizması olarak kullanılan hiyerarşik metindir. Örneğin, sayfa, bölüm başlığı veya alt bölüm başlığı (TitleSmall durumunda) gibi.

  • TitleLarge, en büyük başlıktır. Başlıklar, ekranlardan daha küçüktür. Genellikle uzunluğu daha kısa olan ve orta düzeyde vurgu içeren metinler için ayrılır. Etkileşimli bileşenler için önerilmez, bunun yerine sayfa başlıkları veya alt başlıklar için önerilir.
  • TitleMedium, ortam başlığıdır. Başlıklar, ekranlardan daha küçüktür. Genellikle uzunluğu daha kısa olan ve orta düzeyde vurgu içeren metinler için ayrılır. Etkileşimli bileşenler için önerilmez, bunun yerine sayfa başlıkları veya alt başlıklar için önerilir.
  • TitleSmall en küçük başlıktır. Başlıklar, ekranlardan daha küçüktür. Genellikle uzunluğu daha kısa olan ve orta düzeyde vurgu içeren metinler için ayrılır. Etkileşimli bileşenler için önerilmez, bunun yerine sayfa başlıkları veya alt başlıklar için önerilir.

Etiket

Etiket, etkileşimde bulunulduğunda gerçekleşecek bir işlemi açıklayan bileşen düzeyindeki metinler için kullanılır. Etiket için en yaygın ve en çok kullanılan uygulama, bir düğme içinde yerleştirilmiş metin içindir.

  • LabelLarge en büyük etikettir. Etiketler, etkileşimli bileşenlere uygulanan başlık düğmelerindeki etiket gibi belirgin metinleri göstermek için kullanılır.
  • LabelMedium, en sık kullanılan ve orta düzeydeki etikettir. Etiketler, düğmelerdeki birincil etiket gibi metinleri görüntülemek için kullanılır ve etkileşimli bileşenlere uygulanır.
  • LabelSmall, küçük etikettir. Etiketler, düğmelerdeki ikincil etiket, kompakt düğmelerdeki etiketler ve etkileşimli bileşenlere uygulanan etiketler gibi metinleri göstermek için kullanılır.

Metin

Gövde, gövde metninin paragrafları, karmaşık veri görselleştirmesinde kullanılan metin, zaman damgaları ve meta veriler gibi içerik metinleri için ayrılmıştır.

  • BodyLarge en büyük gövdedir. Gövde metinleri, küçük metin boyutlarında iyi sonuç verdiği için genellikle uzun yazılarda kullanılır. Daha uzun metin bölümleri için serif veya sans serif yazı tipi önerilir.
  • BodyMedium, ikinci en büyük gövdedir. Gövde metinleri, küçük metin boyutlarında iyi sonuç verdiği için genellikle uzun yazılarda kullanılır. Daha uzun metin bölümleri için serif veya sans serif yazı tipi önerilir.
  • BodySmall, üçüncü en büyük gövdedir. Gövde metinleri, küçük metin boyutlarında iyi sonuç verdiği için genellikle uzun yazılarda kullanılır. Daha uzun metin bölümleri için serif veya sans serif yazı tipi önerilir.
  • BodyExtraSmall, en küçük gövde boyutudur. Gövde metinleri, küçük metin boyutlarında iyi sonuç verdiği için genellikle uzun yazılarda kullanılır. Daha uzun metin bölümleri için serif veya sans serif yazı tipi önerilir.

Sayısal

Sayısal metin stilleri, sayısal rakamlar için kullanılır ve genellikle birkaç karakterle sınırlıdır. Daha büyük ekran boyutlarında daha etkileyici özellikler gösterebilir. Minimum düzeyde yerelleştirme ve yazı tipi ölçeklendirme sorunlarıyla genişlik eksenini genişletme esnekliği sağlar.

  • NumeralsExtraLarge, rakamlar için en büyük roldür. Rakamlar varsayılan olarak tablo boşluğunu kullanır. Bunlar, yalnızca iki veya üç karakterle sınırlı olan ve yerelleştirme gerektirmeyen (ör. şarj ekranı veya saat seçici) bir bakışta görülebilen sayıları vurgular ve ifade eder.
  • NumeralsLarge, rakamlar için en büyük ikinci roldür. Rakamlar varsayılan olarak tablo aralığı kullanır. Bunlar, yerelleştirmenin gerekli olmadığı zamanın büyük gösterimleri (ör. geri sayım sayacı veya zaman seçici) ile sınırlı, büyük boyutlu sayı dizeleridir.
  • NumeralsMedium, rakamlar için üçüncü en büyük roldür. Rakamlar varsayılan olarak tablo aralığı kullanır. Bunlar, adım sayısı veya zaman seçici gibi yerelleştirme gerektirmeyen, kısa basamak dizileriyle sınırlı orta boyutlu sayılardır.
  • NumeralsSmall, rakamlar için dördüncü en büyük roldür. Rakamlar varsayılan olarak tablo aralığı kullanır. Bunlar, tarih ve saat seçiciler gibi yerelleştirme gerektirmeyen, daha küçük ölçekte vurgulanması gereken sayılar içindir.
  • NumeralsExtraSmall, rakamlar için en küçük roldür. Rakamlar varsayılan olarak tablo boşluğunu kullanır. Bunlar, egzersiz içi metrikler gibi yerelleştirme gerektirmeyen ve daha uzun basamak dizilerini barındırması gereken sayılar içindir.

Yay

Arc header text (Yay başlık metni), kullanıcı arayüzündeki yönlendirme işaretlerini oluşturan kavisli metinler (ör. zaman metni ve kavisli etiketler) için kullanılır. Yazı tipini özellikle bir eğri boyunca optimize eden ve karakterler kavisli bir ekranın üst kısmına yerleştirildiğinde alt kısmına yerleştirildiğine kıyasla karakterler arasında görünen farklı aralıkları barındıran özel yazı tipi ekseni.

En üst

  • ArcLarge, ark başlıkları ve başlıkları için kullanılır. Arc, ekranda kavisli bir yol boyunca yer alan metinler için kullanılır. Ekranın en üst veya en alt kısmındaki kısa başlık metni dizeleri (ör. onay yer paylaşımları) için ayrılmıştır.
  • ArcMedium, arc başlıkları ve başlıkları için kullanılır. Yay, ekranda kavisli bir yol boyunca yer alan metinler için kullanılır. Ekranın en üst veya en alt kısmındaki kısa başlık metni dizeleri (ör. sayfa başlıkları) için ayrılmıştır.
  • ArcSmall, sınırlı sayıda metin içeren yay dizeleri için kullanılır. Yay, ekranda eğri bir yol boyunca yer alan metinler içindir. Ekranın üst kısmındaki kısa ve eğri metin dizeleri (ör. saat metni) için ayrılmıştır.

Alt

  • ArcLarge, ark başlıkları ve başlıkları için kullanılır. Arc, ekranda kavisli bir yol boyunca yer alan metinler için kullanılır. Ekranın en üst veya en alt kısmındaki kısa başlık metni dizeleri (ör. onay yer paylaşımları) için ayrılmıştır.
  • ArcMedium, arc başlıkları ve başlıkları için kullanılır. Yay, ekranda kavisli bir yol boyunca yer alan metinler için kullanılır. Ekranın en üst veya en alt kısmındaki kısa başlık metni dizeleri (ör. sayfa başlıkları) için ayrılmıştır.
  • ArcSmall, sınırlı sayıda metin içeren yay dizeleri için kullanılır. Yay, ekranda kavisli bir yol boyunca yer alan metinler içindir. Ekranın alt kısmında yer alan kısa kavisli metin dizileri (ör. harekete geçirici mesaj) için ayrılmıştır.

Dizgi

Dikey dizgi, her boyutta metin okunabilirliğini sağlamak için dolgu, sınırlayıcı kutular ve taban çizgilerini kullanır. Dizgi, metin yeniden boyutlandırma, yoğunluk ve uyarlanabilir düzenlerde metin kullanma konularında karar verirken mühendislikle ilgili hususları ve platformunuzun kurallarını göz önünde bulundurun.

Temel çizgiyi kullanma

Temel çizgi, bir metin satırının üzerinde durduğu görünmez çizgidir. Material Design'da referans çizgisi, metin ile bir öğe arasındaki dikey mesafeyi ölçmede önemli bir özelliktir.

Bir metin satırı, görünmez taban çizgisi üzerinde yer alır

Okunabilirlik kontrolü

Uygulamanızda gösterilen yazı tiplerinin okunabilirliğini artırmak için bu okunabilirlik kontrollerini tamamlayın.

Tablo ve tek haneli sayılar

Değerlerin sık sık değişebileceği, animasyonlu olabileceği veya hızlı değişen değerlere sahip olabileceği yerlerde (ör. geri sayım sayaçları, seçiciler veya devam eden fitness metrikleri) orantılı rakamlar yerine tablosal rakamlar (tek aralıklı sayılar olarak da bilinir) kullanın.

Daha iyi tarama ve hizalama için değerleri görsel olarak hizalı tutmak ve sayıların veya bitişik metinlerin yer değiştirmesini önlemek için tek aralıklı tablo sayıları kullanın.

Satır yüksekliği

Satır yüksekliği, metin satırları arasındaki boşluktur ve doğrudan yazı tipi boyutuyla bağlantılıdır. Watch'ta dikey alan sınırlı olduğundan satır yüksekliği, okunabilirliği sağlamak ve görüntü alanında görünen metin satırlarını en üst düzeye çıkarmak için optimize edilir.

Genellikle satır yüksekliği oranının, yazı tipi boyutunun 1,2 katı (%120) olması en iyisidir. Ancak Wear OS cihazlarda alan sınırlı olduğundan satır yüksekliği oranının, yazı tipi boyutunun yaklaşık 1,1 katı (%110) olması yeterlidir.

Ek satır yüksekliği

Jetpack Compose ve Android'de tipografi, daha uzun karakterlerin çakışmasını önlemek için son satırda otomatik olarak ek satır yüksekliği kazanır. Bu nedenle bazı ekran görüntüsü testleri tam olarak eşleşmez.

Bu durumda, alt satırın satır yüksekliği oranı, yazı tipi boyutunun 1,25 katı (%125) olur. Ek satır yüksekliğiyle ilgili yardımcı kısa bilgilere göz atın.

Ek satır yüksekliği bilgi sayfası

Varsayılan stil (metin boyutu / satır yüksekliği) Her satırda varsayılan satır yüksekliği Yalnızca alt satırda ek satır yüksekliği Hesaplama
60 / 60 0 (%100) + 15 (%125) 60 / 75 (%15/125) (60+15)
50 / 50 0 (%100) + 13 (%126) 50 / 63 (%13/126) (50+13)
40 / 44 4 (%110) + 7 (%127,5) 40 / 51 (%11/127,5) (44+7)
30 / 34 4 (%113) + 3 (%123,3) 30 / 37 (%7/123,3) (34+3)
24 / 26 2 (%108) + 4 (%125) 24 / 30 (%6/125) (26+4)
20 / 22 2 (%110) + 3 (%125) 20 / 25 (5/125%) (22+3)
18 / 20 2 (%111) + 3 (%125) 18 / 23 (5/125%) (20+3)
16 / 18 2 (%112,5) + 2 (%125) 16 / 20 (4/125%) (18+2)
15 / 18 3 (%120) + 1 (%126,6) 15 / 19 (%4/126,6) (18+1)
14 / 16 2 (%114) + 2 (%128,5) 14 / 18 (4/128,5%) (16+2)
13 / 16 3 (%123) + 0 (%123) 13 / 16 (%3/123) (16+0)
12 / 14 2 (%116,6) + 1 (%125) 12 / 15 (%3/125) (14+1)
10 / 12 2 (%120) + 0 (%120) 10 / 12 (%2/120) (12+0)