Minimal arayüzlerde tipografi

Bir arayüzden rengi çıkardığında geriye ne kalıyor? Hiyerarşiyi taşıyan her şey tipografiye ve boşluğa devrediliyor. Bu iyi bir şey — çünkü renk, kötü bir hiyerarşiyi gizlemekte fazlasıyla başarılı.

Üç değişken yeter

Monokrom bir sayfada okuyucuya “bu daha önemli” demek için elimde üç şey var:

1. Boyut — ama sandığından çok daha az. text-3xl ile text-base arasında üçten fazla basamak kullanmak gerekmiyor.
2. Ağırlık — 500 gövde, 600 başlık. İkiden fazla ağırlık kullanınca sayfa dağılıyor.
3. Renk yoğunluğu — aynı siyahın üç tonu: birincil, ikincil, üçüncül.

Renk bir vurgu aracı değil, bir kimlik aracı. Vurgu için kontrast var.

Alt çizgi problemi

Metin içindeki linkler için alt çizgi, uzun yıllardır varsayılan. Ama alt çizgi harflerin çıkıntılarını (g, y, p) kesiyor ve paragrafın rengini lekeliyor. Alternatif: linke yumuşak bir gri zemin vermek.

a {
  border-radius: 0.25rem;
  padding-inline: 0.25rem;
  margin-inline: -0.25rem;
  background-color: var(--hover);
  text-decoration: none;
}

Negatif margin-inline, zeminin kapladığı fazladan genişliği geri alıyor — böylece satır uzunluğu değişmiyor, sadece arka plan taşıyor.

Ölçüler

Değişken	Değer	Neden
Satır uzunluğu	40rem	65–75 karakter, Türkçe için üst sınıra yakın
Gövde boyutu	16px	Mobilde otomatik yakınlaştırmayı tetiklemiyor
Satır aralığı	1.75	Uzun paragraflarda göz satır atlamıyor

Türkçe metinlerde satır uzunluğunu biraz kısa tutmakta fayda var: kelimeler İngilizceye göre uzun, bu yüzden aynı ch değeri daha az kelime demek.