it-swarm-tr.com

En uygun yazı tipi boyutu var mı?

Katıldığım çoğu web sitesi projesi için, toplu metnin yazı tipi boyutu genellikle 12px - 13px'dir, ancak bunun iyi bir boyut olup olmadığını merak ediyorum. Web sitelerindeki yazı tipi boyutlarının, toplu metinlerin yazdırılan yazı tipi boyutlarıyla eşleşmesi için yaklaşık 17 piksel olması gerektiğini söyleyen bir makale okuduğumu hatırlıyorum.

En uygun yazı tipi boyutu var mı? Ortalama bir kullanıcı için ne zaman çok büyük/küçük bir şey olur?

Küçük/orta/büyük yazı tipi boyutları için herhangi bir pro/eksileri var mı?

Güncelleme:
Gerçek testler kullanıcı tepkileri vb. İle ilgili deneyiminizi almak istiyorum. Bu kolay, bu ve bu çok büyük veya küçük, ama kullanıcıların bazen sürpriz ve farklı tepki verdiklerini öğrendim uzman görüşleri .

Ayrıca yazı tipi boyutlarını değiştirme yeteneği iyi bir tartışmadır, ancak burada istenen şey değildir. Hakkında daha fazla bilgi edinmek istediğim, kullanıcıların farklı yazı tipi boyutlarına nasıl tepki verdikleri, nasıl değiştirebilecekleri değil.

56
googletorp

Bu çok tartışılan bir konudur. Bunu açıklamanın en iyi yollarından biri sunumdan Geliştiriciler için tasarım: ön uçlarınızı daha az emmek Idan Gazit.

Bu, aşağıdaki slaydı vardı: alt text Bu normal bir ekranda 16 piksel metin ve bir kitapta 12pt metin. Mesaj, 12pt'nin bir kitap için mükemmel olduğu, ancak genellikle okuyucuya bir ekrandan çok daha yakın tutulduğu. Mesafeyi göz önünde bulundurarak, ekrandaki 16 piksel ve kitaptaki 12pt yaklaşık aynı boyutta görünüyor. Kağıt üzerinde 12pt = ekranda 16 piksel

Daha küçük metinlerin tercih edildiği her türlü istisna vardır. Ancak daha uzun metnin en iyi şekilde okunabilmesi için 16 piksel kabul ediyorum.

em veya % gibi ölçeklenebilir birimlerin gibi sabit boyutlu birimlerden değiştirilmesi önerilir. pt veya px . Devamını oku: CSS Yazı Tipi Boyutu: em'e karşı px'e karşı pt'ye karşı yüzde

34
user745

En uygun yazı tipi boyutu diye bir şey yoktur. Birini aramak önemli bir şeyi unutacağınız anlamına gelir: metnin okunabilirliği yalnızca büyüklükte bir ürün değildir.

Son beş yılda bir UI tasarımcısı olarak bir düzine web sitesi oluşturdum ve hepsinin farklı kitleleri vardı. Bulduğum şeylerden biri, büyüklüğün en büyük faktör olmadığıydı. Metin görüntüleme ile ilgili farklı yönlerin birleşimidir:

  • kontrast
  • font ailesi
  • satır yüksekliği
  • sayfadaki konumu

Bunları birleştirmek genel okunabilirlik için kaba bir metriğe yol açıyor ve bunu metin için en önemli tasarım hedefi olarak buldum.

Testten bir fıkra olarak (sizden beri): Ana kitlenin bilgisayar dışı bilgili kullanıcılar olduğu aylık 700 bin ziyaret ile bir topluluk sitesinde çalıştım. Vücut tipi için 12px Verdana ve başlıklar için 14px-16px Arial kullandık. Bazen daha az önemli metinler için 11px Verdana'ya gri renkle düşeceğiz. Sitede kullanılabilirlik testleri yaparken, metnin boyutu hakkında değil, tasarımın çevresindeki renklerin bir lambaya bakıyormuş gibi hissettirdiği hakkında geri bildirim aldık. Bunu, sitenin çok parlak olduğu şeklinde yorumladık ve tüm tasarımın kontrastını daha az parlak olacak şekilde ayarladık. Kısmen bu değişikliklerden ve kısmen de navigasyon yapısındaki değişikliklerden dolayı, ziyaretçi başına sayfa görüntülemelerde önemli bir aylık artış gördük.

Küçük yazı tipi boyutları hakkında hatırlanması gereken bir şey, bir amacı vardır: başka bir şeyden daha küçük bir şeye ihtiyacınız olduğunda (duh!). Ancak bir UI tasarımcısı olarak, işinizin arayüzde netlik ve kullanılabilirlik (diğer şeylerin yanı sıra) oluşturmak olduğunu ve vurgulayarak kullanıcı arayüzünün bazı öğelerini kullanılabilirliğini artırabilirsiniz. Hangi öğelerin ölçeklendirilmesi gerektiğine ve metnin hangi yönlerinin değiştirilmesi gerektiğine karar vermek size kalmıştır (yukarıdaki listemden).

20
Rahul

12px çoğu insan için iyi çalışıyor gibi görünüyor. 17px'de bir şeye sahip olmak okumayı zorlaştırır ve 10px'in altında olması da onu zorlaştırır. Bence 12-13px iyi bir rehber.

Ama gerçekten, metin boyutunuzu 1em gibi bir şeye ayarlamanız gerekir. Bunun nedeni, bazı tarayıcıların kullanıcıların piksel olarak ayarlanmışsa metni yeniden boyutlandırmasına izin vermemesidir. Hangi metin boyutuna sahip olursanız olun, keskin gözleri olan insanlar metni küçülterek daha fazla okuyabilirler ve kötü görme yeteneği olan kişiler metni büyütür.

Sadece 1em'de bir şeyler ayarlayın ve geri kalanı insanlar ve tarayıcıları çalışmasına izin verin.

Düzeni yönetilebilir olup olmadığını görmek için sayfanızı farklı yazı tipi boyutlarıyla test etmek iyidir.

9
Vincent McNabb

Son bilimsel kanıtlara göre:

  • 18 ve 22 puan önemli ölçüde iyileştirilmiş objektif okunabilirliğe yol açacaktır (göz takip cihazı ile ölçülmüştür)
  • 10 ve 12 puan anlamada önemli ölçüde bozulmaya yol açacaktır (anlama soruları ile ölçülmüştür)
  • objektif okunabilirliği artan yazı tipi boyutuyla sürekli olarak iyileştiği için daha büyük olur.

Sözümü benim için alma. Ayrıntıları okuyun bilimsel makale .

7
Martin

En iyi yazı tipi boyutu bireyseldir ve kullanıcıların işletim sistemi/tarayıcısı tarafından ayarlanır. Yani değiştirmeyin.

Yazı tipini büyütmeniz gerekiyorsa (ör. Başlıklar), göreceli olarak yapın (ör.% 200 veya 2em).

Yazı tipi boyutunu asla küçültmeyin ve okunabilirliği korumak için her zaman iyi kontrast sağlayın.

5
George Pavelka

Hayır.
... pikselde değil, yine de.

En uygun boyutu ifade etmek için doğru birimler varsa, retinaya eğilmiş açı olacaktır.

Pks'e bakıyorsanız, okunabilirliği belirlemek için gereken üç faktörden sadece birine bakıyorsunuz1:

Nokta aralığı veya "çözünürlük" (piksel/mesafe) biçiminin doğru tanımı, pikselden gerçek mesafeye nasıl dönüştüğünüzdür.

Elbette ihtiyacınız olan okuma mesafesi, çünkü aynı boyuttaki karakterler her yerde eşit olarak okunamaz.

... ve elbette okunabilirlik şu şekilde artar:

  • daha yüksek piksel
  • daha yüksek nokta aralığı (veya daha düşük çözünürlük)
  • daha düşük okuma mesafesi

1Ayrıca metin rengi, arka plan rengi, yazı tipi, vb. Vardır (beyaz üzerine siyah olan kalın metin, turuncu üzerinde sarı renkli italik metinlerden daha küçük bir boyuta ihtiyaç duyar), ancak px, nokta aralığı ve okuma mesafesi yalnızca boyut 'a dayalı bir karar vermeniz gerekir.

3
A.M.

Bir yazı tipi boyutu ayarlamaya çalışmamalısınız. "Bunu taban çizgisinden daha büyük yap" (veya küçültmek için -N) şeklinde belirtmek için + N tuşunu kullanabilirsiniz. Belirttiğiniz herhangi bir boyut bazı durumlarda yanlış olacaktır; kullanıcıların sitenizde düzeltici işlem yapmasını gerektirmeyen tek uygulanabilir seçenek tarayıcının karar vermesine izin vermektir.

2
Monica Cellio

Yazı tipi boyutları için asla piksel kullanmalısınız. Full HD çözünürlüğü destekleyen 12 inç ekranda 14 piksel yazı tiplerini okumaya çalışmanız size 1-2 mm yüksekliğinde karakterler (ve bir saatten daha kısa sürede baş ağrısı) verir.

2
JanC

12px iyi, ancak aynı zamanda önemli olan, kullanıcıların yazı tipi boyutunu kendileri arttırma yeteneğine sahip olması ve sitenizin bu olduğunda kırılmamasıdır.

2
Ryan Shripat

Bu konuda bazı garip mesajlar ve kavram yanılgıları var. Birçok insan, metni nasıl okuduğumuzu ve anladığımızı bilimi ve iyi araştırılmış yönlerini göz ardı etmek istiyor gibi görünüyor. Olduğu gibi, bu konuda yeni standartlar araştırma sürecindeyim, işte şu anki mevcut durumun bir kısmı:

Sanat Bilimi

Mevcut araştırmalar, maksimum kontrastlı yazı tipine sahip normal görüşlü bireyler için optimum okuma hızının 0,2 ° ila 2 ° görüş açısı arasındaki bir x yüksekliği olduğunu tanımlamıştır. X yüksekliği, bir yazı tipinin küçük x harfinin gerçek dikey boyutudur. Açıkçası gerçek yazı tipi boyutu görüntüleme mesafesine göre değişecektir, ancak neyse ki CSS referans pikseli - px - görsel açıya dayanmaktadır. 0,2 ° 'lik görsel açı, kritik baskı boyutu olarak bilinir, çünkü maksimum okuma hızının elde edildiği nokta budur. (2 ° 'nin üstünde, geri gider.)

Bir piksel 0,0213 derece veya 1,278 dakika yaydır. Bu, 28d uzaklıktaki 96dpi @ piksel yoğunluğuna sahip bir cihaza dayanmaktadır. Böylece cihaz üreticileri, istenen/beklenen görsel mesafeye göre bir boyut ayarlamak için referans pikselini kullanabilir. Bu W3C CSS standartları hakkında tartışılmıştır. Cihaz üreticileri, istenen görüntüleme mesafesine göre gerçek rasterleştirme boyutunu ayarlamak için referans pikselini kullanır. 16px, 16 cihaz pikseli olmak zorunda değildir. 2: 1 piksel oranına sahip bir iPhone'da, örneğin 32 cihaz pikseli olur.

Bu nedenle, web için kritik baskı boyutu 9,4 piksel x yüksekliktir. Belirli yazı tipi tasarımına bağlı olarak, bu 17px ile 20px arasında bir yazı tipi ile ilgilidir. Bu, 18px'in istenen minimum yazı tipi boyutu olduğunu gösteren erişilebilirlik standartlarıyla sonuçlanmıştır.

Ama Bekleyin Daha Fazlası Var

Ayrıca kritik bir kontrast seviyesi vardır. Yukarıda belirtilen yazı tipi boyutları maksimum kontrast ile ilgilidir. Peki düşük kontrastlara ne dersiniz? Birçok tasarımcı, daha düşük kontrastlı renkler kullanarak sitelerinin okunabilirliğini ciddi şekilde etkilemektedir. Bunun bir kısmı, WCAG 2.0'ın mekansal frekansa göre doğru kontrastları belirlemede başarısız olmasından kaynaklanmaktadır. 4.5: 1 büyük bir yağ başlığı için gerekenden daha fazladır, ancak 4.5: 1 küçük ince gövde metni için yetersizdir.

Normalde görülebilenler için, kontrast duyarlılık fonksiyonunun zirvesindeki büyük yağ başlıkları için kritik kontrast% 10 kadar düşük olabilir. Ancak, küçük ince yazı tiplerinin çok yüksek uzamsal frekanslarında, kontrastın 20+ kat daha yüksek olması gerekir. Tüm metnin aynı CSS renginde olduğu aşağıdaki şemaya bakın (ve bu, kenar yumuşatmanın metin kontrastını tüm tanıma ötesinde yönetme şeklini tartışmıyor).

contrast sensitivity curve sowing relation to text size

Böylece, Yazı tipi boyutu ile birlikte kontrast ve diğer birçok tasarım özelliği birlikte çalışarak "en okunabilir" bir metin sağlar. Ne olursa olsun, bu konudaki birçok afişin önerdiği 12 piksel yazı tipi boyutu şok edici derecede çok küçüktür ve bu şekle geldikleri yer kimsenin tahminidir. Belki bir telif hakkı bildirimi için 12 piksel gibi bir şey veya kimsenin okumasını istemediğiniz bir şey kullanabilirsiniz, ancak 12px hiçbir şekilde içerik metni için uygun bir boyut değildir.

Glifler Sahiptir

Resmi öneri minimum 18 piksel büyüklüğündedir, yine de Verdana (web kullanımı için tasarlanmış bir yazı tipi) gibi bazı yazı tipleri 16 piksele kadar iyi çalışabilir. Ancak Times New Roman, çok küçük bir x yüksekliğine ve genellikle zayıf okunabilirliğe sahip olduğu için asla 18 pikselden daha az bir değere ayarlanmamalıdır (teşekkürler Microsoft, ugh). Microsoft'un yönettiği başka bir yazı tipi için, Microsoft'un genellikle okunabilir tek aralıklı yazı tipini aldığı ve daha sonra çok ince ve hafif yaptığı "Courier New" i kullanmamaya çalışalım. Ne düşünüyorlardı?

Erişilebilirlik ve okunabilirlik için yazı tipi seçimiyle ilgili bazı genel değerlendirmeler için, ücretsiz olarak indirebileceğiniz bu ön PDF araştırma kapısı hesabımda: https: //www.researchgate. net/yayın/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

En Önemli Kapanış Yorumu

Yazı tipi boyutu olarak belirlediğinizden daha önemli olan, kullanıcıların içeriği bozmadan metinleri istedikleri boyuta YAKALAMAYA izin vermesidir. Mevcut standart% 200 yakınlaştırmayı kırılmadan belirtir, ancak bu yetersizdir. % 500 kullanıcı açısından çok daha makul.

DÜŞÜNMEK:

20/20 ortalama bir görüştür. Yukarıda bahsettiğim yazı tipi boyutları (18 piksel) bu ortalama 20/20 kullanıcısına dayanmaktadır. 20/40 aynı algı için bu boyutta İKİ KEZ'e ihtiyaç duyar. 20/200 kullanıcılarının bu boyutta TEN TIMES'e ihtiyacı vardır (yani% 1000 büyütmek isteyebilirler). Sayfanın daha büyük yazı tiplerine ve cihazın fiziksel boyutuna sahip olmasının etkilerini dikkate aldığı için minimum% 500'den bahsediyorum.

Şu anda araştırmada eksik olan bir teknoloji, en küçük yazı tiplerini yakınlaştırmak, ancak daha büyük yazı tiplerini daha az yakınlaştırmaktır, böylece büyük başlıklar okunabilirlik için çok büyük olmaz.

Bu arada, sitenizi okuyan kişilerin büyük bir bölümünün sizinki kadar iyi bir monitörünüz olmadığını ve sizinki kadar iyi bir görüşe sahip olmadığını düşünün. Sitenizin daha az şanslı bir kişi tarafından nasıl görülebileceği hakkında fikir edinmek istiyorsanız, ucuz, önemsiz, küçük, düşük çözünürlüklü bir monitör alın (depolamada bir tane olabilir) ve 3 ila 4 feet uzakta (yani metre). Sitenizi okuyabilir misiniz? Şimdi metni yakınlaştırın; küçük monitörün sınırları nedeniyle siteniz kırılıyor mu?

Bu, birçok kullanıcının birçok sitede sahip olduğu bir sorun türüdür. 20/15 görüşünüz ve güzel 32 inç retina ekranınız olması, kullanıcılarınızın neredeyse bu kadar görsel konaklama seviyesine sahip olduğu anlamına gelmez.

-Andy

0
Myndex

Erik ile aynı fikirdeyim, 16pt okunabilirlik açısından en iyi standart gibi görünüyor . Daha fazla bilgiyi buradan edinebilirsiniz: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell