Mobil Tipografi için 7 Basit Kural
Muhtemelen iyi tipografinin görünmez olduğunu duymuşsunuzdur, ancak iyi tipografinin okuma eylemini zahmetsiz hale getirdiğini söylemek daha doğru olur.
Göz bir metin çizgisi boyunca ilerlediğinde, sakkatalar denen atlayışlarda yapar; harfleri ve hatta kelimeleri okumazsınız, sözcük parçalarının anlık görüntülerini okursunuz ve beyniniz bulmayı umduğu şeyleri doldurur. Eğer beyin şaşırırsa, varsayımının doğru olup olmadığını kontrol etmek için gözleri geri gönderir. İyi tipografi, gözleriniz boyunca düzgün bir akış oluşturarak gözlerinizi yapmak zorunda olduğunuz işi en aza indirir.
Mobil cihazların herhangi bir tipografi uzmanı için doğal zorlukları vardır: alan sınırlıdır ve ortam ışığı genellikle zayıftır. Ancak, Web için kullandığımız tekniklerde basit ayarlamalar yaparak, mobil cihazlarda okunabilirliği geliştirebiliriz.
1. Kendinize yer verin
Popüler inanışın aksine, tipografi bir ekranda küçük dalgalı çizgilerle ilgili değildir; Tipografi, büyük ölçüde bunların içindeki ve etrafındaki alanla ilgilidir.
Tipografi, kendilerini çerçevelediği alandan çok, kendilerine mektup yazmaktan çok daha az borçludur.
Bunu anlamak için, fontların nereden geldiğini anlamaya yardımcı olur: 'o' (ve 'b', 'c', 'p', vb.) Ortasındaki delik “sayaç” olarak adlandırılır. Orijinal baskı makinelerinde kullanılmak üzere metalden oyulmuştur, bu tezgahlar oyulmuş metal bir zımba tarafından yaratılmış ve daha sonra bir levhaya sürülmüştür. İlk tip tasarımcılar aslında basmayacak şekillerle çalışıyorlardı. Tipografi, kendilerini çerçevelediği alandan çok, kendilerine mektup yazmaktan çok daha az borçludur.
Hiyerarşi hakkında konuştuğumuzda, genellikle
aracılığıyla
ve muhtemelen
. Ancak, bir satırın veya paragrafın akışını etkileyen ek bir hiyerarşi vardır ve bu da uzaysal hiyerarşidir: Harfler arasındaki boşluk sözcükler arasındaki boşluktan daha azdır, sözcükler arasındaki boşluk, çizgiler arasındaki boşluktan daha azdır.
Mobilde optimum okunabilirlik için, uzaysal hiyerarşiye özellikle dikkat edin, karakterlerin, çizgilerin ve paragrafların karakterlerin gestalt tarzı gruplandırılması, doğal ışıkta daha önemli.
2. Ölçümü alın
Ölçü , bir metin satırının uzunluğudur. Ya da, her satırın tam olarak uyması nadir olduğundan, bir metin satırı için ideal uzunluktur.
Genel olarak kabul edilen, rahat okuma için ideal ölçü 65 karakterdir. Ölçümün fiziksel uzunluğu, yazı karakterinin tasarımına, izlemeye (aşağıya bakın) ve kullandığınız tam metne bağlı olacaktır. PT Serif'de yer alan bu makalenin ilk 65 karakteri, Ubuntu'da 27.3125em'de, Açık Sans, 28.4375em'de 26.875em genişliğindedir; italik, küçük harf veya bir düzine diğer tipografik detay eklediysem daha fazla değişecektir.
Bir masaüstü tarayıcısının kenarına 65 karakterin geçmesi nadirdir, ancak çoğu mobil cihazda 65 karakter (okunaklı olması için yeterince büyükse), tarayıcının sınırlarının ötesine uzanır. Sonuç olarak, mobil cihazlar için önleminizi daraltmak zorunda kalıyorsunuz.
Mobil bir ekranda ölçmek için yaygın olarak kabul edilen bir standart yoktur, ancak geleneksel olarak gazete veya dergilerdeki dar metinler 39 karaktere ulaşır. Bu ideal ölçü yüzyıllar boyunca test edildiğinden, mobil tipografi için bize iyi hizmet eder.
3. Önce gevşetin, ardından önde
Lider , çizgiler arasındaki boşluktur ve çok sıkı bir şekilde ayarlandığında, bir çizginin sonundan takip edilecek bir sonraki zorluğun başlangıcına kadar sakkad sıçrama yapar. Çok gevşek bir şekilde ayarlandığında, kelimeler arasındaki boşluklar, genellikle nehirler olarak adlandırılanları oluşturarak, hattın düzgün akışını kesintiye uğratır.
l-r: ideal lider, çok sıkı, çok gevşek.
Önde gelen standartlar 1.4em civarındadır, ancak ekranlarım için çok sıkı olan deneyimlerimde: ekran üzerinde iyi çalışan bir yazı karakterinin en önemli özelliklerinden biri büyük sayaçlardır ve büyük sayıcılar, uzaysal hiyerarşiyi sürdürmek için biraz ekstra gerektirir. .
Bu kuralın tersine çevrilmesi, daha kısa bir önlemin daha az lider olmasını gerektirir. Bu yüzden muhtemelen masaüstü stilleri için biraz daha gevşek olmanızı sağlarken, mobil ekranlar için sıkmayı unutmayın.
4. tatlı nokta bulun
Tüm yazı tipleri en az bir tatlı noktaya sahiptir; Ekranda en iyi şekilde ürettikleri boyutun bir birleşimi ve tarayıcıda uygulanan kenar yumuşatma noktasının yazı tipi tasarımını mümkün olduğunca az çarpması.
Tatlı nokta genellikle, piksel çizgilerinde en fazla vuruşun sıralandığı noktadır - piksel fontları, eğer bunları hatırlarsanız, sadece tatlı noktalarına kadar işlendiğinde işe yarar.
Yazı tipini tatlı yerine yerleştirmek daha fazla kontrast oluşturur. Titizlikle algılanan cihaz laboratuarınızın dışındaki parıltılı gözükme olasılığı nedeniyle, mobil için tasarım yaparken kontrast özellikle önemlidir.
Önde gelen küçük ayarların tüm pikselleri itip çekeceğini göreceksiniz. Bence, mobil ekranlar için önde gelen kontrast kozları, bu yüzden tüm piksellerin üzerinde çizgi tutmaya karar vermeniz gerekiyorsa, bunu yapın.
Tasarımcılar için standart yaklaşım, bir taban çizgisi ızgarası kullanarak yazı dizilemektir, ancak mobil için bunun yerine x-yüksekliğini kullanmamız gerekir (x-yüksekliği kelimenin tam anlamıyla küçük harfin x 'yüksekliğidir). Okunurluk çalışmalarından beynin kelimeleri değil, altını değil, daha iyi bir sakkad akışını elde etmek için tanımladığını biliyoruz. Karakterlerimizin tepesinin piksellerle en yakın şekilde hizalanmasını sağlamalıyız.
5. paçavra kaybetme
Bir paçavra, bir metin bloğunun kenarıdır. Okuduklarınız çoğu sola hizalanmış (en azından latin tabanlı diller için), düzensiz bir sağ kenara neden olur.
Gözler bir çizginin bir ucundan diğerine atladığında, beyin bir sonraki sıçramanın açısını ve mesafesini yargılayabiliyor, eğer tüm atlayışlar tutarlı oluyorsa, bunu basamak taşları arasında koşarken düşünün. Sürekli aralıklıysa daha hızlı. Bu nedenle, metninizin sol kenarı düz olmalı, her satır aynı yerde başlayacak (tam tersi sağdan sola okunan diller için geçerlidir).
Sonuç olarak, iki veya üç satırdan daha fazla metni hizalamamalısınız.
Çoğu zaman, metin haklıdır, yani satırdaki sözcüklerin eşit aralıklarla yerleştirilmiş olması, böylece her iki tarafta da hiçbir paçavra yoktur. (Haklı tasarımın tasarımcıları blok halinde düşünmesini öğrettiği için haklı metnin modaya uygun olduğundan şüpheleniyorum.) Gerekçeli metin tutarsız boşluklarla sonuçlanır ve en kötü durumlarda bir satırda birkaç kelimeye yol açar ve bu da ciddi bir şekilde sarsılır. Gerekçeli metinle ilgili sorun, daha kısa bir ölçüyle daha da kötüleşir, bu nedenle haklı metin, mobilde okunamaz durumda olabilir.
l – r: sola hizalanmış, orta hizalı, haklı.
Düzenlilik sizin için gerçekten önemliyse, daha sonra metni yumuşatmak için metni tireler, ancak hiçbir zaman mobil cihazdaki metni doğrulamaz.
Düzgün metin bozukluğu, mobilde ek bir yarar sağlar: metin genellikle dikkat dağıtıcı durumlarda okunur ve okuyucular sık sık metinden uzaklaşır - istasyon adını kontrol etmek veya bir aramayı cevaplamak için. Bir bez, en son yeniden okuma ile gözün son konumunu yeniden konumlandırmasına yardımcı olan sağ sütundaki aşağı doğru rasgele bir şekil oluşturur.
6. Kontrastı azaltın
Metin ve arkaplan arasındaki karşıtlığı teşvik etmek isterken, farklı düzeydeki seviyeler arasında azaltmak istiyoruz.
Mobilde, büyük ölçüde daha az metin görünür ve böylece kontrast abartılı olur
Bunun nedeni, beyinlerimizin içeriğe dayalı olarak önemini yargılamasıdır. Başlıklar, masaüstünüzdeki vücut metninizin iki katı veya üç katı olabilir ve bu, ekranda daha fazla metin bulunduğundan işe yarar. Mobilde, büyük ölçüde daha az metin görünür ve böylece kontrast abartılır.
Çoğu tasarımcı, metni boyutlandırmak için bir çeşit Fibonacci dizisi kullanır. Mobil cihazlar için, tip boyutlarının kontrastını azaltmak için oranları sıkın. Örneğin, boyutu artırmak için altın oranını kullanıyorsanız, 1,618 ile çarpıyorsunuz demektir. Mobil cihazlar için, daha küçük bir oran al ve bunun yerine 1.382 ile çarp.
Masaüstü ekranları, mobil ekranlardan daha aşırı tipografik ölçeklere tolerans gösterir.
7. Ölçeğe göre izlemeyi ayarlayın
Mobil cihazlar için yazı tipi boyutlarımızı ayarladığımızda, izlemede gerekli değişikliklerin farkında olmalıyız .
(Karakter aralığı ayarlamamış olmanız gerektiğini söyleyeyim. Kerning iki harf çiftinin boşluklarıdır, böylece aralarındaki boşluk optik olarak diğer karakterler arasındaki boşluk ile tutarlıdır. Kerning, inşa edildiğinde yazı tipine eklenmiştir. ve muhtemelen aylar sürdü. Profesyonel olarak oluşturulmuş bir yazı tipi seçtiyseniz, doğru bir şekilde yapıldı ve doğru şekilde yapılmadığını düşünüyorsanız, farklı bir yazı tipi bulun.)
İzleme, karakter aralığı değil. İzleme yazı tipindeki tüm karakterlere uygulanan harf aralığıdır. Genellikle izlemeyi de ayarlamamalısınız.
Bu kuralın istisnaları, dipnotlar gibi başlıklar ve küçük metinler gibi büyük metinler içindir. Daha büyük metin daha az izleme gerektirir ve daha küçük metin daha fazla izleme gerektirir. Birincisi gruplamadan ve ikincisi kontrasttan faydalanmaktır. Başlıklarda değişiklik yaptıysanız veya genellikle daha sıkı bir izleme özelliğine sahip bir ekran yazı tipi kullanıyorsanız, küçülttüğünüzde izlemeyi biraz gevşetmeniz gerekebilir.
özet
Tipografi, tasarımcıların hayat boyu honlamalarını harcadıkları bir araçtır, çünkü her metin, her yazı biçimi ve her teknoloji yeni zorluklar getirir. Her bir durumda her zaman çalışacak sert ve hızlı kurallar yoktur.
Okunabilirliğe ulaşmak istediğinizde akılda tutmanız gereken üç ilke vardır: çizgiler boyunca düzgün bir akış, açık bir uzaysal hiyerarşi ve yeterli kontrast. Bu özellikle mobil web için geçerlidir.
Kendi gözünüzün kanıtı üzerinde göz ardı edilebilecek bir kural yoktur, ancak buradaki kılavuzlar, mobil cihazlarda güzel bir şekilde yerleştirilmiş metinler için ideal bir başlangıç noktası olarak hizmet edecektir.