Duyarlı Web Tipografi Kuralları

Duyarlı web tipografi zordur - hem tasarım pirzolası hem de teknik bilgi birikimine sahip olmanız gerekir. Fakat ancak zor olabilir, yanlış almak bir seçenek değildir, çünkü tipografi web tasarımının temel taşıdır.

Hem tasarım hem de kodu nasıl sağlıyorsunuz? Geliştiricileriniz piksel bastırıcı tasarımcılarla nasıl iletişim kurar? Tasarımcılarınız nonClanant olmayan geliştiricilerin tipografi hakkında nasıl özen gösterebilir? En hızlı ve en basit yolu, tasarımcılarınızı ve geliştiricilerinizi aynı dili konuşur, birbirlerine zanaat için saygı duymak ve web tipografisinin hem prensiplerini hem de sınırlamalarını anlamaya çalışıyor.

Bu makale, hem tasarımcılar hem de geliştiricilere, tipografi konusunda iletişime başlamak için kuruluşun bulunduğu vakfı sağlamayı amaçlamaktadır. Gerekli tasarım ilkelerini karşılayacağız ve için pratik çözümleri keşfeteceğiz. Duyarlı tipografi .

İyi tipografi nedir?

'İyi' her zaman özneldir; İletişimleri menteşe edebileceğimiz sabit bir çapa değil. Tasarımcılar ve geliştiriciler için etkili bir şekilde iletişim kurmaları için, her iki tarafın da anlayabileceği ortak bir paydadır hakkında konuşarak başlamalıyız. Bu küçük düşürücü tipografinin amacıdır.

Tipografi, metnin görünümüdür; Metin takıyoruz. Giyinme amacı, kullanıcının bir sohbet etmeyi çekecek kadar çekici hale getirmektir, ancak diğer tarafın konuşmadan dikkati dağıldığına dikkat edin.

Aynı şekilde, tipografinin amacı, okuyucuların metnin içeriğine odaklanmalarını ve kendilerini bırakmalarını sağlamaktır. Tanım gereği iyi tipografi, metnin iletişim amacını yerine getirmesine yardımcı olan tipografidir.

Okuyucuların odaklanmaları ve metnin içine dalması için iki şey olmalıydı. İlk olarak, tipografi uygun (eğer varsa) duyguları iletmelidir. İkincisi, metnin okunması kolay olmalıdır. Bu bizi doğru olmanız gereken dört temel özelliğe getiriyor.

• Font ailesi
• Yazı Boyutu
• Hat yüksekliği (ayrıca lider olarak da bilinir)
• Metin genişliği (ayrıca metin ölçüsü olarak adlandırılır)

Doğru Yazı Tipi ailesini almak, metnin altta yatan duygularını parlatır. Diğer üç özelliği elde edin Doğru, metninizin okunması kolay olduğunu sağlar. Çoğunlukla, tasarımcılar doğru yazı tipi ailesini bulmakta mükemmeldir. Öyleyse, bu makalenin geri kalanı için diğer üç faktöre odaklanacağız.

Okunabilir metin sanatı

Herhangi bir projedeki ilk adım koymak yazı Boyutu , satır yüksekliği ve Genişlik Vücudunuzun metninizin. Bu işlem dizinci denir. Bir kullanıcının ihtiyaçlarını içeren bir sayfa içeren bir sayfa ile çizerek başlayın. Mümkün olduğunca, bu sayfa, tasarımınız için ne işe yaradığı konusunda bilinçli bir seçim yapmanız gereken H1, H2, H3, gövde metni ve başlıklar gibi birden fazla unsur içermelidir. Sayfanızın ne kadar fazla elemanı içeriyorsa, tahtada çalışan bir tür şeması ayarlama şansınız ne kadar iyi olur.

Seçtiğinizde yazı Boyutu , satır yüksekliği Ve vücut metninizi ölçün, gerçek içerik kullandığınızdan emin olun. Gerçek içeriğiniz yoksa, Lorem Ipsum yerine Wikipedia'dan metin kullanın.

Ayrıca, bir okuyucunun gözleri ile ekran arasındaki mesafe farklı cihazlar için farklı olduğundan, kendinizi aynı duruma da aynı duruma sokmanız gerekir. Bir mobil cihaz için diziciyseniz, çıkışınıza bir telefonla bakın. Bir dizüstü bilgisayar için dizgi yapıyorsanız, dizüstü bilgisayarınızla birlikte masanızda oturun.

Kendinizi doğru ortama yerleştirdikten sonra, ilk seçerek dizgi işleminizi başlatın. yazı Boyutu , ardından ölçü ve sonunda satır yüksekliği . Mükemmel bir kombinasyon olmadığını unutmayın - sadece iyi tipografi yaptığınızı hissettiğiniz diğer sayfalara bakın ve hiçbirinin aynı kullanmadığını göreceksiniz. yazı Boyutu , satır yüksekliği ve ölçün. Peki, nişan aldığınız şey, okunması kolay olan metindir.

Doğru boyutları belirlemek, yazılı olarak açıklamak daha zordur, bu yüzden size yardımcı olacak bazı videolar yaptım yazı Boyutu , ölçmek ve lider .

İşte iyi bir yazı tipi boyutuna sahip olduğunuzdan, liderliğiniz ve önlem aldığınızdan emin olmak için bazı hızlı kılavuzlar.

Yazı tipiniz çok küçükse:

• Metni okumak için konsantre olmalısın
• Gözlerini karıştırmak zorundasın
• Yakınlaştırmak için dürtüsün var

Yazı tipiniz çok büyükse:

• İçeriği okumak yerine mektup biçimlerini fark etmeye başlarsınız.
• Bir seferde yalnızca bir ila üç kelimeyi okuyabilirsiniz.
• Uzaklaştırmak için dürtüsün var

Metin ölçünüzde çok uzunsa:

• Metni okumak için kafanı çevirmelisin.
• Midway konsantrasyonunu kaybedersiniz

Metin ölçünüzün çok kısa olması:

• Metin bir sonraki satıra geçtiğinde tahriş hissediyorsunuz
• Gözlerin sola ve sağa doğru zıplamadan yorulur

Lideriniz çok dar:

• Metin yoğun ve ezici hissediyor
• Yanlışlıkla yanlış metin çizgisini okudun

Lideriniz çok büyükse:

• Kelimelerin satırları arasındaki beyaz boşluktan rahatsız edersiniz

Her zaman iyi tipografinin tanımını hatırlayın: mükemmellikten sonra değilsiniz, sadece okunması kolay metin için toparlanıyorsunuz. Bunu yaparken, dizgi seçimlerinizi izleyicinizle test etmek isteyeceksiniz (arkadaşlar ve iş arkadaşları da harika testçiler yapar) haklı olduğunuzdan emin olmak için. Sadece gövde metnini dizemeyi bitirdiğinizde diğer elemanların boyutlarını ayarlamak için devam edin.

Diğer elementler dizgi

Birçok tasarımcı ve geliştirici seçti yazı Boyutu H1 ve H2 gibi unsurlar için görsel olarak ve bu sihirli sayıların tasarımlarında iyi çalışmasını umuyoruz. Ancak, sayıları ince havadan çekmeye gerek yoktur; Tipografiler, yüzyıllarca bu konuda yardımcı olmak için tipografi ölçeklerini kullanmışlardır. Yaptıklarınız, tipografi ölçeğinden öğenizin boyutu olarak bir numara seçmektir. Ne yazık ki, bu ölçekler doğrudan web için kullanılamaz çünkü baskı tasarımı için inşa edilmiştir.

Tim Brown, tipografi alanında bir uzman, modüler bir ölçek olarak adlandırılan bir çözüm ile ortaya çıktı. Tam olarak bir tipografi ölçeği gibi çalışır, ancak karar verdiğiniz vücut metni ile modüler ölçeği oluşturursunuz.

Modüler ölçeği oluşturmak için, vücut metnini alırsınız. yazı Boyutu (ayrıca baz font boyutu olarak da bilinir) ve bir ölçek alana kadar çok sayıda bir oranla çarpın. Genellikle, kullandığınız oranı müzikten türetilir (müziğin uyum içinde kökleri olduğu için). Yukarıda, bir yardımı ile oluşturulan bir ölçeğin örneğidir. Modüler ölçek hesap makinesi .

Modüler ölçeği inşa etmeyi bitirdiğinde, öğelerinizin geri kalanını seçerek, ölçekden bir numara seçerek yazı Boyutu . Ardından, okunaklı elemanların iyi bir dengesini elde edene kadar liderliği ayarlayın ve aynı işlemle ölçün.

Dikey ritim

Bir sonraki adım, bireysel elemanlara dikey ritim olarak adlandırılan bir teknik kullanarak birlikte jellere yardımcı olmaktır. Bir elemanın bir diğerine uyumlu bir şekilde akması için, onlara katılan şeyleri ayarlamamız gerekiyor: beyaz boşluk. Bu beyaz boşluk bir elemanı bir sonraki aydan ayırt edebilecek kadar büyük olmalıdır, ancak akışın kırılmamasını sağlamak için yeterince küçük olmalıdır.

Ne kadar beyaz boşluk kullanmalısınız? Birçok tasarımcı, etrafta tasarlamaları için kolay olan 10 piksel gibi bir rakam seçer. Birçok geliştirici, diğer taraftan, başka bir ızgara sisteminden (6px gibi) ya da çevrimiçi okudukları bir makalenin rastgele bir sayısını (6px gibi) kırma eğilimindedir. Bu ikisinin iletişim kuramayacağı şaşırtıcı değil.

Hayal edebileceğiniz gibi, beyaz boşluk için sihirli bir numaraya güvenmeye gerek yoktur; Birden fazla kullanabiliriz satır yüksekliği Vücut metnimizin değeri. Bunun nedeni, metinde beyaz alan modellerini içgüdüsel olarak tanırız. Desen daha güçlü olanı, hissettiğimiz daha güvenli ve daha kolay, zihinlerimizin içeriğe girmesine izin vermek.

Dikey ritmi kullanmak için, tek yaptığınız:

1. Elementler arasındaki beyaz boşluğu, tabanın bir katına ayarlayın. satır yüksekliği
2. Yı kur satır yüksekliği diğer tüm elementlerin tabanın bir katına kadar satır yüksekliği

Sorunun çoklu bir tamsayı olması gerekmez. Bazın 0.5x ve 1.25x gibi değerleri kullanabilirsiniz. satır yüksekliği Size daha fazla esneklik sağlamak için. Bu değerler çalışır çünkü dikey ritim tekrarı ilkesini kullanır.

Taban çizgisi ızgarası mı yoksa hayır mı?

Dikey ritimden bahsettiğimizde, bazal ızgara kavramı kaçınılmaz olarak resme gelir. Bazal ızgara potansiyel olarak yardımcı olabilse de, çoğunlukla bir tren enkazıdır, çünkü yeni başlayanlar, metin yaparken (veya açık) baselinleri, dikey ritmi sağa çıkmanın imkansız olduğunu düşündüğü için çok fazla enerjiye odaklanır.

Dürüst olmak gerekirse, yazımdaki matematiğin her zaman alt keçeleleri (24.8px gibi) içermemesi için temel ızgaraları asla alamazsınız (24.8PX gibi) ve tüm tarayıcılar alt keçileri farklı şekilde ele alıyor. Örneğin, bazı tarayıcılar sayfadaki her öğeye 1px tarafından kapanmasına neden olur. Bu 1 adet hatalar birikir ve sayfadan aşağı indirilen herhangi bir elemanları ızgaradan daha da dışar. Sonuç olarak, bir taban çizgisi ızgarası kullanmaya karşı tavsiye ederim.

Devam eden, duyarlı uygulamaların alemine girelim ve birden fazla ekran için tasarım yapalım.

Birden fazla ekran için tipografi

Birden fazla ekran için tipografi tasarlama, ortalama bir feat değildir. Bir tasarım perspektifinden yapmamız gereken üç şey var.

İlk olarak, bir kullanıcının gözleri ile ekranı arasındaki mesafe, ne tür bir cihaz kullandıklarına bağlıdır. Genel olarak, daha büyük bir ekran kullanırken kullanıcı cihazı daha uzağa yerleştirir. Bu fenomen, cihaz genişliği arttıkça, yazı tipi boyutlarınızı arttırmanız gerektiği anlamına gelir.

İkincisi, vücut metni ile diğer unsurlar arasındaki oranları tutarlı tutmak istiyoruz. Bu, vücut metni boyutunu arttırdıkça tüm öğelerin boyutlarını artırmamız gerektiği anlamına gelir.

Üçüncüsü, belirli kesme noktalarında, arttırmak istiyoruz. yazı Boyutu Modüler ölçekte farklı bir sayı seçerek belirli unsurların (H1 gibi). Bunu yapmak, görsel hiyerarşiyi kontrol etmemizi ve öğelerin okumaya bir kullanıcıyı çekmeye yetecek kadar dikkat etmemizi sağlar.

Duyarlı tipografi için kodlama

Metin boyutlarımızı orantılı olarak artırmamız gerektiğini biliyoruz. Bunu yapmanın en kolay yolu, arttırmaktır. yazı Boyutu içinde html seçici. Ayrıca bir kullanıcının saygı duyulması için göreceli birimler kullanmak istiyoruz. yazı Boyutu tercih.

 html {font boyutu:% 100;}
@Media (min-genişlik: 40em) {
 HTML {font boyutu: 112.5;}
} 

Ayrıca diğer elementler için göreceli bir birim kullanmak istiyoruz, böylece HTML'ye göre ölçeklendirirler yazı Boyutu ( h2 aşağıdaki örnekte). Değiştirmeniz gerekiyorsa yazı Boyutu modüler ölçekte farklı bir sayıya, yaptığınız tek şey değiştirmek yazı Boyutu buna göre ( h1 altında).

 H1 {font boyutu: 2.369EM;}
@Media (min-genişlik: 40em) {
 html {font boyutu: 3.147EM;}
}

H2 {font boyutu: 1.777EM;} 

İşlem basit görünse de, yeni geliştiriciler, katılan matematiklerden dolayı bir ton baş ağrısı ile karşı karşıya kalabilirler, bu yüzden işlevleri ve miksleri kullanmanızı öneririm. Sık sık kullanırım Hanım() dan Modüler Ölçek Kütüphanesi . Bununla yazabilirsiniz MS (4) onun yerine 3.157em ve MS (3) onun yerine 2.369EM .

Dikey ritmi hesaplama yükünü hafifletebilecek bir fonksiyon örneği: