Daha İyi Tipografik Hiyerarşi için 9 İpucu
Her proje, metin öğeleri için bir sistem ve hiyerarşi gerektirir. Bir tasarımda kullanılan tüm küçük metin parçalarını düşünün - başlıklar, gövde kopyası, gezinme öğeleri, yasal bilgiler, altyazılar vb.
Ancak, her metin öğesinin bir sonrakine akması için bu hiyerarşiyi nasıl yaratırsınız? Bugün, neredeyse her tasarım projesi için kullanılabilecek bir tipografi hiyerarşisi sistemi oluşturarak sizi adım adım ele alacağız. (Biraz ilham almanıza yardımcı olmak için ipuçlarını harika tipografinin güzel örnekleriyle eşleştiriyoruz.)
Envato Elements'i keşfedin
1. Rahat Gövde Kopyası ile başlayın
Serin bir başlık tedavisi ile başlamak isteyebilirsiniz, ancak başlangıç yeri aslında ortada. Önce ana gövde kopyası için rahat bir yazı tipi, boyut ve boşluk oluşturun.
Bu mantıklı olmalı, çünkü bu tasarımdaki metnin büyük kısmı. İster bir web sitesi ister broşür oluşturun, bu kavram aynıdır. Baymard Enstitüsü'ne göre, gövde kopyası için ideal okunabilirlik, satır başına 50 veya 60 karakter (veya sütun) arasındadır. Bu kılavuz, okunabilir metinler için bir ölçek belirlemenize ve farklı türde yazı tiplerini (örneğin, sıradan yoğunlaştırılmış ve levha gibi) açıklamanıza yardımcı olacaktır.
2. Bir Ölçek Oluşturun
Gövde kopyasının nasıl görüneceğini öğrendikten sonra, tasarımdaki diğer tüm metin öğeleri için etrafında bir ölçek ayarlayabilirsiniz. Belirli metin bloklarını gözden kaçırmak kolay olabilir; projenizdeki her metin kullanımının bir listesini yapın.
- Vücut kopya
- haber başlıkları
- Alt başlıklar
- Başlıklar
- Alıntıları engelle
- Gezinme öğeleri
- Altbilgi bilgileri
- Yasal kopya veya feragatnameler
Şimdi, bu öğelerin her biri için yazı tipi, boyut aralığı ve kullanımını belirleyen bir ölçek oluşturun. (Ve çalışma belgeleri için web siteleri veya stil dosyaları için CSS'nizde oluşturun.) Ölçeği oluşturmanın birkaç yolu vardır, ancak boyut yüzdesi iyi bir başlangıç noktası olabilir. Bir taban çizgisi ızgarasının arkasındaki veya görsel olarak matematiğe dayalı bir ölçek de oluşturabilirsiniz.
İşte başlamak için basit bir ölçek:
- Gövde kopya boyutu
- Başlıklar gövde kopya boyutu süreleri% 220
- Alt başlıklar gövde kopya boyutu süreleri% 150'dir
- Gezinme öğeleri gövde kopya boyutu süreleri% 80'dir
- Altbilgi / yasal kopya gövde boyutu çarpı% 80
3. Büyükten küçüğe, tepeden tırnağa düşün
Bu kural oldukça basittir: En büyük ve en önemli metin en üstte olmalı ve sayfayı veya ekranı okurken boyutlar küçülmelidir.
Bu, her zaman ve sonra bazı tasarım incelikleriyle bu kuralı kıramayacağınız anlamına gelmez, ancak her zaman tipografik hiyerarşi geliştirmek için başlangıç noktası olmalıdır. (Başlık için bir web sayfasının sonuna kim gidip okumaya başlamak için en üste geri kim gidecek?)
4. Alan için Kurallar Belirleyin
Yazı boyutu kadar önemli ve onun arasındaki boşluk. Alan belirleme faktörleri arasında satır aralığı (veya satır yüksekliği), girintiler (veya satır aralığı), sarma ve oluklar ve hizalama sayılabilir.
Metni boyutlandırmak için kullanılan ölçeği yansıtan boşluk oranlarını göz önünde bulundurun. Tuvalin büyüklüğü de burada oldukça önemlidir. Daha büyük tuvaller, küçük tuvallerden daha sıkı aralıklarla okunabilir. (Bu yüzden birçok proje, cep telefonları ve masaüstü bilgisayarlar için daha sıkı kurallar gibi cihazlar için daha gevşek aralık özelliklerine sahiptir.)
Yazı tipi boyutlarında olduğu gibi, tüm tasarım çerçevesi için boşluk kuralları önceden ayarlanmalıdır. Tutarlı, temiz boşluk, bir tasarım yapabilen veya kırabilecek küçük şeylerden biridir.
5. Kalın ve İtalik için Kural Belirleme
Kalın ve italik yazı tipleri veya boyutları farklı olmasa da kullanımı önemlidir. (Diğer tüm kelimeler kalınsa tasarımın nasıl görüneceğini hayal edin.)
Bu, kalın ve italik için yönergeleri özellikle önemli kılar. Boyut veya mekana bakmak yerine, düşünce çok daha bağlamsaldır. Kullanım özellikleri, bu kadar çok kelime veya kelime öbeğinin (veya belirli kelime veya kelime öbeğinin) bu tedaviye sahip olabileceğini belirtebilir. Kalın ve italik harfleri aşırı kullanmak yaygın bir hatadır; şüphe duyduğunuzda kullanmayın.
6. Bir “Z” oluşturun
Ortak okuma düzeni Z şeklindedir. İster soldan sağa veya sağdan sola (Z'yi çevirin) okunan bir dil için tasarlıyor olun, kullanıcılar satır boyunca bir köşeden sonuna kadar okuyacak ve sonra tekrar başlangıç köşesinde ve çizgi boyunca yinelenen bir desende.
Metin öğelerini ekrana yerleştirirken bu doğal akışı kullanın. Bu Z şekli, çoğu markanın logosunu sol üst köşeye yerleştirmesinin nedenidir. Okurken gözün ilk indiği yerdir.
7. Görsel Ağırlığı Düşünün
Boyut, bir metin öğesinin ekranda ne kadar büyük göründüğü konusunda tek faktör değildir. Görsel ağırlık da aynı derecede önemlidir ve tipografik ölçek yaratma şeklinizi etkileyebilir.
Yazı biçimleri şu durumlarda daha büyük görünür:
- Kalın strok ağırlıkları içerir
- Süslemeler veya süslemeler içerir
- Genişler
- Yenilik temelli yazı tipleridir
- Daha uzun boyları var
- Tüm kapaklar olarak kullanılırlar
Yazı biçimleri aşağıdaki durumlarda daha küçük görünür:
- Yoğunlaştırılmışlar
- Hafif veya ince kontur genişlikleri içerir
- Arka planla çok az kontrast var
- Küçük harflerle kullanılırlar
8. Vurgu Oluştur
Normal tipografik ölçeğin biraz dışında kalan vurgulamak istediğiniz bazı kelimeler vardır. Yazıya aksan eklemek, gerçek boyutu veya yazı tipini ayarlamak zorunda kalmadan belirginleşmesini sağlayabilir.
Ortak aksanlar şunları içerir:
- Renk
- Altını çizmek
- Vurgulamak
- Düğme veya şekildeki metin
- Basit animasyon
- Aynı boyuttaki diğer tipte değişiklik
Bir tür hiyerarşisindeki herhangi bir aksanla ilgili güzel bir şey, hemen bir dikkat çekici olmasıdır. Bu elemanlar, tasarımdaki en büyük etki ve anahtar elemanlar için az miktarda kullanılmalıdır.
9. “Göz Testi” ni kullanın
Son olarak, her kuralın bir istisnası vardır (veya iki). “Göz testi” devreye giriyor. Ekrandaki ölçeğe bakın. Metin size nasıl görünüyor ve hissediyor? Mantıksal bir akış var mı? Okuması kolay mı?
Herhangi bir şekilde hissediliyorsa, ölçekte ayarlamalar yapmayı düşünün. Kullandığınız yazı tipine ve tasarımdaki diğer öğelere bağlı olarak - resimlerden renklere kontrast - ölçek sizin için ayar gerektirecektir. Ne yapmak istediğinizden emin olmadığınız zaman sadece bir başlangıç noktasıdır.
Ve başka gözler de isteyin. Hangi sürümün en iyi yanıtı aldığını görmek için farklı hiyerarşilere sahip bir veya iki sürüm oluşturun. Tasarım görsel bir sanattır ve “göz testi” ni kesin olmayan ama oldukça güvenilir bir seçenek haline getirir.
Sonuç
Bir proje için tipografik bir hiyerarşi belirledikten sonra yapabileceğiniz en iyi şey belgeyi belgelemektir. Web siteleri için CSS ile ölçek oluşturun veya basılı projeler üzerinde çalışırken stil dosyaları oluşturun.
Daha büyük ölçekli tasarımlar veya marka bilinci oluşturma için, ölçek ve teknik özellikleri bir stil kılavuzuna yazılı olarak koyun. Bir tür hiyerarşisi oluşturmak arka uçta biraz çalışma gerektirir, ancak sonraki projelerde ilerledikçe projenin tamamlanmasını daha hızlı, daha kolay ve daha tutarlı bir şekilde belirtmemek için yapar.
