CSS clamp() ile Akıcı Tipografi: Breakpoint'lere Veda

CSS clamp() fonksiyonuyla medya sorgusuna gerek kalmadan akıcı, ölçeklenebilir tipografi kurmayı öğrenin. rem + vw karışımı, başlık örnekleri ve erişilebilirlik tuzakları.

#CSS#Tipografi#Responsive Tasarım#clamp#Erişilebilirlik

CSS clamp() ile Akıcı Tipografi: Breakpoint'lere Veda

Yıllarca responsive tipografiyi hep aynı şekilde kurduk: bir font-size belirle, sonra @media sorgularıyla 768px'de, 1024px'de, 1440px'de yeniden tanımla. İşe yarıyordu ama sonuç hep aynıydı; ekran her breakpoint'i geçtiğinde yazı boyutu zıplıyordu. Araya sıkışan tüm genişliklerde ise tipografi ya çok küçük ya çok büyük kalıyordu.

2026'da bu yaklaşım artık gereksiz. clamp() fonksiyonu, tek satırda hem minimum hem maksimum sınırı koruyan, aradaki her piksel için akıcı şekilde ölçeklenen bir değer üretmemizi sağlıyor. Bu yazıda mantığını, gerçek örneklerini ve dikkat edilmesi gereken tuzakları ele alacağız.

Breakpoint tabanlı font boyutunun derdi

Klasik yaklaşımı düşünün:

h1 {
  font-size: 1.75rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3.5rem;
  }
}

Bu kodun üç temel sorunu var:

Ani sıçramalar: 767px'de başlık 1.75rem, 768px'de aniden 2.5rem oluyor. Tek pikselde gözle görülür bir zıplama.
Ara genişlikler ihmal ediliyor: 900px genişliğinde başlık hâlâ 2.5rem; oysa o alan daha büyük bir başlığı rahatça taşıyabilir.
Bakım maliyeti: Her başlık, her boşluk, her bileşen için ayrı breakpoint blokları yazmak CSS'i şişiriyor.

İhtiyacımız olan şey, genişliğe göre sürekli değişen bir boyut. İşte clamp() tam olarak bunu yapıyor.

clamp() nasıl çalışır?

clamp() üç argüman alır:

font-size: clamp(MIN, PREFERRED, MAX);

MIN — değerin inebileceği en küçük sınır (taban).
PREFERRED — tarayıcının hesaplamaya çalıştığı ideal, esnek değer.
MAX — değerin çıkabileceği en büyük sınır (tavan).

Tarayıcı şöyle düşünür: "Tercih edilen değeri hesapla. MIN'in altındaysa MIN'i kullan, MAX'in üstündeyse MAX'i kullan, arada kalıyorsa olduğu gibi bırak." Yani clamp(MIN, PREFERRED, MAX), aslında max(MIN, min(PREFERRED, MAX)) ifadesinin okunabilir hâlidir.

Sihir, PREFERRED değerinin nasıl kurulduğunda gizli.

Neden rem + vw karışımı?

Akıcı tipografinin kalbi, tercih edilen değerin sabit bir taban (rem) + viewport'a bağlı bir eğim (vw) olarak yazılmasıdır:

h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

Burada 1.5rem + 2.5vw ifadesinin iki bileşeni şu işi görür:

1.5rem (rem tabanı): Boyutun kullanıcının kök yazı tipi ayarına bağlı kalmasını sağlar. Erişilebilirlik açısından kritik olan kısım budur.
2.5vw (vw eğimi): Viewport genişledikçe boyutu büyütür, böylece akıcı ölçeklenme oluşur.

Neden saf vw kullanmamalıyız?

font-size: 5vw gibi yalnızca vw tabanlı bir değer çekici görünebilir ama ciddi bir erişilebilirlik sorunu doğurur: viewport birimleri, kullanıcının tarayıcı yazı tipi boyutu tercihini tamamen yok sayar. Kullanıcı varsayılan font boyutunu 16px'den 24px'e çıkardığında saf vw tabanlı metin hiç değişmez. Tabana bir rem bileşeni eklemek, kullanıcı tercihinin yine de etkili olmasını garanti eder.

İpucu: rem/vw değerlerini elle hesaplamak yerine CSS clamp() Oluşturucu aracına min ve max boyutlarınızı girip eğimi otomatik üretebilirsiniz.

Gerçek bir örnek: başlık ölçeği

Tutarlı bir tipografik ölçek kuralım. Tüm değerler küçük ekranda nazikçe başlar, geniş ekranda büyür:

:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4: clamp(2.5rem, 1.9rem + 3vw, 4rem);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p  { font-size: var(--step-0); }

Tek bir medya sorgusu yok. Her başlık, 320px'den 1920px'e kadar tüm genişliklerde akıcı şekilde ölçekleniyor.

Sadece yazı boyutu değil: boşluklar da

clamp() yalnızca tipografiyle sınırlı değil. Bölüm boşluklarını da akıcı hâle getirebilirsiniz:

section {
  padding-block: clamp(3rem, 2rem + 6vw, 8rem);
}

.card-grid {
  gap: clamp(1rem, 0.5rem + 2vw, 3rem);
}

Böylece sayfanın "nefes alma" mesafesi de ekranla birlikte büyüyüp küçülür. Boşluklarınızı rem cinsinden tutmak isterseniz px → rem Dönüştürücü işinizi kolaylaştırır.

Tuzaklar ve dikkat edilmesi gerekenler

clamp() güçlüdür ama körü körüne kullanılırsa sorun çıkarır.

1. Çok dik eğimler

vw katsayısı büyüdükçe metin viewport'a aşırı duyarlı hâle gelir. clamp(1rem, 0.5rem + 8vw, 4rem) gibi dik bir eğimde, küçük ekran değişimlerinde bile boyut çılgınca dalgalanır. Genel kural: eğimi olabildiğince yatık tutun. İki uç boyut arasındaki fark ne kadar küçükse eğim de o kadar yumuşak olur.

2. Zoom ve erişilebilirlik

WCAG, kullanıcının metni %200'e kadar yakınlaştırabilmesini ister. Saf vw tabanlı metin zoom'a yanıt vermediği için bu kriteri geçemez. rem tabanı içeren clamp() ifadeleri ise kullanıcı sayfayı yakınlaştırdığında genişlediği için erişilebilirlik gereksinimini karşılar. Bu yüzden tercih edilen değerde mutlaka bir rem bileşeni bulundurun.

3. Satır yüksekliğini unutmamak

Yazı boyutu akıcı olunca satır yüksekliği de uyum sağlamalı. Birimsiz line-height değerleri (örneğin 1.5) font boyutuyla orantılı ölçeklendiği için en güvenli seçimdir. Optimal değeri bulmak için Satır Yüksekliği Hesaplayıcı aracını kullanabilirsiniz.

4. Aşırıya kaçmamak

Her özelliği clamp() ile akıcı yapmak gerekmez. Kenarlık kalınlığı, küçük ikon boyutları gibi şeyler genelde sabit kalmalı. clamp()'i en çok fark yaratan yerlerde (başlıklar, ana boşluklar, kahraman bölümleri) kullanın.

Medya sorgularını ne kadar azaltır?

Pratikte fark çarpıcı. Akıcı bir ölçek tek seferde tanımlandığında, tipik bir tasarım sisteminde tipografi ve boşluk için yazılan onlarca breakpoint bloğu tamamen ortadan kalkar. Geriye yalnızca düzen değişiklikleri (örneğin tek sütundan ızgaraya geçiş) için gerçek medya sorguları kalır. CSS daha kısa, daha öngörülebilir ve bakımı daha kolay hâle gelir.

Akıcı tipografi, görsel sisteminizin geri kalanıyla da uyum içinde çalışır; arka plan geçişlerinizi Gradyan Oluşturucu ile, renk paletinizi Renk Seçici ile kurarak tutarlı bir tasarım dili elde edebilirsiniz.

Özet

Breakpoint tabanlı font boyutları ani sıçramalara ve şişkin CSS'e yol açar.
clamp(MIN, PREFERRED, MAX) aradaki tüm genişlikler için akıcı bir değer üretir.
Tercih edilen değeri rem + vw olarak yazmak hem ölçeklenmeyi hem erişilebilirliği korur.
Saf vw kullanmaktan kaçının; eğimleri yatık tutun ve satır yüksekliğini ihmal etmeyin.
Doğru kullanıldığında medya sorgularının çoğunu ortadan kaldırır.