Okunabilir Yazı Tipi Boyutları Kullanma

Bu kural, PageSpeed Insights, sayfadaki metnin okunamayacak kadar küçük olduğunu algıladığında tetiklenir.

Genel Bakış

Web yazı tipi boyutu dört yaygın birim ile belirtilebilir: Piksel (px), punto (pt), EM (em) ve yüzde (%).

  • Pikseller “CSS pikselleridir” ve cihaz boyutuna ve yoğunluğuna göre değişir.
  • Puntolar piksellerle ilişkili şekilde tanımlanır. Tek bir piksel 0,75 puntodur*.
  • EM ve yüzde “göreli” birimlerdir: Bunlar kullanılan yazı tipinin devralınan boyut ve özelliklerine göre değişir. 1 EM, %100'e eşdeğerdir.

* Ek notlara bakın.

Ayrıca, görünüm de yazı tiplerinin mobil cihazlarda nasıl ölçekleneceğini etkiler. Düzgün şekilde yapılandırılmamış görünüme sahip bir sayfa mobil cihazlarda küçültülür ve çoğu zaman sayfadaki metnin, çok küçük olduğundan okunamaz olmasına neden olur.

Öneriler

Öncelikle, yazı tiplerinin çeşitli cihazlarda beklendiği gibi ölçeklenmesini sağlayacak şekilde bir görünüm yapılandırın. Görünümü yapılandırdıktan sonra, aşağıdaki diğer önerileri uygulayın.

  1. 16 CSS piksellik bir taban yazı tipi boyutu kullanın. Kullanılan yazı tipinin özelliklerine göre, boyutu gerektiği gibi ayarlayın.
  2. Tipografik ölçeği belirlemek için taban boyuta göre olan boyutları kullanın.
  3. Metnin karakterleri arasında dikey aralık bulunmalıdır ve her yazı tipi için ayarlanması gerekebilir. Genel öneri, 1,2 em'lik tarayıcı varsayılan satır yüksekliğini kullanmaktır.
  4. Kullanılan yazı tipi sayısını ve tipografik ölçeği sınırlayın: Çok fazla sayıda yazı tipi ve yazı tipi boyutu kullanmak, dağınık ve fazla karmaşık sayfa düzenlerine neden olur.

Örneğin, aşağıdaki CSS snippet'i, taban yazı tipinin %75'i kadar (12 CSS piksel) yazı tipi boyutu olan "küçük" CSS sınıfına ve taban yazı tipinin %125'i kadar (20 CSS piksel) yazı tipi boyutu olan "büyük" CSS sınıfına sahip 16 CSS piksellik bir taban yazı tipi boyutunu belirtir.

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Mobil cihazlar için yazı tipiyle ilgili ek öneriler konusunda Android tipografi yönergelerine bakın.

Ek bilgiler

Uzunluk birimlerinin nasıl tanımlandığını anlamak için CSS 2.1 özellikleri dikkatli şekilde okunmalıdır. Bu doküman burada belirtilmeyen başka birimleri de içermektedir: inç, santimetre, milimetre ve pika. Kolayca gözden kaçırılabilecek bir şey de 1 CSS inçinin fiziksel 1 inçe her zaman eşit olmadığı gerçeğidir.

Tüm mutlak birimler birbirine göre tanımlanır. 1 piksel 0,75 puntodur; 1 punto 1 inçin 1/72'sidir; 1 inç 2,54 santimetredir vb. Ancak, bu birimlerin nasıl "sabitleneceği" cihaza bağlı olarak değişir. Örneğin, kağıda yazdırırken, 1 inç 1 fiziksel inç olarak sabitlenir, diğer tüm birimler ise fiziksel inç'e göre olmalıdır. Ancak bir mobil cihazda görüntülendiğinde, cihazlar "referans pikseli" olarak adlandırılan unsurla sabitleme yapar. 1 CSS pikseli, bu referans pikseline göre tanımlanır, diğer tüm birimler (inç, santimetre vb.) ise CSS pikseline göre ayarlanır. Bundan dolayı, bir mobil cihazda 1 CSS inç'i genellikle 1 gerçek, fiziksel inç'ten daha küçük bir boyutta görüntülenir.

Bu nedenle yazı tipi boyutlarınızı piksel kullanarak tanımlamanızı öneririz: Bazı tasarımcılar ve geliştiriciler kullanılan inç veya puntoyu gördüklerinde yanlış fikre kapılabilirler. Bunlar fiziksel boyutlardır ancak gerçek dünyadaki boyutlarla mutlaka aynı olmaları gerekmez. Bir pikselin, görüntülendiği cihaza bağlı olarak her zaman boyutunun değişebileceği düşünülebilir.

Son olarak, her yazı tipinin kendi özellikleri de vardır: boyut, aralık vb. Varsayılan olarak, tarayıcı her yazı tipini 16 piksel (CSS pikseli) boyutunda görüntüler. Bu çoğu durum için uygun bir varsayılan değerdir, ancak belirli bir yazı tipi için düzeltilmesi gerekebilir; yani varsayılan boyut, yazı tipinin farklı özellikleri için daha küçük veya daha büyük olacak şekilde ayarlanabilir. Varsayılan boyut ayarlandıktan sonra, daha büyük veya daha küçük yazı tipleri, piksel kullanılarak varsayılan boyuta göre tanımlanmalıdır. Ardından bunlar, sayfadaki birincil, ikincil ve diğer içerik türleri için metnin boyutunu ayarlamak üzere kullanılabilir.

Bazı mobil tarayıcılar, sayfalar için yazı tiplerini düzgün yapılandırılmamış bir görünümle ölçeklemeye çalışabilir. Bu ölçekleme biçimi, tarayıcıdan tarayıcıya değişir ve mobil cihazlarda okunabilir yazı tipleri sunma konusunda buna güvenilmemelidir. PageSpeed Insights, sayfanızdaki metni, tarayıcıya özgü yazı tipi ölçeklemeyi uygulamadan görüntüler.