Tipografi Hiyerarşisi: Başlık ve Gövde Dengesi

İyi bir tipografi hiyerarşisi, okuyucunun gözünü sayfada nereye bakacağı konusunda yormadan yönlendirir: önce başlık, sonra ara başlık, en sonda gövde metni. Bu sıralamayı kuran şey renk ya da süsleme değil; çoğunlukla yalnızca boyut ve ağırlık farklarıdır. Bu yazıda başlık ile gövde arasındaki dengeyi nasıl kuracağını, hangi oranları kullanacağını ve CSS'te bunu nasıl sürdürülebilir biçimde yazacağını adım adım anlatıyorum.

Hiyerarşi neden boyut ve ağırlıkla kurulur?

Bir metni açtığında gözün ilk yakaladığı şey en büyük ve en koyu öğedir. Beyin bu öğeyi "önemli" olarak işaretler ve okumaya oradan başlar. Yani hiyerarşi aslında bir öncelik haritasıdır: tasarımcı olarak okuyucuya "şuraya bak, sonra şuraya" diyorsun. Bunu üç temel araçla yaparsın:

• Boyut (font-size): Büyük olan önce okunur. En güçlü ve en hızlı algılanan sinyaldir.
• Ağırlık (font-weight): Aynı boyutta bile koyu metin öne çıkar. Boyut değiştirmeden vurgu eklemenin yoludur.
• Boşluk (whitespace): Bir başlığın üstündeki boşluk, onu bir önceki bloktan ayırır ve "yeni bölüm" sinyali verir.

Renk ve italik de yardımcı olur ama ana iskeleti boyut ve ağırlık taşır. İyi bir hiyerarşi, sayfayı gri tonlamada bastığında bile çalışmaya devam eder.

Ölçek seçimi: tipografik bir oran kullan

Başlık boyutlarını rastgele seçmek yerine bir modüler ölçek kullan. Bir taban boyut (genelde gövde için 16px / 1rem) belirler ve her üst seviyeyi sabit bir oranla çarparsın. Yaygın oranlar: 1.2 (minör üçlü), 1.25 (majör üçlü) ve 1.333 (mükemmel dörtlü). Daha büyük oranlar daha dramatik, daha küçükleri daha sakin bir his verir.

:root {
  --text-base: 1rem;     /* 16px gövde */
  --ratio: 1.25;
  --text-sm:  calc(var(--text-base) / var(--ratio));
  --text-lg:  calc(var(--text-base) * var(--ratio));
  --text-xl:  calc(var(--text-lg)  * var(--ratio));
  --text-2xl: calc(var(--text-xl)  * var(--ratio));
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { font-size: var(--text-base); }

Bu yaklaşımın avantajı tutarlılıktır: tüm boyutlar matematiksel olarak ilişkili olduğu için sayfa "akortlu" görünür. Oranı tek bir yerden değiştirip tüm hiyerarşiyi yeniden ölçekleyebilirsin.

Akıcı tipografi: ekranla birlikte ölçeklenmek

Mobilde 48px'lik bir başlık ekranı boğabilir, masaüstünde aynı başlık küçük kalabilir. Sabit medya sorguları yerine clamp() ile akıcı bir ölçek kurmak çok daha temizdir:

h1 {
  /* min, tercih edilen (viewport'a bağlı), max */
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
}

clamp() başlığı küçük ekranda 2rem'de tutar, büyük ekranda 3.5rem'i geçmez ve aradaki geçişi viewport genişliğine göre yumuşakça yapar. Gövde metni için ise akıcı ölçek genelde gereksizdir; 16–18px sabit bir taban çoğu cihazda en rahat okunan aralıktır.

Gövde metnini okunur tutmak

Hiyerarşinin yarısı başlıklarsa diğer yarısı gövdedir. Başlık ne kadar etkileyici olursa olsun, okunmayan bir gövde metni tasarımı çökertir. Birkaç sağlam kural:

• Satır uzunluğu: Satır başına 50–75 karakter en rahat aralıktır. CSS'te max-width: 65ch; ile pratik biçimde sınırlarsın.
• Satır yüksekliği: Gövde için line-height: 1.5–1.6 idealdir. Başlıklar daha sıkı olabilir (1.1–1.25), çünkü büyük puntoda geniş satır aralığı dağınık durur.
• Kontrast: Gövde metnini saf siyah yerine çok koyu griyle (örn. #1a1a1a) yazmak göz yorgunluğunu azaltır ama WCAG kontrast eşiğini (en az 4.5:1) koru.
• Ölçü tutarlılığı: Paragraf aralarındaki boşluğu satır yüksekliğiyle ilişkilendir; rastgele margin değerleri ritmi bozar.

Ağırlık ve kontrast: dengeyi kurmak

Başlık ile gövde arasındaki dengeyi yalnızca boyut taşımaz; ağırlık da kritiktir. Klasik bir hata, hem büyük hem çok koyu (örn. 800) başlık ile çok ince (300) gövdeyi yan yana koymaktır — bu zıtlık dengesiz, "bağıran" bir his verir. Daha güvenli bir reçete:

• Gövde için 400 (regular) kullan; uzun metinde 300 fazla soluk kalır.
• Başlıklar için 600–700 yeterli vurgudur; boyut farkı zaten dikkati çeker.
• Vurgu için <strong> ve <em> kullan; her şeyi koyulaştırmak hiçbir şeyi vurgulamamakla aynıdır.

İki yazı tipi karıştırıyorsan (örn. başlıkta serif, gövdede sans-serif) sayıyı ikiyle sınırla ve x-yüksekliklerinin uyumlu olmasına dikkat et. Çoğu durumda tek bir ailenin farklı ağırlıkları en temiz sonucu verir.

Hiyerarşiyi test etmek

Tasarımın hiyerarşisini iki hızlı testle doğrulayabilirsin. Birincisi squint testi: ekrana gözlerini kısarak bak; metin bulanıklaşınca yalnızca büyük/koyu öğeler seçilir kalmalı ve okuma sırası yine de mantıklı görünmeli. İkincisi gri tonlama testi: rengi kapat; hiyerarşi sadece boyut ve ağırlıkla hâlâ çalışıyorsa sağlamdır. Bir de erişilebilirlik için başlık seviyelerini (h1 → h2 → h3) görsel değil anlamsal sıraya göre kullan; ekran okuyucular bu yapıyı dolaşır.

Sık Sorulan Sorular

Bir sayfada kaç farklı boyut kullanmalıyım?

Genelde 4–6 boyut yeterlidir: bir ana başlık, iki-üç ara başlık seviyesi, gövde ve küçük/yardımcı metin. Daha fazlası hiyerarşiyi netleştirmek yerine bulanıklaştırır; her ek seviye okuyucudan bir karar daha ister.

px mi rem mi kullanmalıyım?

Font boyutları için rem tercih et: kullanıcının tarayıcı yazı tipi tercihine saygı gösterir ve erişilebilirliği iyileştirir. px'i kenarlık gibi gerçekten sabit kalması gereken küçük detaylarda kullanabilirsin.

Başlık ve gövde için aynı yazı tipini kullanmak sorun mu?

Hayır, hatta çoğu zaman en güvenli seçimdir. Tek bir ailenin farklı boyut ve ağırlıklarıyla güçlü bir hiyerarşi kurabilirsin. İki yazı tipi karıştırmak ustalık ister ve yanlış eşleşme amatör bir his verir.

Tipografi hiyerarşisi, tasarımın sessiz ama en belirleyici katmanıdır. Markan için boyut, ağırlık ve boşluğu birlikte çalışan bir sistem haline getirmek istersen benimle iletişime geç — birlikte okunur, dengeli ve ölçeklenebilir bir tipografi sistemi kuralım.