Tipografik Hiyerarşi: Gerçekten Okunan Bir Hiyerarşi Nasıl Kurulur

Tipografik hiyerarşi hakkındaki çoğu makale onu kurmak yerine tarif eder. Başlıklar önemli hissettirmeli, gövde metni sakin hissettirmeli derler. İş "bir ana sayfada, bir makalede ve bir ayarlar panelinde ayakta kalacak beş boyut, üç ağırlık ve satır aralığı seç" olduğunda hiçbir işe yaramaz. Tarif bir sistem değildir. Sevk edilen şey sistemdir.

Bu yazı inşa kısmı. Gerçek oranlar, gerçek sayılar, karar sırası ve çoğu hiyerarşiyi lansmandan önce öldüren hata kalıpları.

Tipografik hiyerarşi aslında nedir

Tipografik hiyerarşi, göz hiçbir şey okumadan önce neyi birinci, ikinci ve üçüncü okuyacağını bilsin diye her metin öğesinin yapısal olarak sıralanmasıdır. Görsel hiyerarşinin tipe özgü katmanıdır ve çalışan her tipografi sisteminin omurgasıdır.

Gerçek bir hiyerarşi dört soruya yazılı yanıt verir. Kaç seviye var. Her seviyenin boyutu ne. Her seviyenin ağırlığı ne. Seviyelerin arasında ve içinde nasıl bir boşluk var. Bu yanıtlar tek sayfalık bir dokümanda yoksa sistem tasarlanmamış, doğaçlanmıştır.

Hemen her sistemin ihtiyaç duyduğu beş seviye

Çalışan sistemlerin çoğu beş seviyede karar kılar: H1, H2, H3, gövde ve küçük. Fazlası gürültü yaratır. Azı sayfayı düzleştirir.

Tuzak, butonları, alt yazıları ve form etiketlerini ayrı seviyeler saymaktır. Onlar farklı bir role sahip gövde ya da küçük metindir. Buton, orta ağırlıkta gövdedir. Alt yazı, normal ağırlıkta küçüktür. Etiket, orta ağırlıkta küçüktür. Aynı boyutlar, farklı işler.

Bir ölçek oranı seç ve ona sadık kal

Her seviyenin boyutu, bir tabana uygulanan tek bir orandan gelir. Önce oranı seç, sonra her boyutu ondan türet. Taban hemen her zaman 16px'tir: tarayıcı varsayılanı ve gövdenin ekranda en temiz okunduğu boyut. Üç oran hemen her projeyi kapsar.

Büyük terz (1.25). Sıkı ve yoğun. Veri ağırlıklı arayüzler ve yönetim araçları için en iyisi. 16px tabandan: 16, 20, 25, 31, 39, 49, 61. Görünür ama asla dramatik değil.

Tam dörtlü (1.333). İş atı. Editoryal için yeterince güçlü, ürün için yeterince ölçülü. 16px tabandan: 16, 21, 28, 37, 50, 67. Çoğu pazarlama sitesi için varsayılan.

Altın oran (1.618). Editoryal, ifadeci, neredeyse teatral. Açılış sayfaları ve dergi düzenleri için en iyisi. 16px tabandan: 16, 26, 42, 68, 110. H1 gövdenin tepesinde yükselir, mesele de bu.

type-scale.com gibi araçlar herhangi bir taban ve oran için tabloyu bir saniyede üretir. Birini seç, sayıları yaz, sevk et. Proje ortasında değiştirmek her sayfaya dokunan bir refaktördür.

Ağırlık ikinci eksendir, birincisi değil

Tasarımcılar tek kaldıraç olarak boyuta uzanır ve sayfanın neden düz okunduğunu merak eder. Ağırlık işin yarısını taşır, özellikle boyut aralığının kısıtlı olduğu mobilde.

Çalışan bir sistem üç ağırlık ister. Gövde için normal, vurgu ve etiketler için orta, başlıklar için kalın ya da yarı kalın. Dördüncü ağırlık bir marka kararıdır, sistem gereği değil.

Düz sayfaların çoğunu düzelten kural: iki bitişik seviyede asla aynı ağırlığı kullanma. H2 kalınsa H3 yarı kalın ya da orta olmalı. Aynı ağırlıkta komşuluk, boyuttan bağımsız olarak hiyerarşiyi çökertir. Ters tuzak her şeyin kalın olmasıdır, bu da ağırlığı kaldıraç olmaktan tamamen çıkarır.

Satır aralığı sessiz hiyerarşi kaldıracıdır

Satır aralığı, satırlar arasındaki dikey boşluktur, taban çizgisinden taban çizgisine. CSS buna line-height der. Tipografik hiyerarşideki en az takdir gören kaldıraç.

Başlıkta sıkı satır aralığı kendinden emin ve yoğun okunur. Gövdede gevşek satır aralığı sakin ve okunaklı okunur. Tersi hiyerarşiyi tersine çevirir. 1.2'de gövde duvar gibi okunur. 1.6'da 64px bir başlık süs gibi okunur.

Çalışan varsayılanlar. Başlıklar (H1, H2): 1.1 ile 1.2. Alt başlıklar (H3): 1.2 ile 1.3. Gövde: 1.5 ile 1.7. Alt yazılar: 1.4 ile 1.5. Büyük metin daha az, küçük metin daha çok satır aralığı ister. Uzun metin, arayüzden daha fazla gövde satır aralığı ister. 1.4'teki bir dashboard yoğun okunur, ki doğrusu da budur.

Harf aralığı ekran tipi içindir, gövde için değil

Kerning, logo ya da başlık ölçeğinde ayarlanan belirli harf çiftleri arasındaki boşluktur. Tracking ise bir satırdaki tüm harflerin arasındaki, tek tip ayarlanan boşluktur. Aynı kaldıraç değiller.

Tracking yalnızca uçlarda bir hiyerarşi aracıdır. Büyük başlıkta sıkı tracking (-0.02em ile -0.04em) onu oturmuş ve kararlı hissettirir. Küçük büyük harfli etiketlerde gevşek tracking (+0.05em ile +0.1em) etiketi bilinçli hissettirir. İkisi de tipin rolünü işaret eder.

Tehlikeli bölge gövdedir. Gövde metnine tracking uygulamak hiyerarşi kazancı sağlamadan okunabilirliğe zarar verir. Gövdeyi sıfırda bırak. Tracking'i anlamayan tasarımcının en hızlı ele verici işareti, "editoryal hissettirdiği" için +0.1em ayarlanmış bir hero başlığıdır. Hissettirmez. Süs gibi hissettirir.

Seviyeler arası boşluk hiyerarşinin parçasıdır

Her seviyenin etrafındaki dikey boşluk, boyut ve ağırlık kadar onu sıralar. Üstünde 80px, altında 24px olan bir H2 yeni bir bölümün başlangıcı gibi okunur. Üstünde ve altında 24px olan aynı H2 paragraf arası gibi okunur.

Kural: üstteki boşluk alttakinin kabaca iki katı olmalı. Öğe, altındaki içeriğe aittir. Başlangıç spesifikasyonu: H2 üstü 64 ile 96px, H2 altı 16 ile 24px. H3 üstü 32 ile 48px, H3 altı 8 ile 16px. Boşluk disiplini tipin kendisi kadar önemlidir. Özensiz boşluklu mükemmel bir ölçek düz okunur.

Sıfırdan hiyerarşi kurmak için karar sırası

Adım atlarsan hiyerarşi tek başına iyi görünür ama gerçek bir ürünün içinde dağılır.

1. Taban boyutu seç. Ekran için 16px. Editoryal ağırlıklı siteler için 18px. Gövde için asla 16px altı değil.
2. Ölçek oranını seç. Yoğun arayüz için büyük terz, genel kullanım için tam dörtlü, editoryal için altın oran.
3. Boyut tablosunu üret. Her seviyeyi orandan türet. Tam piksele yuvarla. Yaz.
4. Üç ağırlık seç. Normal, orta, kalın ya da yarı kalın. Fazlası yok.
5. Seviye başına satır aralığını belirle. Başlıklar için sıkı, gövde için gevşek.
6. Seviye başına boşluğu belirle. Her başlıkta üst-alt 2'ye 1 oranı.
7. Tracking'i yalnızca uçlar için ayarla. Ekran tipinde sıkı, küçük büyük harflerde gevşek. Gövdede sıfır.
8. Üç gerçek ekranda doğrula. Bir ana sayfa hero'su, uzun bir makale, yoğun bir arayüz paneli. Üçünde de dayanıyorsa sevk et.

Bozuk bir hiyerarşiyi sevk etmenin en hızlı yolu, boyutları oran yerine sezgiden türetip sonra satır aralığını ve boşluğu sayfa sayfa yamamaktır.

Çoğu hiyerarşi nerede çöker

Altı hata kalıbı, her şeyden fazla hiyerarşiyi öldürür.

Her şey kalın. Ağırlık kaldıraç olmaktan çıkar ve sayfa tek başına boyuta yaslanır. H3'ü ve diğer üçüncül başlıkları orta ya da yarı kalına indir.

Yalnızca iki seviye var. Arada hiçbir şey olmayan H1 ve gövde, üstünde başlık olan düz bir doküman gibi okunur. Her 150 ile 300 kelimede bir H2 ekle.

Yüzen alt başlık. Üstte ve altta eşit boşluk, alt başlığı hiçbir bölüme ait bırakmaz. Alttaki boşluğu daralt ki arkasından gelen gövdeye bağlansın.

Başıboş H1. Masaüstü hero H1'inin her içerik sayfasında satır içi kullanılması ritmi bozar. Bir masaüstü H1 token'ı ve bir içerik sayfası H1 token'ı belirle. Aynı ad, iki değer.

14px gövde metni. 16px altı okunabilirliği bozar ve küçük seviyeleri 2px'lik bir aralığa sıkıştırır. En az 16px. 13 ile 14px'i yalnızca alt yazılar ve etiketler için kullan.

Yalnızca masaüstünde tasarlanmış hiyerarşi. Mobil her seviyeyi sıkıştırır ve hiyerarşiyi bir lekeye çevirir. Önce mobili tasarla, sonra büyüt.

2026 koşullarında hiyerarşi

Değişken fontlar artık doğru varsayılan. Tek bir 80KB dosya, tek eksenden normal, orta, yarı kalın ve kalın ağırlıkları sunar. İki değişken font tüm sistemi kapsar. Font eşleştirme rehberi bunları nasıl seçeceğini anlatır.

Yapay zeka özetleri görsel işaretlemeyi değil, semantik işaretlemeyi okur. Bir H1, ardından H2 gibi görünecek şekilde stillenmiş bir div, ardından bir H3 içeren sayfa yanlış ayrıştırılır. Görsel hiyerarşi ve semantik HTML eşleşmek zorunda. Sayfa başına bir H1, atlanmış seviye yok. Web tasarım ilkeleri yazısı semantik tarafı kapsar.

Hiyerarşi denetim kontrol listesi

Bunu kaydet. Lansmandan önce çalıştır. Her hayır, sevkten önce düzeltilir.

Onda on, her cihazda kendini okutur. Onda yedi, tasarlanmış gibi okunur. Yedinin altı, yazı tipi ne olursa olsun düz okunur.

SSS

Görsel hiyerarşi ile tipografik hiyerarşi arasındaki fark nedir?

Görsel hiyerarşi, her öğeyi boyut, ağırlık, renk, konum, boşluk, hizalama ve görsellerle sıralayan daha geniş sistemdir. Tipografik hiyerarşi ise metni sıralamak için boyut, ağırlık, satır aralığı, harf aralığı ve boşluk kullanan tipe özgü katmandır. Tipografik hiyerarşi, görsel hiyerarşinin girdilerinden biridir.

Bir tip ölçeği için en iyi oran nedir?

Tam dörtlü (1.333) en güvenli varsayılandır. Teatral olmadan net kontrast üretir. Yoğun arayüzler ve yönetim araçları için büyük terzi (1.25) kullan. Hero'nun baskın olması gereken editoryal ve açılış sayfaları için altın oranı (1.618) kullan.

Düz görünen bir hiyerarşiyi nasıl düzeltirim?

Sırayla üç hamle. Önce boyut kontrastını artır. H1 en az H2'nin 2 katı, H2 en az gövdenin 1.5 katı. İkinci olarak ağırlık kontrastı ekle. Hiçbir iki bitişik seviye aynı ağırlığı paylaşmasın. Üçüncü olarak her başlıkta 2'ye 1 üst-alt oranıyla boşluk ritmini sıkılaştır. Sayfa hâlâ düz okunuyorsa düzen fazla iş yapıyordur ve daha fazla tipografi işinden önce kapsam kesintisi gerekir.

Hiyerarşiyi kur, sonra ona güven

Çalışan bir hiyerarşi, kendini okutan bir sayfaya giden en ucuz yoldur. Okur seviyeleri, oranları ya da satır aralığı değerlerini görmez. Anlam taşıyan bir sayfa görür. Matematik berraklığın içinde kaybolur.

Tuzak, hiyerarşiyi son metrede yapılan bir cilalama adımı saymaktır. O omurgadır. Önce onu kur, gerçek ekranlarda doğrula, token olarak belgele ve diğer her kararın ona göre şekillenmesine izin ver. Tip sistemini, hiyerarşiyi ve ürün arayüzünü üç ayrı proje yerine tek proje olarak kuran bir ekip istiyorsan, Brainy'yi tut. Oranı biz seçeriz, token'ları biz yazarız ve sistemi gerçek bir üründe sevk ederiz.