Okunabilir bir sayfa, yazı tipini beğenmekle kurulmaz. Satır uzunluğu, satır aralığı ve tip ölçeğini birlikte kararlaştırdığınızda web tipografi tutarlı bir okuma düzenine dönüşür. Bu rehber, zevki bir kenara bırakıp ölçülebilir bir sistem kurmanız için adımları netleştirir.
İyi bir yazı tipi seçmek, okunabilir bir sayfa üretmez. Asıl mesele satırın ne kadar uzadığı, satırların birbirine ne kadar yaklaştığı ve başlıkların gövde metniyle nasıl bir ritim kurduğudur. Web tipografi, zevke bırakılan bir süs katmanı değil; okuyucunun metni yorulmadan izlemesini sağlayan bir sistemdir. Bu rehberde yazı ailesini tartışmak yerine satır uzunluğu, satır aralığı ve tip ölçeğiyle tutarlı bir okuma düzeni kurmayı adım adım ele alıyoruz.
Web tipografi neden bir sistem ister
Bir sayfada her başlık “biraz büyük”, her açıklama “biraz küçük” seçildiğinde ritim bozulur. Göz, aynı hiyerarşiyi her blokta yeniden öğrenmek zorunda kalır. Sistem ise tek bir taban ölçüden türer: gövde boyutu bellidir, diğer boyutlar ona oranla çıkar, satır genişliği ve satır aralığı bu tabana bağlanır.
Sistemin yokluğu çoğu sitede aynı belirtilerle görünür. Ana başlık ile ikinci seviye başlık neredeyse aynıdır. Mobilde gövde metni sıkışır. Kart başlığı ile form etiketi aynı puntoyu paylaşır. Uzun bir blog satırı ekranın bir kenarından diğerine uzar. Bunlar yazı tipi seçiminden değil, ölçü kararlarının dağınık olmasından çıkar.
Okunabilir bir düzen üç kararla ayakta durur: satır ne kadar uzun olacak, satırlar arasında ne kadar hava kalacak, boyutlar hangi merdivenden tırmanacak. Bu üçü kilitlenince yazı ailesini değiştirmek bile sistemi bozmaz; yalnızca karakterin rengi değişir.
Önce satırın boyunu, satırların havasını ve boyut merdivenini kilitleyin. Yazı ailesi bu iskeletin üzerine gelir.
Satır uzunluğu: gözün satırı kaçırmaması
Satır uzunluğu, bir satırda gözün rahatça izleyebileceği karakter miktarıdır. Satır aşırı uzarsa göz bir sonraki satırın başına dönerken kayar. Satır aşırı kısalırsa göz sürekli satır başı arar; ritim parçalanır. Türkçe’de bitişik ekler ve uzun sözcükler bu kırılganlığı artırır; dar bir sütunda sözcükler sık sık alt satıra düşer.
Tarayıcıda pratik bir başlangıç, gövde metnini ch birimiyle sınırlamaktır. ch, seçili yazı tipindeki “0” karakterinin genişliğine yaklaşır. Gövde bloğunda max-width: 65ch sık kullanılan bir çıkış noktasıdır. Bunu evrensel bir yasa gibi değil, ilk deneme değeri gibi kullanın. Dar bir kenar çubuğu, çok sütunlu bir kart ızgarası veya geniş bir kahraman alanı aynı sayıyı taşımaz.
Başlıklarda satırı daha kısa tutmak genellikle daha iyidir. Uzun bir H1, tek satıra sığmak için zorlanınca ya kırılır ya da ağırlaşır. Alt başlık ve giriş paragrafı aynı ölçü kutusunu paylaşmak zorunda değildir: başlık içeriğin vaadini taşır, gövde okuma işini yapar.
- Ana okuma sütununu 65ch civarında deneyin, sonra gerçek metinle bakın.
- Kart, etiket ve düğme metninde daha dar ölçü kabul edin.
- Tam genişlik kahraman alanında bile gövde paragrafını sınırsız bırakmayın.
- Satır uzunluğunu ekran genişliğine değil, metin bloğunun görevine göre seçin.
Satır aralığı ve paragraf ritmi
Satır aralığı süs boşluğu değildir. Satır uzadıkça gözün bir alt satırı kaçırmaması için daha fazla dikey hava gerekir. Satır kısaldıkça aralık biraz sıkılaşabilir. Bu yüzden tek bir sihirli sayı yoktur; değer, punto ve ölçüyle birlikte yaşar.
Gövde metninde 1.5 civarı bir çarpan çoğu arayüzde güvenli bir başlangıçtır. Uzun makale sütununda 1.55–1.65 daha ferah durabilir. Başlıklarda ise 1.15–1.3 aralığı, çok satırlı bir başlığın dağılmasını önler. Küçük punto (etiket, yasal metin, yardımcı satır) 1.4 altına inmediğinizde harfler birbirine yapışmaz.
Paragraf boşluğunu satır aralığından ayırın. Satır aralığı satırların iç ritmidir; paragraf boşluğu ise düşünce bloklarını ayırır. İkisini birden şişirirseniz metin delik delik görünür. İkisini de kısarsanız duvar gibi durur. Pratik bir yol, paragraflar arasında gövde puntounun yaklaşık bir katı kadar boşluk bırakmak ve listelerde aynı ritmi korumaktır.
Listeler, alıntılar ve form yardım metinleri de aynı aileden gelmelidir. Madde işaretli bir listenin satır aralığı gövdeden kopuksa, okuyucu “burası başka bir belge” hisseder. Alıntı bloğu girintisi ve hafif punto farkıyla ayrılabilir; satır aralığını tamamen başka bir evrene taşımak gerekmez.
Tip ölçeği nasıl kurulur
Tip ölçeği, rastgele punto listesi değil; taban ölçü ile sabit bir oranın ürettiği merdivendir. Önce gövdeyi sabitleyin. Birçok sitede taban 1rem’dir; tarayıcı varsayılanı genelde 16 piksele karşılık gelir. Marka sesi daha sakin bir kurumsal metinse tabanı 1.0625rem veya 1.125rem yapmak da bir karardır. Önemli olan, her bileşenin bu tabandan türemesidir.
Ardından oranı seçin. Küçük oranlar (1.2, 1.25) arayüz ağırlıklı sayfalarda başlıkları azar azar büyütür; kontrol sizde kalır. Büyük oranlar (1.333, 1.5) editoryal sayfalarda başlığı daha belirgin ayırır ama küçük ekranda taşma riskini artırır. Oranı “daha modern dursun” diye değil, başlık ile gövde arasındaki gerçek mesafeye göre seçin.
Ölçeği ürettikten sonra her basamağa bir rol verin. Rolü olmayan basamak, birkaç sprint sonra “biraz daha büyük” isteğiyle sistemi deler. Aşağıdaki tablo, 1rem taban ve 1.25 oranıyla sık kullanılan bir başlangıç merdivenidir. Değerler yuvarlanmış örneklerdir; birebir kopyalamak zorunda değilsiniz.
| Rol | Basamak | Örnek ölçü | Satır aralığı başlangıcı |
|---|---|---|---|
| Küçük / etiket | sm | 0.8rem | 1.4 |
| Gövde | md | 1rem | 1.5 |
| Lead / giriş | lg | 1.25rem | 1.45 |
| Başlık 3 | xl | 1.563rem | 1.3 |
| Başlık 2 | 2xl | 1.953rem | 1.25 |
| Başlık 1 | 3xl | 2.441rem | 1.2 |
Bu merdiven, görsel hiyerarşiyi önce puntoya indirger. Renk ve ağırlık ikinci katmandır: bir başlığı hem iki basamak büyütüp hem de ekstra kalın ve canlı renk yapmak, ölçeği bağırarak bozar. Önce boyut, sonra ağırlık, en son renk.
Metin rollerini ölçeğe bağlamak
HTML başlık seviyesi ile görsel punto aynı şey değildir. Bir ürün sayfasında tek bir H1 yeter; H2 bölümleri, H3 alt başlıkları taşır. Görsel olarak altı farklı punto kullanmak zorunda değilsiniz. Dört net rol çoğu kurumsal ve içerik sitesinde işi görür: vurgu başlığı, bölüm başlığı, gövde, yardımcı metin.
Düğme, menü ve form etiketi gövdeyle yarışmamalıdır. Düğme metni çoğu zaman gövdeyle aynı basamakta, biraz daha ağır (medium veya semibold) durur. Navigasyon, gövdeden küçük olmak zorunda değildir; okunabilirlik menüde de geçerlidir. Küçük puntoyu “daha şık dursun” diye 0.7rem’e indirmek, özellikle dokunmatik hedeflerde hem okumayı hem tıklamayı zorlaştırır.
KepezWeb olarak web tasarım işlerinde tipografi kararını bileşen kütüphanesinin başına koyarız. Kart başlığı, form hatası, fiyat satırı ve yasal dipnot aynı merdivenden gelmezse sayfa her blokta başka bir belge gibi durur. Ölçek bir kez yazıldığında yeni bir bölüm eklemek, “bu başlık kaç piksel olsun” tartışmasına dönmez.
Ekran genişliğine göre ölçeği bozmamak
Mobilde ilk refleks gövdeyi küçültmek olur. Bu genellikle yanlıştır. Küçük ekranda asıl sorun punto değil, satırın kenar boşluklarıyla sıkışması ve başlıkların birkaç satıra kırılmasıdır. Gövdeyi 0.875rem’in altına çekmek yerine yatay boşluğu ve başlık basamağını gözden geçirin.
Başlıklarda akışkan ölçü işe yarar. CSS clamp() ile bir minimum, bir tercih edilen ve bir maksimum tanımlayabilirsiniz. Böylece H1 masaüstünde abartılı büyümez, telefonda da iki sözcükte üç satıra düşmez. Gövdeyi akışkan yapmak zorunda değilsiniz; sabit, okunabilir bir gövde çoğu sitede daha sakin durur.
Yazı dosyasının geç yüklenmesi de okumayı bozar. Metin önce sistem yazısıyla belirip sonra zıplarsa düzen kayar. Bu kayma hem okuma ritmini hem de yerleşim kararlılığını etkiler. Font yükleme stratejisini hız işinin parçası olarak ele almak için Core Web Vitals metriklerine bakmak gerekir; LCP ve yerleşim kayması, tipografi dosyasından bağımsız değildir.
Koyu arka planda aynı ölçek yetmez. İnce yazı, düşük kontrastlı gri ve sıkı satır aralığı karanlık yüzeyde daha çabuk yorar. Kontrastı ve ağırlığı ayrı planlamak için dark mode renk ve kontrast kararlarını tip ölçeğiyle birlikte okuyun. Ölçek puntoyu, kontrast ise harfin zeminden ayrılmasını yönetir.
Tasarım dosyası ile kodu aynı sözlükte tutmak
Ölçek yalnızca tasarım çerçevesinde kalırsa canlı sitede yeniden icat edilir. İsimleri paylaşın: text-body, text-h2, text-caption. Piksel değeri tartışması yerine rol tartışın. Geliştirici CSS değişkenlerini aynı adlarla tuttuğunda “bu kartta 19px vardı” cümlesi ortadan kalkar. KepezWeb tarafında bu sözlük, tasarım teslimiyle ön yüz kodunda aynı isimlerle yürür.
Değişken seti sade tutulmalıdır:
- --font-size-* için sınırlı basamaklar
- --line-height-tight, --line-height-body, --line-height-loose
- --measure veya --max-width-prose
- Başlık ve gövde için ayrı font-weight token’ları
Yeni bir bileşen geldiğinde önce merdivene uyup uymadığına bakın. Uymuyorsa ya rol yanlıştır ya da ölçek eksiktir. Ölçeğe özel istisna eklemek, üç ay sonra istisnaların asıl sistem olması demektir. Aşağıdaki kontroller, web tipografi sisteminin yayına hazır olup olmadığını hızlıca gösterir:
- Ana okuma sütunu gerçek içerikle 65ch civarında duruyor mu?
- Gövde satır aralığı uzun paragraflarda nefes alıyor mu?
- H1, H2, H3 ve gövde aynı orandan mı geliyor?
- Mobilde gövde küçültülmeden kenar boşluğu çözülmüş mü?
- Küçük metin hâlâ okunuyor, düğme metni gövdeyle yarışmıyor mu?
- Koyu ve açık zeminde ağırlık ve kontrast ayrı kontrol edildi mi?
Sık görülen sapmalar da aynı listeden okunur:
- Gövdeyi küçültüp başlığı abartmak
- Her bileşene özel punto açmak
- Satır aralığı ile paragraf boşluğunu aynı anda şişirmek
- Ölçüyü viewport genişliğine eşitlemek
- Küçük metinde hem puntoyu hem kontrastı düşürmek
Sıkça Sorulan Sorular
Web tipografi sistemine hangi yazı tipiyle başlamalıyım?
Önce sistemi, sonra karakteri kilitleyin. Metrikleri oturmamış bir ailede ölçek kurmak zordur. Gövde için x-yüksekliği dengeli, harf içi boşluğu boğmayan bir sans veya serif seçin; başlık aynı aileden veya kontrollü bir eşleşmeden gelsin. Aile değişse bile satır uzunluğu ve ölçek yerinde kalmalıdır.
Mobilde gövde metnini küçültmek gerekir mi?
Çoğu zaman hayır. Küçük ekranda okumayı zorlaştıran şey çoğu kez punto değil, daralan satır ve şişen başlıktır. Gövdeyi sabit tutup yatay boşluğu ve başlık basamağını ayarlamak daha temiz sonuç verir.
Tip ölçeğinde kaç basamak olmalı?
Dört ila altı rol çoğu site için yeterlidir. Her HTML başlık seviyesi için ayrı punto açmak zorunda değilsiniz. Kullanılmayan basamak, ileride rastgele karar üretir.
Satır aralığını piksel olarak sabitlemek doğru mu?
Gövde ve başlıkta birimsiz çarpan (1.5 gibi) punto değişince aralığın da orantılı kalmasını sağlar. Piksel sabitlemek, kullanıcı yazı boyutunu büyüttüğünde satırların birbirine girmesine yol açabilir.
Başlıklarda da 65ch kullanmalı mıyım?
Gerekmez. 65ch gövde okuması için bir başlangıçtır. Başlık daha kısa bir ölçüde durduğunda hem hiyerarşi netleşir hem de çok satırlı kırılma kontrol altında kalır.
Tip ölçeğini, boşluk sistemini ve sayfa iskeletini birlikte oturtmak istiyorsanız KepezWeb ile ihtiyacınızı konuşabilirsiniz. İçerik türünüze uygun bir okuma düzeni için teklif alın; taslak ve bileşen kararlarını aynı masada netleştirelim.
