Tipografi hiyerarşisi, bir tasarımdaki metin öğelerinin görsel önem sırasını belirleyen düzendir. Ziyaretçi sayfaya baktığında ilk olarak başlığı, sonra alt başlığı, ardından gövde metni okumalıdır, bu düzeni bilinçli olarak kurmak, tipografi hiyerarşisinin özüdür. **Neden tipografi hiyerarşisi gereklidir?** Hierarsiz bir tasarımda gözün nereye bakacağı belirsizleşir. Her metin aynı boyut ve ağırlıkta görünürse içerik ne kadar iyi yazılmış olursa olsun okunmaz; ziyaretçi tarar ve geçer. **Hiyerarşiyi oluşturan araçlar** Tipografi hiyerarşisi kurmanın beş temel aracı: 1. Boyut (font size) 2. Ağırlık (bold, regular, light) 3. Renk ve kontrast 4. Harf aralığı (letter spacing) 5. Boşluk (margin, padding) **Adım 1: Üç seviyeli sistem kurun** Tipografi hiyerarşisi için üç temel seviye genellikle yeterlidir: - **H1 (Başlık):** En büyük, en dikkat çekici, kısa ve öz - **H2 (Alt Başlık):** Başlıktan küçük, gövdeden büyük, bölümleri ayırır - **Gövde (Body):** En okunabilir boyut, bol satır aralığı Bu üç seviye tutarlı bir skala oluşturursa tasarım hiyerarşisi kendiliğinden oturur. **Adım 2: Boyut skalası belirleyin** Tipografi hiyerarşisi kurarken matematiksel bir oran kullanmak tutarlılık sağlar. "Modüler Skala" yöntemi: Taban boyutu seçin ve bir çarpan belirleyin. Örnek (1.25 çarpanıyla): - Gövde: 16px - H3: 16 × 1.25 = 20px - H2: 20 × 1.25 = 25px - H1: 25 × 1.25 = 31px Bu skalanın her adımı bir öncekinden %25 büyük; görsel fark belirgindir ama abartılı değil. **Adım 3: Font ağırlığı kullanın** Boyut tek başına yeterli değildir; ağırlık farkı hiyerarşiyi pekiştirir: - H1: Bold (700 veya 800 weight) - H2: Semi-bold (600) - Gövde: Regular (400) - İkincil metin, caption: Light (300) Tüm metni bold yapmak hiyerarşiyi yok eder; bold yalnızca gerçekten önemli öğeler için kullanılmalıdır. **Adım 4: Renk ve kontrast hiyerarşisi ekleyin** Renk tonu da tipografi hiyerarşisi içinde anlam taşır: - Başlık: Tam siyah veya koyu marka rengi - Gövde: %70-80 koyu gri (#333333 veya #444444) - İkincil metin (caption, tarih): %50 gri (#888888) Açıklık arttıkça önem azalır. Bu sistemi tutarlı kullandığınızda ziyaretçi bilinçsiz olarak hiyerarşiyi okur. **Adım 5: Satır aralığı ve harf aralığı ayarlayın** Tipografi hiyerarşisi sıkışık veya dağınık metnde işe yaramaz: - Gövde metninde satır aralığı (line-height): font boyutunun 1.5-1.7 katı - Başlıklarda satır aralığı: 1.1-1.3 (sıkı ama boğmayan) - Büyük harflerden oluşan başlıklara: hafif harf aralığı (letter-spacing: 0.05em) **Adım 6: Boşluk mantığını uygulayın** Başlık ile gövde arasındaki boşluk, iki gövde paragrafı arasındaki boşluktan büyük olmalıdır. Bu kural, hangi başlığın hangi içeriğe ait olduğunu açıkça gösterir: - H2 altındaki boşluk < H2 üstündeki boşluk Başlık, altındaki içeriğe "daha yakın" durur; üzerinden gelen içerikten «daha uzak». **Yaygın hatalar** - Dört veya daha fazla farklı font boyutu kullanmak: Hiyerarşi karmaşıklaşır. Üç seviye neredeyse her proje için yeterlidir. - Başlığı gövdeden yalnızca biraz büyük yapmak: Boyut farkı belirgin olmalı; küçük fark hiyerarşi değil, hata izlenimi bırakır. - Satır aralığını ihmal etmek: Sıkışık gövde metni okunmaz; 1.5 minimum referans alın.