Tasarım dosyasında dengeli görünen bir sayfa, yayına çıktığında okunması zor bir metne dönüşebilir. Ara başlık gövde metninden ayrışmaz, ana başlık telefonda üç satıra taşar, not metni neredeyse görünmez olur. Çoğu zaman sorun yazı karakterinde değil, boyutların birbirinden bağımsız seçilmesindedir: 38 piksel burada iyi durmuştur, 22 piksel orada.
Tipografik hiyerarşi tek tek boyutlardan değil, boyutlar arasındaki ilişkiden doğar. Bu ilişkiyi tek bir oranla kurduğunuzda sayfa kendi içinde tutarlı bir ritim kazanır; yeni bir sayfa tipi eklendiğinde de hangi boyutun kullanılacağını yeniden tartışmak gerekmez.
Boyutlar bir oranla seçilir
Tip ölçeği, gövde metninin boyutunu bir oranla çarparak yukarıya, bölerek aşağıya doğru basamaklar üretir. 16 piksellik bir gövde ve 1,25 oranı şu ölçeği verir: not metni 12,8, gövde 16, üçüncü düzey başlık 25, ikinci düzey 31,3, ana başlık 39,1 piksel. Oranların müzikteki aralıklardan gelen adları vardır: 1,2 küçük üçlü, 1,25 büyük üçlü, 1,333 tam dörtlü, 1,5 tam beşli.
Başlangıç noktası çoğu zaman gövde metnidir; tarayıcıların varsayılan gövde boyutu 16 pikseldir. Gövde doğru kurulmadan üstüne kurulan her basamak aynı hatayı büyüterek taşır.
Veri
Oran büyüdükçe başlık hızla büyür
16 piksellik gövdeyle, dördüncü ve ikinci basamaktaki başlık boyutları.
- Ana başlık (4. basamak)
- Üçüncü düzey başlık (2. basamak)
| Kategori | Ana başlık (4. basamak) | Üçüncü düzey başlık (2. basamak) |
|---|---|---|
| 1,125 | 25,6 px | 20,3 px |
| 1,2 | 33,2 px | 23,0 px |
| 1,25 | 39,1 px | 25,0 px |
| 1,333 | 50,5 px | 28,4 px |
| 1,5 | 81,0 px | 36,0 px |
Grafik oran seçiminin neden bir tasarım kararı olduğunu gösteriyor. 1,125 oranında ana başlık gövdenin ancak 1,6 katıdır; tablolarla, ürün listeleriyle ve form alanlarıyla dolu yoğun arayüzlerde bu sakinlik işe yarar. 1,5 oranında ise başlık gövdenin beş katına çıkar; tek bir fikri büyük söylemek isteyen bir açılış sayfasında etkili, uzun bir makalede ise yorucudur.
Ekran küçüldükçe aynı oran fazla gelir. Masaüstünde dengeli duran 50 piksellik bir başlık, 360 piksel genişliğindeki bir telefonda satır başına iki kelimeye sıkışır. Grafikteki 40 piksel çizgisi, mobilde kendimize koyduğumuz pratik bir sınır: bunun üzerindeki başlıklar çoğu zaman üç satıra taşar. Bu yüzden mobilde ya oranı bir kademe küçültür ya da ana başlığı bir basamak aşağıdan başlatırız.
Aşağıdaki oyun alanında oranı, gövde boyutunu ve satır uzunluğunu değiştirin; aynı metnin hiyerarşisinin nasıl değiştiğine bakın.
İnteraktif
Tip ölçeği oyun alanı
Oranı değiştirdiğinizde bütün basamaklar birlikte değişir. Satır uzunluğunu 75 karakterin üzerine çıkarın ya da 1,125 oranında ara başlığın gövdeden nasıl zor ayrıştığına bakın; altta her basamağın piksel değeri ve kısa bir değerlendirme yer alıyor.
Mobilde Başlık 1 bir basamak, Başlık 2 yarım basamak küçülür; gövde metni 16 px'in altına düşmez.
Tasarım · 6 dk okuma
Sayfayı okunur kılan ölçek
Bir sayfadaki her boyut tek tek seçildiğinde başlıklar birbirine yaklaşır, ara başlıklar gövdeye karışır. Tip ölçeğinde ise bütün boyutlar tek bir temel boyuttan ve bir orandan türer. Temel boyutu gövde metni belirler, oran da basamaklar arasındaki farkı. Okuyucu metnin neresinde olduğunu boyuta bakarak anlar ve sayfada yolunu kaybetmez.
Oran, basamaklar arasındaki mesafedir
Küçük oran, sakin sayfa
Uzun okumalarda 1,2 ya da 1,25 gibi küçük oranlar metni bir arada tutar. Büyük oranlar az metinli, vurgulu sayfalarda işe yarar.
Önizlemedeki boyutlar gerçek piksel değerleriyle dizildi.
| Adım | Hesap | Boyut | Aralık |
|---|---|---|---|
| Başlık 1 | 16 × 1,254 | 39,1 px | 1,12 |
| Başlık 2 | 16 × 1,253 | 31,3 px | 1,26 |
| Başlık 3 | 16 × 1,252 | 25,0 px | 1,37 |
| Gövde | 16 | 16,0 px | 1,50 |
| Not | 16 × 1,25−1 | 12,8 px | 1,50 |
- Satır uzunluğuRahat okunur satır66 karakter · ideal 45–75
- Ara başlıkGövdeden net ayrışıyorBaşlık 3 / gövde 1,56 · alt sınır 1,3
- Ana başlıkEkrana rahat sığarBaşlık 1 39,1 px · üst sınır 72 px
Satır uzunluğu ölçeğin sessiz ortağıdır
Doğru boyutlar yanlış bir sütun genişliğinde de okunmaz. Satır çok uzadığında göz bir sonraki satırın başını bulmakta zorlanır; çok kısaldığında okuma sık sık kesilir. Robert Bringhurst’ün önerdiği aralık bugün de iyi bir başlangıç noktası:
Rahat okunan bir satır
- Alt sınır
- 45 karakter
- Daha kısa satırlarda göz sık sık satır değiştirir, okuma kesilir.
- İdeal
- 66 karakter
- Tek sütunlu gövde metni için önerilen uzunluk; boşluklar dahil.
- Üst sınır
- 75 karakter
- Bunun üzerinde bir sonraki satırın başını bulmak zorlaşır.
Kaynak: Robert Bringhurst, The Elements of Typographic Style
Satır yüksekliği de boyutla ters yönde çalışır. Gövde metni 1,5 civarı bir satır aralığıyla rahat okunur; aynı oran 40 piksellik bir başlıkta satırları birbirinden koparır. Büyük başlıklarda satır aralığını 1,1–1,2’ye, ara başlıklarda 1,25–1,3’e indirmek, başlığı tek bir parça gibi okutur.
Oranı ölçeğe dönüştürmek
Bir oran seçmek yetmez; ölçeğin nerede kullanılacağı da yazılı olmalıdır. Hangi basamak hangi başlığa karşılık geliyor, not metni hangi basamakta duruyor, mobilde hangi basamaklar düşüyor? Bu kararlar tasarım dosyasında ve kodda aynı adlarla tutulduğunda yeni bir sayfa tipi tartışmasız eklenir.
Kısa kontrol listesi
- Gövde boyutu ve oran yazılı mı, bütün başlıklar bu ikisinden mi türüyor?
- Ara başlık gövdeden yalnızca kalınlıkla değil, boyutla da ayrışıyor mu?
- Gövde metninin satır uzunluğu 45–75 karakter arasında mı?
- Büyük başlıklarda satır aralığı gövdeden daha sıkı mı?
- Mobilde ana başlık üç satıra taşmadan sığıyor mu?
- Basamaklar tasarım dosyasında ve kodda aynı adlarla mı tutuluyor?
Bu yazı nasıldı?