3 Seviyeli Tipografik Hiyerarşi

Üzerine düşünmediğiniz halde tasarımlarınızda tipografik hiyerarşiyi kullanıyorsunuz.

İnsanların web sitenizde baktığı en önemli elemanlardan biri kesinlikle metin. Metinlerinizin temiz ve okunaklı olması ve kullanıcılarınızı, direkt olarak tasarımın içine çekmesi gerekiyor.

Özetle bu tipografi hiyerarşisidir.

Tipografi Hiyerarşisi Nedir?

Aslında tipografi hiyerarşisi, görsel hiyerarşinin bir çeşididir. Bir metinde, en önemli parçaların, dikkat çekecek ve önemini vurgulayacak biçimde sunulmasını sağlar.

Tipografik hiyerarşi olmazsa, bir web tasarımdaki her metin, her cümle ve her kelime birbiriyle aynı görünür. Her şeyin aynı boyda ve renkte olduğu bir sayfayı okuduğunuzu hayal edebiliyor musunuz? Nereden başlayacaksınız? Neyin daha önemli olduğunu nereden anlayacaksınız?

Tipografik hiyerarşi, elemanlar arasında kontrast oluşturur. Tasarımcılar bunu farklı yazı tipleri, boyutları, kalınlıkları, büyük ve küçük harfler, bold veya italikler ve renkler kullanarak sağlarlar. Bu tasarım araçları metininizin farklı katmanlara ayrılmasını sağlar.

Birincil Seviye

Birincil seviye tipografi, bütün büyük metinleri ifade eder. Başlıklar buna örnek olabilir. Eğer tipografi sanatı ile uğraşmıyorsanız, bunlar tasarımdaki en büyük elemanlardır.

İkincil Seviye

Tipografinin ikinci seviyesi, okuyucuları web tasarımda tutmak için gerekli bilgilerin verildiği parçalardır. Bölüm başlıkları, alt başlıklar, tanıtım kutuları, bilgi görselleri (infografikler) ve diğer küçük bloklar; ikincil seviye tipografiye örnek verilebilir. Bu metin bloklarının tasarımı genellikle, büyük boyutlu olurlar ancak birincil seviye tipografi boyutlarından çok daha küçüklerdir.

Üçüncül (Tersiyer) Seviye

Bu seviyedeki tipografi, tasarımınızın ana metinidir. Genellikle web tasarımdaki en küçük boyutlu yazılardır ama potansiyel müşterileriniz için, okunaklı olmaları gerekir. Yazı tipi basit ve boş alanlarla ve genel kullanımla tutarlı olmadır.

Diğer Seviyeler

Tipografide diğer seviyeler, tersiyer seviye içindeki küçük parçalara uygulanan efektlerdir. Efektler, ana metinde vurgulanması gereken yerlere uygulanan, bold, italik, altçizgi ve renk gibi elemanlar olabilir. Bu efektler, tersiyer seviyede kullanılan yazı tipi ve boyutu bozmadan uygulandığında çok daha iyi çalışırlar.

Basılı Projelerde Hiyerarşi

Eğer yukarıdaki örneklere bakarsanız, farklı tipografik hiyerarşi seviyelerini ve okunaklılığı nasıl değiştirdiğini fark edebilirsiniz.

Hiyerarşi Yaratın

Hiyerarşi yaratmanın farklı yolları mevcut.

• Yazı tipi seçimi: Daha ilginç yazı tipleri genellikle daha büyük oluyorlar ve bunlar basit olanlara göre daha çok dikkat çekiyor. Farklı yazı tipleri kullanacaksanız, yazıların yeterince büyük ve okunaklı olmasına dikkat edin.
• Boyut: Belirtmemize gerek yok tabii ama metin boyutları büyüdükçe okuyucunun dikkatini çekme hızı da artıyor. Metin boyutlarını, metnin önemine göre ayarlamalısınız.
• Kalınlık: Harflerin kalınlığı metni daha büyük veya daha küçük gösterebilir.
• Büyük/küçük harfler: Bir insana tamamı büyük harflerle yazılmış bir e-mail atmanın ona bağırmak gibi olduğunu duymuşsunuzdur. Aynı durum tasarımda da geçerli bu yüzden büyük harf kullanırken dikkatli olmalısınız. Büyük harfler çok daha büyük görünürler ve metinde küçük harfler de olduğu zaman fazla ön planda hissettirirler.
• Bold: Bold kullanmak, metinde belirli bir grubu veya kelimeyi vurgulamak için çok güzel bir yöntem.
• İtalik: İtalik, bold kullanımına göre daha az dramatik olacak şekilde kelimeyi veya grubu vurgulamak için kullanılıyor.
• Renk: Bu yöntem her seviyedeki tipografik hiyerarşide kullanılabilir ancak okunaklılığı etkilememesine dikkat etmelisiniz.
• Yerleşim: Metinlerin sayfa üzerindeki yerleşimleri de hiyerarşiyi etkileyebilir. Okuma biçimimiz genellikle yukarıdan aşağı olacak şekildedir ama bu farklı teknikler kullanarak değiştirilebilir.

Dijital Projelerde Hiyerarşi

Basılı projelerde kullandığınız bütün araçlar dijital projelerde de kullanılabiliyor. Dijital tipografik hiyerarşi için HTML'yi de göz önünde bulundurmalısınız. Bu düşünce şekli, sizin görsel seviyenizin, farklı kullanıcıların ekranlarına yansımasına yardımcı olacaktır.

Hiyerarşi Yaratın

Çevrimiçi projeleriniz için, başlık, gövde ve bold stilleri gibi temel elemanları kullandığınızdan emin olun. Her biri HTML'de tanımlanabiliyor.

• Title(title): Web kullanıcıları için dosyanın başlığını tanımlar.
• Gövde (body): Bir belgedeki gövde metinini tanımlar.
• Başlıklar (headers, h1-h6): Farklı katmanlardaki başlık türlerini tanımlar. H1 genellikle en büyük ve en önemli başlığı tanımlar ve önem sıralaması h6'ya kadar düşerek devam eder.
• Bold (strong): Daha kalın ve daha önemli metinleri ifade eder.
• İtalik (em): Eğimli metinleri ifade eder, vurgulamak için kullanılır.

Üzerine düşünmediğiniz halde web tasarımlarınızda tipografik hiyerarşiyi kullanıyorsunuz. Fakat büyük resimde nasıl tipografilerin genel tasarımınızı geliştireceğini düşünmeniz gerekir.

Vurgulamak için, dikkat çekmek için ve kullanıcıların daha hızlı tepki verebilmeleri için eylem elemanlarında tipografik hiyerarşiyi kullanın. Metininizde farklı fontlar, boyutlar, renkler ve efektler kullanırken okunaklı olup olmadığını sürekli kontrol etmelisiniz.