Web İçin Tipografi Yazısını Anlamak
Web Tasarımında tipografi konusu, kullanıcı deneyiminin tüm alanlarını göz önünde bulundururken önemlidir. Her web sitesinin metne ihtiyacı vardır ve olağanüstü çarpıcı düzenler oluşturmak için izleyebileceğiniz kurallar vardır. Kılavuz çizgileri, yazı, yazı tipi yüksekliği, metin aralığı, renk şemaları ve diğer benzer özellikler dikkate alınmalıdır.
Bu yazımda web tipografi alanına girmek istiyorum. İçine bakacağız güvenilir web sayfası metinlerinin tasarımının arkasındaki popüler fikirler. Yol boyunca birkaç tanıtacağım yardımcı CSS3 özellikleri hangi tasarımcıların sıklıkla unuttuğu.
Web için teori ve ideolojilere daha fazla odaklanmaya çalıştım. Bu, genel olarak dijital metne daha geniş bir odaklanma sağlar ve siz web tasarımcısı daha sonra hangi amaçlara uygulanacak stilleri seçebileceğinizi seçebilirsiniz. Bağlam her zaman anahtardır ve üzerinde çalıştığınız her proje için bunu uygun şekilde belirlemelisiniz. Bu kılavuzu, tüm dünyadaki tipografik yenilikçilerden gelen modern web trendleriyle dolu bir referans paketi olarak düşünün..
Paragraflarınızı ölçün
Bu tür bir ölçüm için bahçe çubuğunu sökmeniz gerekmez. Aslında tipografi ile ilgili ölçü, sayfanızdaki herhangi bir paragrafın genişliğini (yatay olarak) belirtir. Her zaman tartışılan bir konu değil, ancak içeriğinizin okunabilirliğini etkiliyor. Genel bir kural olarak, 75-85 karakter uzunluğunda herhangi bir tek çizgiyi sınırlandırmak istersiniz (boşluklar dahil değil).
Şimdi, bu bazı daha geniş düzenler için biraz gerilebilir gibi görünebilir. Özellikle tasarımınız akışkan ise ve kullanıcının tarayıcı penceresini yeniden boyutlandırması gerektiği gibi uyarlanması gerekiyorsa. Her zaman bir CSS ayarlayabilirsiniz maksimum genişlik ana içeriğinizdeki mülk div. Piksel yerine ölçeklenebilir birimlerde (yüzde, ems) kenar boşluklarını ve yazı tipi boyutlarını kodlamak, herhangi bir düzende bu esnekliğe izin verir.
Dikkat edilmesi gereken maksimum ölçü birimi yoktur. İçeriği yazıp kelimeleri cümle halinde nasıl yazdığınız, her satırın genişliğinden çok daha önemlidir. Ancak, kısa ve özlü ifadelere kıyasla daha uzun cümlelerin okunmasının çok daha zor olduğunu unutmayın..
Önde Açıklanan
Tasarımda, paragraf ölçütünle birlikte, önemli. Kelime telaffuz edilir “ledd-ing”, kurşun kalemlerde kullanılan kurşun gibi. Bu ad, eski metin dizilerinin arasına kurşun şeritlerinin yerleştirildiği mekanik dizgi günlerinden kaynaklanmaktadır..
Liderlik, web tasarımında hala çok önemli bir kavramdır ve paragraf önlemleriyle el ele gider. Paragraf genişliğiniz arttıkça, öncü miktarına eşit bir artış uygulamalısınız veya metnin satırları arasındaki boşluk. Bu fazladan boşluk, okumayı gözlerinizde daha kolay hale getirir.
Çok sıkıca sarılmış bir metnin içine bakacak olursanız, tek bir satıra odaklanmak zor olabilir. Bu durumda, CSS’de liderlik miktarını artırmayı deneyin satır yüksekliği özelliği. Her zaman metin satırları arasında sözcüklerden daha fazla boşluk istersiniz. Aksi takdirde, metin bloklarınız gazete baskısı olarak görünebilir ve göz atmak için kullanıcı dostu olmaz.
Sağlam bir teknik, başlangıçta gerekenden daha fazla alan uygulamak ve gerekirse azaltmaktır. Tüm metinler eşit oluşturulmaz ve kesinlikle kalın kelimeler, bağlantı bağlantıları, alt çizgiler vb. Gibi farklı iç biçimlendirmeler içeren paragraflara ihtiyacınız olacaktır..
Doğal Yazı Tipi Boyutlarını Kullan
Hala ortalamadan daha küçük font boyutlarına sahip olmayı seçen birkaç web sitesi var. 11px-12px çok daha fazla görünebilir “standart profesyonel” iş düzenleri için. Ancak bu boyutlar, belirli bilgiler arayan ziyaretçilerin çoğuna yardımcı olmuyor.
Herhangi bir CSS kuralı uygulamıyorsanız, genellikle web tarayıcıları varsayılan olarak 16 piksele kadardır. Daha büyük metinler için düzeninizde fazladan bir oda varsa, bu bile biraz küçük sayılabilir. Daha büyük font boyutları daha iyi görünür ve göreceli anahtar kelimeler için göz atmak çok daha kolaydır. Serif fontları genellikle paragraf materyali olarak seçilmez, ancak yine de onlardan uzaklaşabilirsiniz. Okunabilirliği artırmak ve dikkat çekmek için serif tabanlı fontlar için çok daha büyük metin boyutları kullanmanızı öneririm.
Kullanıcının Ortamına Cevap Ver
Farklı font aileleri ve boyutlarını denedikçe, içerik alanınız buna göre adapte olmak zorunda kalacak. Yaptığım standart birim ems mevcut alan ve ekran çözünürlüğüne göre kolayca yeniden boyutlandırabilirler. Bu, kullanıcının sonundaki performansı optimize eder ki bu en önemli şeydir..
Ancak çok esnek bir içeriğe sahip olduğunuzda, düzeniniz bir hata çıkmasına neden olur. Altbilginizdeki veya kenar çubuğu alanınızdaki içerik bazı tarayıcılarda çarpık veya dengesiz kalabilir. Veya ana metninizdeki görüntüleri veya diğer medya biçimlerini sıralamakta zorluk çekebilirsiniz. Sabit bir düzende ihtiyacınız varsa, ems kullanmanın başka alternatifleri var - ama hangisini en sevdiğinizi görmek için her iki çözümü de deneyin.
Sabit genişliklerin ve paragraf boyutlarının tasarımınızdaki ayarların çoğunda kilitleneceğini unutmayın. Çok sayıda durağan estetik efekt içeren içerik için mükemmeldir - arka plan resimlerini veya çok sayıda kenar çubuğu widgetını düşünün. Sol sütunda, sağda sabit kenar çubukları bulunan bir sıvı içerik alanı oluşturmak da basit bir işlemdir..
Bağlama Dayalı Stil
Diğer bazı gerçekten temiz CSS hileleri ana tasarımdan gizlenmiştir. Özel olarak, baskı işinden kopyalanan ve uygun bağlamda uygulanabilecek eğilimler var..
Birçok web tasarımcısı text-indent CSS özelliğini hiç kullanmadı. Bu kural tarafından hedeflenen herhangi bir paragrafın ilk satırını girintilemek için bir değer sağlarsınız. Birimler piksel, puan, ems, yüzde gibi standart metin seçeneklerini takip eder… Kesinlikle çoğu blogda bulacağınız bir trend değildir. Ancak büyük metin bloklarını okurken hoş bir sayfa ritmi sağlar..
Olarak bilinen başka bir CSS seçicisi var. sözde eleman. Bu, herhangi bir içerik seçicinin belirli bir bölümünü hedefleyebilir. CSS3: ilk harfli sözde seçici, önemli paragraflarda fantezi stilleri oluşturmak için mükemmeldir. Her paragrafın açılış mektubunu - oldukça masallı bir hikaye kitabına benzer şekilde - cesur, italik kullanarak veya hatta yazı tipini kullanarak canlandırabilirsiniz. Kullanabileceğiniz bazı ekstra CSS kodları içeren bu güzel açılan başlık örneğine göz atın.
Harf Boşluğu ile Oynama
Eminim çoğumuz daha önce hiç terim izleme duymamış, ancak CSS harf aralığı özelliği ile aynı fikirde olmadığını hiç anlamadım. Bu iki kavram, baskı ve dijital tipografi ile ilgili olarak aynıdır. Birim, herhangi bir tek metin satırındaki harfler arasındaki boşluğa ilişkindir. Bu, başlıklara ve hatta sitenizdeki daha küçük içerik bloklarına uygulanacak çok temiz bir etkidir..
Harf aralığı terimlerini karakter aralığı ile karıştırmamak önemlidir. Her ikisi de tipografi ve harfler arasındaki mesafe ile ilgilidir. Bununla birlikte, karakter aralığı, özellikle bir sözcükteki 2 ayrı harf arasındaki mesafeyi ifade eder. Harf aralığı özelliği geçerli olacaktır. bütün bir eleman Metin, bir kelime veya paragraf veya başlık veya çapa bağlantı olsun. Stiller için yeni fikirlerle uğraşırken bunu aklınızda bulundurun.
Genellikle, büyük harflerle başlıklar halinde birkaç piksel / harf aralığı aralığı kullanırım. Bu, bireysel karakterleri biraz fazladan boşluk bırakarak ayırır ve çok tanımlanmış gibi görünür. “başlık” bak. Olumsuz harf aralığı da doğru bağlamda harika çalışıyor. Genellikle daha küçük birimlere yapıyorum, belki de -0.03em veya -0.1em.
Birleştirme ve Eşleştirme Yazı Tipleri
Web tipografisinin arkasındaki tasarım kavramları, kesinlikle bir bilim değil, bir sanat biçimidir. Takip edebileceğiniz kurallar var, ancak bunlarla sınırlı olduğunuz kesin kurallar yok. Bu, erişebildiğiniz farklı yazı tiplerini karıştırmayı ve eşleştirmeyi denemek için muazzam bir özgürlüğe sahip olduğunuz anlamına gelir.
Şimdiye kadar en popüler fontların kombinasyonu, başlık ve paragraf içeriği için bir serif / sans-serif bölünmesini içerir. Her ikisini de değiştirmeyi seviyorum, ancak daha sık olarak başlık bölümlerinde serif fontlarını kullanacağım. Her harfe yazılan ekstra işaretler ve konturlar, onları baskın sayfa metni olarak daha hoş görünmelerini sağlar.
Ek olarak sans-serif fontları daha temiz ve cümle içinde birlikte tırmalamak daha kolaydır. Bu serif yazı tiplerinin paragraflarda işe yaramayacağı anlamına gelmez. Aslında birçok harika örnek var! Ancak, x-height adlı az bilinen bir kavram, bir yazı tipinin karmaşıklığını ayırt etmek için çok önemlidir. Birkaç kelimenin taban çizgisine bakarken, bu tür fontların nasıl olacağına karar vereceksiniz. “sığdırmak” birbirleriyle.
Ayrıca, bu farklı öğeler arasındaki boşluğun önemine dikkat çekmeye değer. Muhtemelen 2 veya 3 farklı başlık stili kullanacaksınız, bu yüzden bunların her biri farklı bir görünüme sahip olacak. H2 / h3 elementlerimi bir sonraki paragraf bloğuna biraz daha yakın tutma eğilimindeyim, çünkü içerik arasında bir ilişki var..
Bu ilişki özellikle yan yana tamamen farklı iki yazı tipi kullandığınızda kullanışlıdır. Her içerik kümesi için 3'ten fazla farklı font ailesi önermiyorum. Çok fazla özelleştirmeden sonra kelimeleriniz birbirine karışmış gibi görünüyor ve tüm sayfa yanlış yazılmış fontların dikkat çeken bir köşesine benziyor.
Sonuç
Umarım, bu kavramlar dijital tipografinin karmaşık konusuna biraz ışık tutacaktır. Tasarımcı olarak işe girmek gerçekten zor olabilir, özellikle de tüm konu size yabancıysa. Fakat çalışmaya devam edin ve bir sürü uygulama yaptığınızdan emin olun!
Gelecek hafta: Bazılarını inceleyeceğimiz gibi bizi izlemeye devam edin yararlı araçlar ve kaynaklar daha iyi web tipografisi için.
Daha…
İşte daha fazla tipografi ile ilgili yazılar:
- Güzel Tipografi ile Web Tasarımlarının Vitrin
- Modern Web Siteleri İçin Daha İyi Tipografi
- Tipografi için Hızlı Kılavuz: Öğrenin ve İlham Alın
