Okunaklı Yazı Tipi Boyutlarını Kullanın

Metin okunması kolay olmalıdır

Birçok ekran boyutu var, bu nedenle sayfalarımızın metnini en küçük ve en büyük ekranlarda okunaklı (kolay okunabilir) hale getirmeliyiz.

“Metin okunamıyor” veya “okunaklı yazı tipi boyutu kullan” hataları alıyorsanız, bu yazı yardımcı olacaktır.

Yazı tipi boyutunuzun çok küçük olup olmadığını kontrol etmek için Mobil SEO aracını deneyin .

Herhangi bir boyuta sahip cihaz için yazı tipi boyutunu ayarlayın

Bunu başarmanın birkaç yolu vardır. Aşağıdaki seçenekleri tartışacağız …

  1. Bir mobil tema / şablon satın al
  2. Duyarlı tasarım / medya sorgularını kullanma (css)
  3. Sitenizin farklı sürümlerini tasarlayın

Web sayfanız ya da blogunuz için hangi seçeneği seçersiniz, ne zaman girmeye istekli olduğunuzu ve ne deneyim kazanacağınız (veya kazanmaya hazır olduğunuz) belirleyecektir.

1. Bir mobil tema veya şablon satın alma

Google’ın önerisi 1 duyarlı tasarım. Duyarlı bir tasarım temasıyla, sizin için zaten çözülen yazı tipi boyutu problemine sahip olacaksınız.

Modern duyarlı temalar ve şablonlar satın almak için iyi yerler ..

2. Duyarlı tasarım / medya sorgularını kullanın

CSS ile ilgili tecrübeniz varsa ve biraz daha öğrenmekten korkmuyorsanız, metninizin herhangi bir ekran boyutunda ne kadar okunabilir olduğunu ayrıntılı olarak kontrol edebilirsiniz.

Yazıtipi boyutu nasıl çalışır?

Fontunuzun boyutu CSS dosyanızda bildirilir. Hiçbir yazı tipi boyutu bildirilmemişse, tarayıcı normalde 16px olan varsayılan bir yazı tipi boyutunu kullanacaktır.

CSS’de yazı tipi boyutunu kontrol eden şey (şaşırtıcı değil) “font-size” olarak adlandırılır. CSS’deki gibi görünüyor …

p{font-size:120%;}

Yazı tipi boyutu, metninizin ne kadar büyük olması gerektiğini bildirmek için farklı ölçü birimlerini kullanabilir; yukarıdaki örnek kodda yüzdeyi kullanan piksel (px), noktalar (pt), EM’ler (em) ve yüzde (%).

Google’ın önerisi 2 o yazı tipi ve duyarlı tasarım söz konusu olduğunda aşağıda:

  • 16 CSS piksel taban font boyutu kullanın. Kullanılan yazı tipi özelliklerine göre boyutunu gerektiği gibi ayarlayın.
  • Tipografik ölçeği tanımlamak için taban boyutuna göre boyutları kullanın.
  • Metnin karakterleri arasında dikey boşluk olması gerekir ve her yazı tipi için ayarlanması gerekebilir. Genel öneri tarayıcının varsayılan satır yüksekliğini 1,2em kullanmaktır.
  • Kullanılan yazı tiplerinin sayısını ve tipografik ölçeği kısıtlayın: çok fazla yazı tipi ve yazı tipi boyutu dağınık ve aşırı karmaşık sayfa düzenlerine yol açar.

Yukarıdaki önerilerin her birini tartışalım …

16 CSS piksel taban font boyutu kullanın

Bu, sayfanız için açıkça 16 punto olarak bir yazı tipi boyutu bildirmek demektir. Bunu yapmak, CSS’yi, sayfa genişliğinde bir talimatın font boyutunun 16px olduğunu belirtmek için kullandığımızı ifade eder. Bu genellikle “gövde” veya “html” kullanılarak yapılır. Bu aynı zamanda fontlarımızı “ayarlamamızı” (bir sonraki adımda açıklanacaktır) bildirir.

Tipografik ölçeği tanımlamak için taban boyutuna göre boyutları kullanın.

Artık tüm sayfa için bir yazı tipi boyutu var, bu yazı tipi boyutunu ayarlamamız gerekecek, böylece H1’ler ve h2’ler vb. 16 piksel taban font boyutundan uygun bir şekilde daha büyük.

Google’ın bunu yapması için önerme biçimi, taban yazı tipi boyutuna “görece” dir. Örneklerimize ulaşmak için yüzdeleri kullanacağız.

Yukarıdaki resimde, H1 yazı tipi boyutunun “% 250” olarak ilan edildiğini görüyoruz. Bu temelde sadece H1 metnimizin taban boyutumuz olan 16px’ten iki buçuk kat daha büyük olacağı anlamına geliyor. Bu “bağıl” kısımdır. Bu, bir yazı tipi boyutu beyan ettiğimiz her yerde, tablonuzun yazı tipi boyutu olan 16px’imiz kadar her zaman daha büyük, daha küçük veya aynı boyutta olduğu anlamına gelir.

Bunu yaparak, sayfanızın hangi ekranda görüldüğüne bakılmaksızın, yazı tipi boyut ilişkilerimiz her zaman aynı kalacaktır. En küçük telefonunda veya en devasa TV ekranında gösterilen H1 modelimiz her zaman temel fontumuzun iki buçuk boyutu olacaktır.

Bu aynı zamanda, bir kullanıcı sayfayı mobil veya küçük ekranlarda görüntülediğinde, fontun kolayca okunabilir (okunabilir) olduğundan emin olmanın önemli bir parçasıdır.

Metnin karakterleri arasında dikey boşluk olması gerekir ve her yazı tipi için ayarlanması gerekebilir.

Okunabilir fontun bir diğer önemli özelliği, metin satırları arasındaki boşluk miktarıdır. CSS’de buna “satır yüksekliği” denir.

Google, en azından tarayıcı varsayılan satır yüksekliğini 1.2 kullanmanızı önerir; bu, metin satırları arasındaki boşluğun, metnin kendisinin en az 1.2 katı olduğudur.

Bunu gerçekleştirmek için satır yüksekliğini CSS’mizde bildirebiliriz …

p{font-size:120%;line-height:1.2;}

Genellikle kendi web sayfalarımızı masaüstü monitörümüzde okuruz ve sıkı metinler ve küçük satır yükseklikleri olabilir ve düzgün çalışır. Sorun, aynı metnin daha küçük bir ekranda göründüğünde ve yakınlaştırmadan okumak neredeyse imkansız olduğunda ortaya çıkar.

Hat yüksekliğinin en az 1.2 olduğundan emin olarak, yazımızın bu küçük ekranda bile daha kolay okunmasını sağlamaya yardımcı oluruz.

Bağlantı sorunlarını listele

Bağlantıların mobil cihazlarda daha fazla yere ihtiyacı vardır ve bu, sıralı veya sırasız listelerde bağlantılar olduğunda sıklıkla bir sorun haline gelebilir.

Bu sorunu çözmek için şunu deneyin:

ul{line-height:200%;}

Bu, listenin satır yüksekliğini artırarak bir listedeki bağlantıların etrafında bol yer olmasını sağlayacaktır. “200%” değerini sitenizin tasarımına uyan başka bir değere değiştirerek kendi ihtiyaçlarınız için çimdikleşmeniz gerekecek.

Kullanılan yazı tiplerinin sayısını ve tipografik ölçeği kısıtlayın

Çok fazla yazı tipi ve yazı tipi boyutu dağınık ve aşırı karmaşık sayfa düzenlerine neden olur. Aşırı derecede karmaşık olan sayfa düzenleri bir masaüstünde okunabilir veya okunabilir değil, ancak küçük bir ekrandan da kolayca okunamayacakları kesin.

“Küçük” metninizin bir mobil cihazda daha küçük olacağını unutmayın.

Herhangi bir aygıta yazı tipi okunabilir hale getirme

Metnimizin boyutu, farklı boyutlu ekranlar için beyan ettiğimiz medya sorgularıyla kontrol edilir . Mobil kullanıcılar için bir boyutta metin isteyeceğimizi ve masaüstleri için farklı bir metin boyutunu belirttiğimizi söyleyebiliriz.

Yazı tipi boyutunu kontrol etmek için basit bir örnek medya sorgusuna göz atalım.

html{font-size:100%;} 
@media(min-width:60em){html{font-size: 100%}}

Yukarıdaki örnekte, büyük ekranlar ve küçük ekranlar için aynı yazı tipi boyutu ilan edilmiştir. Yazı tipi boyutu “% 100” ve daha önce 16 punto büyüklüğünde taban büyüklüğünü ilan ettiğimizden, bu yazı tipi boyutunun hem masaüstü bilgisayarlarda hem de küçük mobil cihazlarda 16 piksel olacağı anlamına geliyor. Bu boyutlu yazı tipi farklı cihazlarda farklı şekilde gösterilebilir, ancak her zaman güzel ve okunaklı olacaktır.

Bu senaryoda, medya sorgumuzu değiştirmemiz gerekecek. Yukarıdaki ilk örnek kod hem masaüstü bilgisayarlar hem de mobil cihazlar için aynı değere (% 100) sahipti.

Bir masaüstünde daha dar metinli olacak, ancak daha küçük bir ekranda okunabilir metinlere sahip olacak bir medya sorgusuna göz atalım.

html{font-size:110%;} 
@media(min-width:60em){html{font-size: 90%}}

Bu medya sorgusu, metnin masaüstünde% 90 (varsayılan 16 piksellik) olması gerektiği, ancak mobil cihazın% 110’u (varsayılan 16 piksellik) olması gerektiği anlamına geliyor.

Bu, metnin farklı boyutlu ekranlarda kolayca okunabileceği anlamına gelir.

3. Sitenizin farklı sürümlerini tasarlayın

Web siteniz yanıt vericiyse, muhtemelen mobil ziyaretçilerinize bir mobil url veya dinamik sunum kullanıyorsunuzdur.

Bu senaryoda, web sayfalarınızın yalnızca farklı sürümlerini oluşturuyorsunuz ve normal CSS’yi kullanmak istediğiniz halde mobil sayfayı biçimlendirebilirsiniz.

Metninizin yeterince büyük olmasını (16px) ve satır yüksekliklerinin metnin kolayca okunmasını sağlamak için yeterince büyük olmasını sağlamak için iyi bir uygulama olacaktır.

Kısa Özet
Yayın Tarihi
Konunun Adı
Okunaklı Yazı Tipi Boyutlarını Kullanın
Verilen Puan
51star1star1star1star1star

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir