8 Noktalı Izgara: Web'de Tipografi

Web tipografisi kafa karıştırıcı. En iyi uygulamaları biliyor musunuz?

Web tipografisi için en iyi uygulamaları bulmak için popüler web sitelerine bakmaya başladığımda, şaşkın olduğumu itiraf etmeliyim. Aşağıda, birkaç popüler web sitesinden ve tasarım sistemlerinden aldığım tipografi ölçeklerinin bazı örnekleri bulunmaktadır. Birleştirici modeli bulabilir misin?

Açıkçası tip sistemlere farklı yaklaşımlar vardır. Gerçek şu ki, bir web topluluğu olarak hepimiz aynı fikirde değiliz. Bununla birlikte, çoğu tasarım probleminde olduğu gibi, gerçekten de kullanıcının ihtiyaçlarına hitap ederek başlar.

Tipografi sistemlerinin üç arketipi

İşte üç genel tipografi sistemi arketipi. Çoğu şirket bir noktada bunların üçünü de kullanacaktır, ancak her yönelimde ele alınan temel kullanıcı ihtiyaçlarının farkında olmak önemlidir.

Pazarlama sitesi

  • Amaç: Belirli bir hikaye anlatmak ve ziyaretçilere zamanlarını ve / veya paralarını sitede geçirmeleri için ilham vermek için oluşturulmuştur.
  • Gereksinimler: Her yazı tipi kendi stil setine ihtiyaç duyacak ve çeşitli boyutlar, öğe uydurmadan daha çok sanat yönüne dayalı olacaktır.
  • Duyarlı kullanım durumu: Sistemin, mobilden masaüstüne kadar birçok boyutta esnek olması gerekecektir.

Size bir şeyler sunmaya yönelik web deneyimleri bu kategoriye girer. Hırslı olanlar, çekici ve büyüleyici deneyimler yaratmak için tipografinin tüm kurallarını çiğniyor.

Bu sitelere çok fazla düşünce girse de, odak, gelecekte üzerine inşa edilebilecek genişletilebilir bir sistemden ziyade bir sıçrama yapmaktır. Bu siteler genellikle kısa bir raf ömrüne sahiptir ve baştan aşağı yeniden tasarım için tamamen atılır.

Bunun gelişmiş bir örneği, Invision'un açılış sayfasında Leigh Taylor ve Nick Jones tarafından kullanılan enterpolasyon işlevidir.

<H1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. Sayfadaki tipografi, her ekran boyutunda çalışacak şekilde titizlikle hesaplanmıştır.

"Dinamik sanat yönetimi yapmak için matematiği kullanmak" - Leigh Taylor

Blog / Bilgi sitesi

  • Amaç: Büyük miktarda metin tabanlı bilgi iletmek.
  • Gereksinimler: Ana okuma alanı, tıpkı bu Medium makalesinin yaptığı gibi orana dayalı bir satır yüksekliği sistemi kullanabilir.
  • Duyarlı kullanım durumu: Büyük olasılıkla duyarlı olacak, ancak okunabilirliğe odaklanmayı sürdürecek.

Bu Orta düzey makale, uzun biçimli okuma için oluşturulmuş bir web deneyimi örneğidir.

Odak noktası, küçük görselleştirmeleri yorumlamak veya formları doldurmak değildir. Seçtikleri boyut oranları, istenen satır uzunluğunu elde etmek için özellikle okunabilirlik kısıtlaması için oluşturulmuştur. Her satırı rahatça okuyabiliyorum çünkü tipografi, okuyucu olarak ihtiyaçlarıma uyacak şekilde özenle hazırlanmış.

Ürün

  • Amaç: Vergi beyanı, git deposu yönetimi veya performans ölçümlerini görselleştirme gibi bir kullanıcı problemini çözmek için oluşturuldu.
  • Gereksinimler: Metin, öğe hiyerarşisine tam olarak uymalıdır. Metin çoğunlukla etiketler, talimatlar ve görüntülenen veriler için kullanılır.
  • Duyarlı kullanım durumu: Minimum düzeyde duyarlı. Son derece gelişmiş ürünler, mobil ve masaüstü için farklı deneyimler anlamına gelen uyarlanabilir tasarımdan yararlanacak. Odak noktası, kullanıcı deneyimini destekleyen öğelerin hiyerarşisidir.

Google'ın Materyal Tasarımı, birçok ürün kullanım durumu için geçerli olan popüler bir tasarım dilidir.

Malzemenin aralık yöntemi, 8 pt bileşenli ızgara sistemine ve tipografi için 4 punto temel kılavuza dayanmaktadır. 4'lük artışlarla çizgi yüksekliklerini ölçeklemeye çalışırlar. Temel ızgaranızla 8'lik artışlarla ölçeklendirmek zor olabilir çünkü mevcut satır yükseklikleri bazı metin boyutları için çok uzaktır.

Bazı yazı tipi boyutlarının daha uygun bir satır yüksekliği ile birlikte olmasına izin vermek, ileriye dönük harika bir yoldur. Daha büyük atomik ızgarayla hizalamak için, her zaman belirli bir çizginin üstündeki veya altındaki aralığı 4 piksel çarpabilirsiniz.

Uygulandığında, temel ızgara sistemi, tasarımda çekici bir dikey ritim oluşturmak için eleman uzamsal sistemini (8pt grid) tipografi sistemi ile hizalama yeteneğine sahiptir.

Web tipografisinin uygulanması - gerçekte

Uzun biçimli bir okuma alanına da sahip olan 8pt'lik bir ızgaraya yapışan, düşünülmüş ve yapılandırılmış bir UI'ye sahip olmak mümkündür.

Sabit temel ızgara sisteminin yapılandırılmış bileşenlerinizin içindeki metni işlemesine izin verin ve sitenize eklediğiniz blog veya dokümanlar için en uygun okuma deneyimi oluşturmak için modüler bir ölçek kullanın.

Çoğu dijital ürün şirketi, bunu zaten pazarlama açılış sayfaları, dijital ürünler ve belgeleri arasında yapmaktadır. Bu tipografik alanları ayrı ayrı yapılandırma kararını vermek sizi sürdürülemez bir karmaşıklıktan kurtarabilir.

Tuzak - Ems, rems ve pikseller aman tanrım!

Açık ve tutarlı bir sistemi ifade etmek için, tipografi ölçümlerinin onu oluşturan ürün ekibi tarafından kolayca yorumlanması gerekir.

Rems ve ems gibi göreceli birimler bazen yanlış anlaşılıyor ve deneyimlerime göre bu, sürdürülemez bir tipografi sistemine yol açıyor. Örneğin, 14px yazı tipi boyutu ile 20px satır yüksekliği arasındaki oran, yazı tipi boyutu arttıkça bu oranın değişmesi gerektiğinden göreli birimler olarak yakalanmamalıdır.

1.4285714286em'lik bir satır yüksekliği tanımlamak saçma çünkü çoğu insan bu tür bir matematik işlemini kafasında yapamaz. Yazı tipi boyutu 16px'e yükselirse, tarayıcı 22.857142px'lik bir satır yüksekliğini işleyecektir ve bu tür bir piksel bölünmesi, olmasını bekleyen bir baş ağrısıdır. Bu kafa karışıklığı yaratır ve ilgili birimlerin kötüye kullanılmasıdır. Mutlak ve göreli birimlerin tam listesine buradan bakın.

Neden bu kadar çok tasarım sistemi bugün göreceli boyutlandırmaya dayanıyor? Cevap "erişilebilirlik" tir.

Ancak, yakınlaştırdığınızda tarayıcılar temel yazı tipi boyutunu ölçeklemez command +. İhtiyaç duyan kullanıcılar için temel yazı tipi boyutlarını ölçeklendirecek erişilebilirlik araçları vardır. Kullanıcıların sahip olmasını istediğiniz deneyim olduğundan emin olmak için doğru şekilde test etmenizi öneririm. Onay kutusunun erişilebilirliği, yardımcı olduğundan daha fazla zarar verebilir.

Sitenizde / uygulamanızda rems ve ems kullanmak inanılmaz derecede güçlüdür. Pek çok ilginç kullanım durumu vardır ve bunlar araç setinizin önemli bir parçası olmalıdır.

Benim önerim, onları sağlam bir şekilde kullanana kadar onları idareli kullanmaktır. Bunları tipografi sisteminizin merkezine yerleştirmek sizi kafa karışıklığına ve beklenmedik kullanıcı deneyimlerine açabilir.

8pt Izgara Tipografi

8pt ızgara konseptinin en güçlü kısmı, tasarımlarınızda tutarlılığı sağlama yeteneğidir. Kullanıcılarınızın ihtiyaçlarını ve bu ihtiyaçları karşılamak için tipografinizi ölçeklendirmenin en iyi yolunu değerlendirmeniz gerekecektir.

Bir şirket / ürün için bu standartların nihai hale getirilmesi için tasarım ve mühendisliği işbirliği yapmaya şiddetle teşvik ediyorum.

İşte birkaç tanıdık addan örnekler: Google Material, Pivotal, Atlassian, Intuit.

Referanslar ve İlgili Okumalar

  • Priyanka Godbole: Daha hızlı tasarım geliştirme devri için tahmin edilebilir ve uyumlu bir boşluk sistemi oluşturmak için bir çerçeve
  • Richard Rutter: Web'e Uygulanan Tipografik Tarzın Öğeleri
  • Ian Yates: Modüler Tipografik Bir Ölçek Nasıl Oluşturulur
  • Nathan Curtis: Tasarım Sistemlerinde Uzay
  • Vincent De Oliveira: Derinlemesine CSS: yazı tipi ölçümleri, satır yüksekliği ve dikey hizalama
  • Kezz Bracey: Neden Rem Tabanlı Düzenleri Kullanmalısınız?

Önceki 8 Noktalı Izgara Makaleleri:

  1. 8 Noktalı Izgara Sistemine Giriş
  2. 8 Noktalı Izgara: Kenarlıklar ve Düzenler
  3. 8 Noktalı Izgara: Dikey Ritim

Sorular:

Bu hala araştırdığım bir şey. Paylaşmak için güzel bir örnek var mı? 8 punto tipografi sistemine farklı bir yaklaşımınız var mı?

Düşünceleriniz varsa, lütfen bir yorum bırakın veya Twitter'da bize ulaşın.