Etkili Bir Tipografik Hiyerarşi Nasıl Yapılandırılır

İçeriği bir tasarım içinde, anlaşılması ve tüketilmesi kolay olacak şekilde etkili bir şekilde düzenlemek, bir tasarımcının en önemli işlerinden biridir. İçerik tasarımcılarının çoğu metin tabanlı çalıştığından, etkili bir tipografik hiyerarşi oluşturmak bir tasarımcının öğrenebileceği en önemli şeylerden biridir.

Etkili bir hiyerarşi oluşturmak için pratik yapmak ve denemeler yapmak, beceride gerçekten ustalaşmanın en iyi yolu olsa da, tasarımcıların kendi başlarına yola çıkmadan önce öğrenmeleri gereken birkaç yönerge vardır. Ne de olsa, önce ne olduklarını bilmeden kuralları etkili bir şekilde çiğnemek imkansızdır.

Tipografik Hiyerarşi Nedir?

Acemi tasarımcılar bazen bir tipografi hiyerarşisi kullanmanın gerekliliğini hafife alırlar. Yine de şu örneğe bakın:

Her iki tarafa da aynı bilgiler aktarılıyor, ancak solda bir başlık, alt başlık ve gövde metni olduğunu söylemek imkansız. Sağda, sağlanan bilgilerde bir hiyerarşi olduğu hemen görülüyor.

Tipografik hiyerarşi, okuyucuya hangi bilgiye odaklanacağını, hangisinin en önemli olduğunu ve hangisinin sadece ana noktaları desteklediğini gösterir.

Web'de tipografik hiyerarşiyi oluşturan çeşitli şeyler vardır. Bunlar şunları içerir:

Boyut. Boyut genellikle yeni tasarımcıların tipografik hiyerarşi oluşturmaya çalışırken başvurdukları ilk şeydir. Ve bunun iyi bir nedeni var: Okuyucular tarafından hemen, kolayca tanımlanabilir. Daha büyük = daha önemli, daha küçük = daha az önemli. Ancak hiyerarşi oluşturmak için bu kadar çok seçenek olduğunda boyut bir koltuk değneği haline gelebilir.

Ağırlık. Bir yazı tipini daha kalın veya daha ince yapmak, tasarımcı olmayanlar tarafından bile kolayca tanımlanabilen hiyerarşi oluşturmanın kolayca tanınan başka bir yoludur.

Renk. Renk, genellikle bir hiyerarşi oluşturmanın bir yolu olarak göz ardı edilir, ancak bu harika bir seçenektir. Belirli bir rengin daha açık ve daha koyu tonlarını kullanmak bile daha belirgin bir hiyerarşi oluşturabilir. Yazı tipi ve arka planı arasında daha fazla kontrast oluşturmak, tipografik hiyerarşiye de katkıda bulunabilir.

Zıtlık. Renklerin zıtlığının ötesinde, farklı yazı boyutları, ağırlıkları ve stilleri arasındaki kontrast da tipografik hiyerarşi oluşturmanın anahtarıdır. Yazı boyutunda yalnızca bir veya iki nokta farkı, hiyerarşiyi çoğu kullanıcı için görünür kılmak için yeterli karşıtlık oluşturmaz. Bunun yerine tasarımcılar, başlıklar veya gövde metni gibi şeyler arasında kolayca kontrast oluşturmak için kolayca ayırt edilebilen boyutlar, ağırlıklar ve stiller kullanmalıdır.

Durum. Gövde metnini büyük harf kullanmak genellikle okunabilirlik açısından iyi bir fikir olmasa da, başlıklarda veya alt başlıklarda büyük harf kullanmak farklı başlıkları veya diğer türleri ayırt etmeye yardımcı olabilir.

Konum ve Hizalama. Bir tasarımcının öne çıkarmak istediği diğer türlerle birlikte başlıkların ve alt başlıkların konumlandırılması, türün bir hiyerarşi içinde nereye düştüğü üzerinde çok fazla etkiye sahip olabilir. Örneğin, merkezleme türü onu öne çıkarma eğilimindedir. Bir sayfanın normal kenar boşluklarının dışında bir tür ayarlamak, o türün bir sayfanın hiyerarşisi içinde öne çıkmasını da sağlayabilir.

Tipografik Hiyerarşi Nasıl Oluşturulur (ve Tasarımınızı Görsel Olarak Düzenlersiniz)

Tipografik bir hiyerarşi oluşturmaya gelince tasarımcıların birçok seçeneği vardır. Ancak yalnızca bir hiyerarşi oluşturmaya neyin dahil olduğunu bilmek, tasarımcıların etkili bir hiyerarşi oluşturmasına mutlaka yardımcı olmaz.

Dikkate alınması gereken ilk şeylerden biri, bir tasarımın kaç hiyerarşi düzeyine sahip olması gerektiğidir. Genel bir kural olarak, her tasarım üç hiyerarşi düzeyi içermelidir: başlık, alt başlık ve gövde metni. Oradan, gerekli olabilecek ek seviyeleri düşünmek tasarımcıya kalmış. Bunlar, başlıklar, ek alt başlıklar, alıntılar ve meta bilgileri (bir makaledeki yazarlar veya tarihler gibi şeyler için) içerebilir.

Oradan, hiyerarşinin farklı bölümlerini nasıl ayırt edeceğinizi bulmak çok önemlidir. Söylemeye gerek yok, ancak başlıklar, alt başlıklardan daha belirgin olmalı, bu da gövde kopyasından daha belirgin olmalıdır. Altyazılar genellikle ana metinden daha az belirgin olmalı ve alıntı alıntılar ana metin ile alt başlıklar arasında bir yerde olmalıdır.

Tip Boyut

Tasarımcıların başlamasına yardımcı olmak için geleneksel tipografik ölçekler mevcuttur. Ancak bunlar yalnızca bir başlangıç ​​noktasıdır ve tasarımcılar, bu geleneksel ölçeklerden ayrılırken farklı ağırlıklar ve stiller denemekten çekinmemelidir. Çoğu, ölçeğini gövde metninin boyutuna dayandırır ve oradan genişler.

Tipografik Stilin Öğeleri'nin klasik tipografik ölçeği, çoğu kelime işlemci programının yazı tipi boyutlarını seçerken sunduğu varsayılanlar olma eğiliminde olduklarından çoğu tasarımcıya aşinadır. Ölçek:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 ve 72.

Artan boyutları hesaplamak için çeşitli matematiksel denklemleri takip eden ek tipografik ölçek örnekleri var.

Tasarımcılar varsayılan olarak 12 puntoluk bir gövde metni boyutuna sahip olma eğilimindedir, ancak bunu 14 veya 16'ya (hatta 24'e kadar) yükseltmek, kullanılan yazı tipine bağlı olarak okunabilirliğin artmasına neden olabilir. Örneğin Jeffrey Zeldman'ın kişisel web sitesi, gövde kopyası için 24 piksellik bir yazı tipi boyutu kullanırken Vogue.com 19 piksellik bir gövde metni boyutu kullanır.

Gerçek ölçeği tamamlamadan önce, tasarımcılar tasarımda kullanılan yazı tiplerinin son halini aldığından emin olmalıdır. Farklı yazı biçimleri, teknik olarak "aynı" boyutta olsalar bile önemli ölçüde daha büyük veya daha küçük görünebilir.

Koordinasyon Yazı Tiplerini Seçme

“Profesyonel” bir tasarımı daha amatörce çabalardan ayıran şey, yazı karakterlerinin birleşimidir. Yazı karakterlerini etkili bir şekilde birleştirmek kısmen içgüdü ve kısmen bilimdir, ancak tasarımcıların farklı ailelerden yazı karakterlerini birleştirmek için izleyebilecekleri bazı yönergeler vardır.

İlk olarak, serifleri sans seriflerle karıştırmak, iki serifi veya iki sans serifi birleştirmekten çok daha kolaydır. Ancak herhangi bir serifi ve herhangi bir sans serifi alıp bir tasarımda bir araya getirmek kadar basit değil.

Yazı tiplerinin kullanılacağı bağlamı düşünün. Örneğin, tasarımın hafif ve eğlenceli olması gerekiyorsa, yazı tiplerinin o ruh haline uyduğundan emin olun. Tasarım daha ciddiyse, yazı tipleri bunu yansıtmalıdır. Başka bir deyişle, birleştirilen yazı tiplerinin ruh hali eşleşmelidir.

Tasarımcılar da kontrastı kendi avantajları için kullanmalıdır. İnce ve kalın yazı karakterlerini birleştirmek, ağırlık olarak birbirine çok benzeyen iki yazı tipini birleştirmek yerine genellikle daha iyi sonuç verir.

Benzer x yüksekliklerine sahip yazı tiplerini arayın (bir yazı tipindeki taban çizgisi ile küçük harflerin ortalama satırı arasındaki mesafe). Bu, yazı tipleri arasındaki çakışmayı önlemeye yardımcı olur. Çatışmayı önlemeye yardımcı olan diğer şeyler arasında benzer karakter aralığı ve karakter şekilleri bulunur. Çok yuvarlak harf biçimlerine sahip yazı biçimleri, daha fazla kare yazı biçimleriyle birleştirilmemelidir.

Yönergeler yazı tipi kombinasyonları oluşturmada yardımcı olabilirken, deney ve uygulamanın yerini hiçbir şey tutamaz. Tasarımcılar, yazı tiplerini denemek için zaman harcamalı ve mümkün olduğunca sık bir şekilde bunları birleştirmeye çalışmalıdır. Çeşitli bağlamlarda çalışabilecek birkaç yedek yazı tipi kombinasyonu bulmak, mevcut bütçe ve kaynakların bir ton deneme yanılmaya izin vermediği projeler için de yararlıdır.

Tasarımcılar, bu yönergeleri ellerinde tutarak, web tipografi kaynağı Better Web Type'ın etkili kombinasyonlar oluşturmak için belirlediği dört adımlı süreci izleyebilirler:

1. Ana gövde metniniz için bir çapa yazı tipi bulun
2. Olası kombinasyonlar için birkaç ikincil yazı tipi bulun
3. Kombinasyonları değerlendirin
4. Yazı tipi kombinasyonlarını ortadan kaldırın/seçin

Ek Hususlar

Son yazı tiplerini seçtikten sonra farklı stiller ve ağırlıklarla denemeler yapmak, süper boyutlu ana başlıklar oluşturmak zorunda kalmadan ek hiyerarşi seviyeleri oluşturabilir. Yazı tiplerini yaklaşık olarak aynı boyutta tutmak, ancak daha önemli olan başlığı kalın, daha az önemli olanı italik yapmak, kesin bir görsel hiyerarşi oluşturur.

Aynı şey renkle de yapılabilir. Vurgulu renkte bir alt başlık, gövde metniyle aynı renkte olan bir alt başlıktan daha fazla öne çıkacaktır. Tasarımcılar, yalnızca yazı boyutuna güvenmeden daha önemli metinleri ayırmak için alt başlıklarında renklerle oynamalıdır.

Boşluk, önemli başlıkları ve alt başlıkları birbirinden ayırmak için de kullanılabilir. Başlıkların etrafında daha fazla boşluk bırakarak eşlik eden gövde metninden öne çıkmalarını sağlamak, onları daha da belirgin hale getirir. Buna karşılık, gövde metniyle aynı aralıklı alt başlıklar daha az önemli hale getirilir.

Hiyerarşi oluşturmak için karakterler arasındaki boşluk bile kullanılabilir. Karakterleri boşluk bırakmak, belirli bir satırı daha belirgin hale getirebilir. Bu, özellikle bu harfleri büyük harf yapmakla birleştirildiğinde etkilidir. Tasarımcılar, aşırı kullanıldığında amatörce görünebileceğinden, aşırıya kaçmamaya dikkat etmelidir.

Çözüm

Deneme ve uygulama, tipografik hiyerarşide ustalaşmanın en iyi yoludur, ancak bu yönergeleri öğrenmek, tasarımcıların doğru yerden başlamasına yardımcı olacaktır. Boyut, renk, boşluk, ağırlık ve diğer faktörlerin etkili hiyerarşiye nasıl katkıda bulunduğunu öğrenmek ilk adımdır.

Bu temel bilgiler bir tasarımcının zihninde (ve uygulamasında) oluşturulduktan sonra, kullanıcılar için ilham veren ve zevk veren benzersiz tasarımlar yaratmak için gerektiği gibi "kuralları" izleyen veya çiğneyen görsel hiyerarşileri daha sezgisel olarak oluşturabilirler.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Okunabilirlik için Tasarım – Web Tipografisi Kılavuzu (Infografik ile)
• Yazı Tipi Sınıflandırmasının Nüanslarını Anlamak
• Tasarım Temelleri – Görsel Hiyerarşi Rehberi (İnfografik ile)
• Web ve Baskı Tasarımı için Yazı Tipi Stilleri
• UX'inizi Net Görsel Hiyerarşi ile Güçlendirin