Kısaca: Tipografik ölçek, yazı boyutlarını tek bir orana bağlamaktır: Gövde metni boyutunu seçer, her başlık seviyesini bir öncekinin belirli bir katı yaparsınız (örneğin 1,25 ya da 1,333). Renk paleti de benzer şekilde kurulur: Marka renginden açık ve koyu tonlar üretip her tonun bir görevi olur. İki sistemin ortak amacı, her kararda yeni bir değer uydurmak yerine sınırlı ve tutarlı bir listeden seçim yapmaktır.
Kısa cevap
Önceki yazılarda boşlukları bir diziden seçmeyi ve font seçimini anlattım. Bu yazı, aynı mantığı yazı boyutlarına ve renklere uyguluyor. Sonunda elinizde iki küçük liste olacak: kullanabileceğiniz yazı boyutları ve kullanabileceğiniz renk tonları. Font seçiminin temellerini web tasarımında font nasıl seçilir yazısında, kontrastı renk kontrastı yazısında bulabilirsiniz.
Tipografik ölçek nedir?
Tipografik ölçek, sayfadaki bütün yazı boyutlarının tek bir taban değerden ve tek bir orandan türetilmesidir. Taban genellikle gövde metnidir (16 piksel). Oran, müzikteki aralıklardan adını alır: 1,2 (minor third), 1,25 (major third), 1,333 (perfect fourth), 1,5 (perfect fifth) ve 1,618 (altın oran).
Hangi oranı seçmeli?
| Oran | Karakter | Nerede uygun? |
|---|---|---|
| 1,2–1,25 | Yumuşak, sakin | Çok başlık seviyesi olan bloglar, belgeler, uygulama arayüzleri |
| 1,333 | Dengeli | Kurumsal siteler, genel amaçlı web siteleri |
| 1,5–1,618 | Güçlü, dramatik | Tanıtım ve kampanya sayfaları, az metinli tasarımlar |
Altın oranı bir tipografik ölçek olarak kullanmayı altın oran yazısında ayrıntılı anlattım. Oran büyüdükçe en büyük başlık mobilde sığmayacak kadar büyür; bu yüzden büyük oranlar genellikle sadece masaüstünde kullanılır.
Pratikte: yuvarlayın ve sınırlayın
- Hesaplanan değerleri yuvarlayın: 16 × 1,25 = 20; 20 × 1,25 = 25; 25 × 1,25 = 31,25 → 31 ya da 32.
- Kullanacağınız boyutları sınırlayın: Çoğu site için 5–6 boyut yeterlidir (küçük metin, gövde, H4, H3, H2, H1).
- Satır yüksekliğini boyuta göre ayarlayın: Gövde metninde 1,5 civarı, büyük başlıklarda 1,1–1,2.
Akışkan tipografi: CSS clamp()
Masaüstünde 1,333, mobilde 1,2 oranını kullanmak istiyorsanız, her ekran için ayrı boyut tanımlamak yerine CSS’in clamp() fonksiyonunu kullanabilirsiniz. Örneğin font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); başlığın ekran genişliğine göre 32 ile 56 piksel arasında akışkan olarak büyümesini sağlar (MDN). Utopia gibi ücretsiz araçlar, iki ekran boyutu ve iki oran girerek bütün ölçeği clamp() değerleriyle üretir (Utopia).
Renk paleti nasıl oluşturulur?
Yeni başlayanlar genellikle marka renginin yanına birkaç “uyumlu” renk ekler ve paleti tamamlanmış sayar. Ama bir arayüzde renkler görev yapar: zemin, metin, kenarlık, vurgu, uyarı. Tek bir marka rengi bu görevlerin hepsini karşılayamaz; çoğu zaman metin için fazla açık, zemin için fazla koyudur. Çözüm, her ana renkten bir ton dizisi üretmektir.
Adım adım
- Ana renkleri seçin: Bir marka rengi, bir nötr (gri) ve gerekirse bir ikincil renk. Bunlara durum renkleri eklenir: başarı (yeşil), uyarı (sarı), hata (kırmızı).
- Her renkten tonlar üretin: Ana rengi orta ton (500) kabul edin; beyazla karıştırarak açık (50–400), siyahla karıştırarak koyu (600–900) tonlar elde edin.
- Tonlara görev verin: 50–100 zemin ve vurgulu alanlar, 200–300 kenarlıklar, 500–600 butonlar, 700–900 metin.
- Kontrastı ölçün: Beyaz zeminde metin olarak kullanacağınız tonun en az 4,5:1 kontrastı olmalı. Görseldeki sayılar bu kararı kolaylaştırır.
- Gri tonları ihmal etmeyin: Arayüzün büyük kısmı nötr renklerdir. Saf gri yerine marka renginden çok az ton almış griler daha uyumlu durur.
Renklerin sayfadaki oranı için 60-30-10 kuralını renk kontrastı yazısında anlattım.
Karanlık mod için palet
Karanlık mod, açık paletin tersine çevrilmesi değildir. Saf siyah (#000000) zemin üzerinde saf beyaz metin göz yorabilir ve doygun renkler koyu zeminde titreşir. Google’ın Material Design rehberi karanlık temada zemin olarak koyu gri (#121212) kullanmayı ve renklerin daha açık, daha az doygun tonlarını seçmeyi önerir (Material Design). Paletinizin açık tonları (200–300) karanlık modda vurgu rengi olarak işe yarar.
Ölçeği ve paleti kodda tutmak
Bu kararların değeri, kodda da korunduğunda ortaya çıkar. CSS değişkenleriyle tanımlamak en basit yoldur:
--fs-body: 1rem; --fs-h3: 1.333rem; --fs-h2: 1.777rem; --color-primary-500: #213D7C; --color-primary-50: #EEF1F7;
WordPress blok temalarında aynı değerler theme.json dosyasına yazılır ve düzenleyicide seçilebilir hâle gelir. Bu listelerin bir ekip tarafından paylaşılan hâli, tasarım sisteminin temelidir. Figma’da aynı değerleri değişken (variable) olarak tanımlamayı Figma rehberinde anlattım.
Sık sorulan sorular
Gövde metni için kaç piksel seçmeliyim?
Web için 16 piksel güvenli bir alt sınırdır; okuma ağırlıklı sitelerde 17–18 piksel daha rahat olabilir. Fontun x-yüksekliği küçükse boyutu biraz artırın.
Palette kaç renk olmalı?
Bir marka rengi, bir nötr ve üç durum rengi (başarı, uyarı, hata) çoğu site için yeterlidir. Her birinin 8–10 tonu olduğunda bu 50 civarı değer eder; ama gerçekte kullanacağınız ton sayısı çok daha azdır.
Hazır palet oluşturucular kullanılabilir mi?
Evet. Birçok araç tek bir renkten ton dizisi üretir. Ürettiği tonların kontrastını yine de ölçün; araçlar renkleri estetik açıdan dengeler, okunabilirliği garanti etmez.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
