Kurumsal sitelerde tipografi ölçeği nasıl kurulur?
Dokuz kademeli ölçekle tutarlı ve okunabilir sayfalar.
Dokuz kademe
Kurumsal sitede rastgele text-xl yığını, markayı değil karmaşayı büyütür. Dokuz kademeli ölçek: görsel hero, sayfa H1, bölüm H2, kart H3, gövde, küçük gövde, etiket, kırıntı, mikro. Her kademenin punto, satır yüksekliği, ağırlık ve harf aralığı sabittir. Kampanya sayfası da aynı merdiveni kullanır.
Space Grotesk başlık, Inter gövde, JetBrains Mono etiket. Üç aile yeter; dördüncüsü “özel slider” bahanesiyle girer ve ölçeği deler. Başlıkta negatif letter-spacing, gövdede nötr. Mobilde H1 küçülür ama kademe atlamaz: clamp ile aynı basamak, dar ekranda daha kısa adım.
Ritim
Satır uzunluğu 60–70 karakteri aşmasın. Kurumsal lead cümleleri 54–62 ch kutularına sığar; tam genişlik gövde okunmaz. Liste ve form etiketleri gövdeden bir kademe küçük, kontrast AA. “Küçük ama gri” tuzak: text2 rengi, puntoyu düşürmeden de hiyerarşi kurar.
- H1 tek, sayfa başına.
- H2 bölüm, H3 kart veya alt başlık.
- Mono: tarih, fiyat, kırıntı, kod.
- Buton metni Grotesk 600, gövde değil.
Türkçe
ş, ğ, ı glifleri Inter’de sorunsuz; başlıkta aşırı sıkı tracking, ı ve j’yi yer. Dummy İngilizce ile onaylanmış ölçek, Türkçe başlıkta taşar. Kit sayfasında gerçek cümlelerle bakın: “Çerez politikası” bir satır mı, iki mi? İkiyse kademe veya max-width yanlış demektir.
Sayılar ve para birimi mono’ya aittir. ₺12.500,00 Inter’de hizalanmaz, tabloda titrer. Tarih 12 Ağustos 2026 gövdede Inter, kart meta’sında mono kısa biçim. Bu ayrım okuyucuya “bu bir veri” sinyali verir.
Karanlık temada kontrastı puntoyla değil renk çiftiyle çözün. Gövdeyi 18px yapıp gri bırakmak okumayı büyütmez, yorar. Turuncu vurgu metin rengi olarak uzun cümlede kullanılmaz; bağlantı ve buton içindir. Alıntı Grotesk 500, gövde Inter 400 — hiyerarşi ağırlıkla da kurulur, her şeyi bold yapmayın.
Form etiketleri 13px medium, hata metni 12.5px; ikisi de text2’ye yakın ama hata semantik kırmızıdadır. Placeholder’ı etiket yerine kullanmayın: odaklanınca kaybolan talimat, erişilebilir değildir. Yardımcı metin, alanın altında, bir kademe küçük. Bu sıkıcıdır; bu yüzden çalışır.
Ölçeği token isimleriyle konuşun: --h1, --lead, --caption. Toplantıda “biraz daha büyük” yerine “bir kademe yukarı” deyin. Punto pazarlığı biter, ritim kalır. Yeni kademe ancak üç yerde ihtiyaç varsa açılır; tek kart için merdiven uzatılmaz.
Sonuç
Tipografi ölçeği tasarım sisteminin omurgasıdır. Dokuz kademe, üç aile, tek H1. Bunu bozan her “bir kerelik 22px” ileride bir sapma turu demektir. Ölçeği token’a yazın, istisnayı changelog’a.
Yayın öncesi kontrol
Kit sayfasında gerçek Türkçe cümlelerle H1, lead ve kart başlığını yan yana görün. Clamp, dar ekranda kademe atlıyor mu? Atlıyorsa token yanlıştır, sayfa değil. Para ve tarih satırlarını tabloda mono ile kontrol edin; Inter’de titreyen rakam, güveni düşürür.
Yeni kademe talebini üç yer kuralına bağlayın. Tek kart için merdiven uzatılmaz. “Biraz daha büyük” yerine “bir kademe yukarı” deyince toplantı kısalır, ritim kalır. Bu dil oturunca ölçek yaşar.
Satır uzunluğunu 62–75 karakter aralığında tutun. Kurumsal sayfada 110 karakterlik satır, “ciddi” değil yorucudur. Lead’i 54 karakter civarına çekmek, H1’i bağırmadan büyütür. Bağırmak, ölçeği bozar.
Koyu temada aynı kademeyi parlaklıkla şişirmeyin. Kontrast oranı token’da durur, sayfada pazarlık edilmez. Turuncu vurgu metin rengi değildir; bağlantı ve rozet rengidir. Bu kural kırılırsa marka “her yerde turuncu” olur, hiçbir yerde okunmaz.
- Dar ekranda kademe atlayan başlık var mı?
- Rakamlar tabloda mono mu?
- Yeni kademe üç yer kuralını geçti mi?
- Koyu temada kontrast token’da mı, sayfada mı?
Sahada tekrar edenler
Ölçeği “marka kitabı sayfa 12” diye dondurmayın. Web, basılı afiş değildir. Kitaptaki 48 punto, ekranda bağırır. Ekran kademesini kitaptan türetin, kopyalamayın. Türetme notu token yorumunda dursun; yoksa altı ay sonra kimse neden 40 değil 42 olduğunu bilmez.
Türkçe karakterlerde Inter’in şapka ve çengel boşluğu, başlıkta sıkışır. H1’i gerçek cümleyle, “İşletmeler İçin Çözümler” gibi, kitte kontrol edin. Lorem, bu hatayı gizler. Gizlenen hata, canlıda müdür yorumu olur.
Satır aralığını kademeyle birlikte kilitleyin. H1’e 1.06, gövdeye 1.7 vermek rastgele değil; ritimdir. “Biraz aç” yorumu ritim bozar. Ritim bozulunca her sayfa ayrı bir dergiye benzer, marka dağılır.
Tasarım sistemleri ve kurumsal tipografi ölçekleri üzerine uzman. Bileşen kütüphanesini ürün ekiplerinin günlük işine bağlayan süreçleri kuruyor.