2018'in çağdaş tipografik tasarım desenleri ve trendleri

Genel olarak bir tipografi veya tipografik tasarım, başarılı web mimarisinin hayati parçalarından biri olarak kabul edilir. Özellikle makaleler, haberler, web dergileri ve hikayeler gibi çok fazla içerik içeren destinasyonlar için. Ayrıca genel müşteri karşılaşmasını geliştirir. Daha sonra, bir yaratıcı veya mühendis olarak, bunu sitenizin ana hatları kadar orijinal olarak kabul etmelisiniz.

Duyarlı web taşınabilirliğinin gelişmesinden bu yana, siteleri ve içeriği incelemek için yeni yöntemler arttı. Bu, web tipografisini mümkün olduğunca zengin, uyarlanabilir ve kullanılabilir hale getirmek için yeni yürütme zorluklarıyla birlikte çok yönlü başka bir kalite sunar.

İçeriğin genel grafik okunabilirliğinden ziyade metin tabanlı içeriğe dikkat eden çok sayıda siteye baktık, bu yayınların ana kaygısı. Bu yazıda bazı web mimarisi örneklerini ve web tipografisindeki güncel uygulamaları inceleyeceğiz.

Mevcut Web planında düzenli olan tipografik anahat tasarımlarını keşfetmek ve bazı normal tipografik sorunları belirlemek için, tipografinin beklenenden daha önemli olduğu (veya başka hiçbir şeyin beklenenden daha önemli olmadığı) 50 önde gelen sitede geniş bir araştırma başlattık. Ünlü günlük gazeteleri, dergileri ve çevrimiçi dergileri ve ayrıca tipografiyle ilgili farklı siteleri seçtik.

Tipografilerini ve şablonlarını özenle ayırdık ve benzerlikler ve karşıtlıklar aradık. Ek olarak, sitelerin farklı niteliklerini (örneğin, çizgi uzunluğu ve çizgi uzunluğu arasındaki oran) gösteren incelemenin bir elektronik tablosunu oluşturduk.

Popüler Serif ve Sans-serif yazı tipleri:

Bir tipografi, tüm sitenin tonunu ayarlama yeteneğine sahiptir. Ve yanlış bir karar yanlış mesaj verebilir. Bir serif özelliği ile sans-serif gövdeyi veya tersini karşılaştırmak, bir sitenin genel görsel ilgisini ve anlamlılığını artırabilir.

Tasarımcıların gövde için serif mi yoksa sans-serif metin stilleri mi kullanması gerektiğine bakılmaksızın. Yazı tipi, Web'de dizgiyle ilgili en çok konuşulan ve belirsiz sorular arasında öne çıkıyor. Birkaç içerik oluşturucu, daha fazla ilgi uyandırmak için özelliklerine serifler (kısa, harf vuruşlarının sonuna doğru satırları güçlendiren) vermeyi sever. Özellikleriniz için bir serif metin stili seçmenin temel motivasyonu, önemli bir boyutta serif metin stillerinin incelenmesi ve inanılmaz görünmesi zor olmaktan başka bir şey değildir. Özellikler için bir serif metin stili ile gövde kopyası için bir sans-serif metin stili arasındaki fark da büyüleyici olabilir.

Birkaç içerik oluşturucu, gövde kopyası için serif metin stillerine eğilimlidir, çünkü satırların harf vuruşlarının sonuna doğru olduğuna inanırlar, bu da okuyucuları bir harfle başlayıp diğerine yönlendirmeye yardımcı olur, bu da kontrol etmeyi ve okumayı daha hoş hale getirir.

• En belirgin iki yazı tipi, The Guardian ve Financial Times gibi sitelerde kullanılan Georgia ve de ve BBC'nin sitesinde bulunan Arial'dir.
• Özellikler için en yaygın serif yazı tipleri Georgia (%14) ve Chaparral Pro'dur (%6).
• Vücut başlıkları için en yaygın serif yazı tipleri Georgia (%20) ve Chaparral Pro'dur (%4).
• Özellikli yazı tiplerinin %66'sı ve gövde kopya yazı tiplerinin %39'u tek bir örnekte bulunur.
• Vücut kopyası için en iyi bilinen sans-serif yazı tipleri Arial (%14) ve Helvetica'dır (%6).
• Başlıklar için en popüler sans-serif yazı tipleri Arial (%28), Helvetica (%20) ve Verdana'dır (%8).

Diğer bazı popüler yazı tipleri:

Şaşırtıcı bir şekilde, metin stili ikame stratejilerinin artan şöhretine ve önceden tanıtılan yeni metin stillerinin (örneğin Windows Vista ve Mac metin stilleri) erişilebilirliğinin geliştirilmesine rağmen, araştırmamızda ana hatlar öncelikle geleneksel, merkezi Web metin stillerini kullandı, ana muafiyetler Lucida'dır. Grande (yalnızca Mac'lerde tanıtılan), Helvetica ve Baskerville.

Tahmin edilebileceği gibi, bugün vücut kopyalarının en büyük payı için Arial, Georgia ve Verdana kullanılmaktadır. İncelememizde, sitelerin yaklaşık %80'i bu üç metin stilinden birini kullanmıştır. Kalan %20 için tasarımcıların en sevdiği Helvetica, Lucida Grande gibi iyi bilinen bir karar.

Örneğin, yedek olarak erişilebilen Verdana ve Arial gibi seçeneklerle, bir içerik oluşturucunun en iyi etkiyi elde etmek için standart olmayan diğer metin stillerini belirtmemesi için gerçekten hiçbir nedeni yoktur. Nathan Ford'un Daha İyi CSS Yazı Tipi Yığınları ve kod stilleri Daha İyi CSS Yazı Tipi Yığınları Oluşturun makalesinde son teknoloji CSS metin stili yığınları hakkında daha fazla bilgi edinebilirsiniz.

Verdana, özellikler için önemsiz bir şekilde kullanılır. İlk etapta sadece 10 site onu vücut kopyası için kullanıyor ve sadece dördü özellikler için kullanıyor. Birincil sebep, Verdana'nın harfler arasında çok fazla ayırma yapmasıdır, bu da onu geniş bir boyutta incelemeyi o kadar temiz yapmaz. Özellik için kullanacaksanız, CSS harf ayırma özelliğinden yararlanmanız gerekebilir. Georgia ve Arial, başlıklar için en ünlü metin stilleridir.

Açık veya koyu arka plan:

İçerik oluşturucuların soluk fondöten tonlarıyla farklı şeyler denemeye ne kadar hazır olduklarını merak ettik. Donuk bir gölgelendirme planı olan ve tek başına olmayan bir yer keşfetmeye şaşırdığımız, tipografiyle düzenlenmiş tüm sitelere özel önem verdik.

Katkısız beyaz fondöten büyük bir farkla kazandı. Her halükarda, çok sayıda plan, katıksız beyazın katıksız karanlık üzerindeki yüksek karmaşıklığından stratejik bir mesafeyi koruyor; içerik gölgeleme genellikle katkısız karanlıktan biraz daha açık yapılır. Yaratıcılar, açık bir şekilde düzenliliğe odaklanırlar ve fondöten tonlarıyla ilgili farklı yollar keşfetmekten kaçınırlar. Beyaz üzerine koyu olan fark, anlaşılması zor olan bir şeydir ve her halükarda bu siteler arasında mevcut koşullardır.

Kontrast eşit derecede önemlidir:

Beyaz bir temel üzerindeki koyu içerik, gövde kopyasının tipik bir örneğidir. Karmaşıklık, içeriğin anlaşılması zor bir şey olup olmadığına bakılmaksızın temel faktördür. Büyük karmaşıklıklar, mesajı gözler için basit hale getirecektir. Hızlı filtrelemek için basit. Ve genel olarak daha anlaşılır. Sonra tekrar, zayıf bir fark müşteriyi gözlerini kısmaya zorlayacaktır. Ve gövde mesajını incelemeyi nispeten dayanılmaz hale getirin, ayrıca bir ton daha yavaş.

Ekteki tanımlamada da görüldüğü gibi, beyaz üzerine koyu son derece anlamlıdır. Beyaz üzerine koyu, açıkça standart farklılaştırma tonlarıdır ve dikkate aldığı ayırt edilebilir maddeyi elde etmek için beyaz üzerine koyu renk farkı kapsamında kalır.

Bununla birlikte, mavi üzerine pembe olan bu, incelemek neredeyse zor. Bu model biraz sıra dışı olabilir. Yine de, böyle korkunç bir karmaşıklığın içeriği nasıl büyük ölçüde etkileyebileceğini gösterir. Muhtemelen bu kadar düşük karmaşıklık kullanan siteler görmeyeceksiniz. Ancak, her şeye rağmen, bu konuda neden son derece kurnaz olmanız gerektiğini gösterir.

Gövde kopyası için satır ve uzunluk:

Açıktır ki, özellik metin boyutunun kararı, planda kullanılan metin stiline bağlıdır. Ne olursa olsun, uzun bir çekimle yaptığımız araştırmada, en belirgin metin boyutları 18 ila 29 piksel arasındaydı. En yaygın kararlar 18 ila 20 piksel ve 24 ila 26 pikseldir.

Soruşturmamız makul bir zafer getirmedi. Başlıklar için normal metin boyutu 25,6 pikseldir. Her durumda, 18 ve 29 piksel aralığındaki herhangi bir boyutun geçerli olabileceğini unutmayın. Bu, başlıklarınızın sitenizin genel hatlarına nasıl uyduğuna bağlı olarak her şeye bağlıdır. Her şey düşünüldüğünde, daha büyük boyutlarla ilgili farklı yolları keşfetmeye başlayabilirsiniz. Gösteri hedefleri olarak sunumların sürekli büyüdüğü gerçeği ışığında.

Başlıklar için satır ve uzunluk:

Yaklaşık yedi yıl önce Web planlarının çok az, ancak deşifre edilebilir bileşenlere sahip olduğunu hatırlıyor musunuz? Ve gövde kopyası Tahoma'da 8 piksele mi ayarlandı? Küçük metin boyutları çıktı. Ve giderek artan sayıda mevcut yaratıcı, devasa metin boyutlarına geçiş yapıyor. Örnek ölçümümüzden, 12 ve 14 piksel aralığında bir yerde boyutlara doğru belirgin bir eğilim gördük. En iyi bilinen metin boyutu (%38) 13 pikseldir ve 14 piksel 12 pikselden biraz daha yaygındır. Genel olarak konuşursak, gövde kopyası için normal metin boyutu 13 pikseldir.

En küçük tipografik ince öğelere giderek daha fazla önem verildiğini (bekleneceği gibi) kaydettik. Kısa çizgiler, alıntılar, yorumlar, içerik oluşturucu adları, başlangıç ​​içeriği ve pasajlar bilinçli olarak ayarlanmıştır. İdeal anlaşılırlığın ışığında. Sıralama ayarı, büyük bir boşluk alanı, sürüş ve yastıklama ile normalde son derece güvenilirdir.

Tipografik desenlerin küçük resmi:

Tipografideki negatif boşluk, özellikle genel yaratımı etkiler. Ayrıca bu arada küçük sayfa bileşenleri eklemek için. Tipografiyi planlarken, ayar her şeyin üstündedir.

Sayfada bulunan pasajlar, kenar çubuğunda bulunan bölümlerden daha büyük kenarlar gerektirebilir. Başlıktaki bağlantılar, ek yastıklama ile daha pürüzsüz görünebilir. Bununla birlikte, alt bilgideki arayüzler, neredeyse hiç yastıklama olmadan daha düzenli görünebilir. Güçlü yönergeler yoktur, yalnızca hatırlanması gereken önceden belirlenmiş prosedürler vardır.

Aynı şekilde, tipografinin de tıpkı sayfa yapısı gibi kendi özel önem zincirinin peşinden koştuğunu hatırlayın. Uzamsal nitelikleri hızlı bir şekilde algılamak için gözlerinizi geliştirmek için çok sayıda eğitim ideal bir yöntem olacaktır. Bu, bazı rastgele web girişimlerine en uygun olanıdır.

Mekân ile çerçeveleme konusunda, zevkli bir nitelik olarak mekânın, bir planlama aracı olarak mekâna göre daha düşük bir önceliğe sahip olduğunu hatırlayın. Alan bağlantılar kurar, ilerici sistemleri karakterize eder ve içeriğin altını çizer – görsel gürültüyü nasıl azaltacağınızı düşünürken bunları güvenilir bir şekilde hatırlayın.

Sonunda, "seçenek" metin stillerinin gövde kopyalarından çok özellikler için kullanıldığını not ettik. Mimarlar, ana yapıdan ziyade başlıklarıyla ilgili olarak farklı yolları keşfetmeye daha hazır görünüyorlar. Bir sonraki taslağınıza biraz tipografik çeşitlilik getirmeniz gerekiyorsa, başlamak için en az talepkar nokta başlıklar olabilir.