CSS clamp() ile Akıcı (Fluid) Tipografi Kurmak

css clamp fonksiyonu, ekran boyutuna göre yumuşakça büyüyüp küçülen yazı boyutları kurmanın en temiz yoludur. Eskiden farklı ekranlar için bir sürü @media sorgusu yazıp her birinde font-size değerini elle ayarlıyorduk. Bu yaklaşım, kırılma noktaları arasında yazının zıplamasına ve bakımı zor bir CSS'e yol açıyordu. Tek satırlık bir clamp() ifadesi ise, başlığın küçük telefonda okunaklı, dev monitörde ise abartısız kalmasını sağlayan akıcı bir ölçek kurar.

clamp() tam olarak ne yapar?

Sözdizimi üç değer alır: clamp(MIN, TERCİH, MAX). Tarayıcı, ortadaki tercih edilen değeri hesaplar; ancak sonuç asla MIN'in altına inmez ve asla MAX'ın üstüne çıkmaz. Yani matematiksel olarak max(MIN, min(TERCİH, MAX)) ile aynıdır, ama çok daha okunaklıdır.

h1 {
  /* en az 1.75rem, en çok 3.5rem, arada ekrana göre akıcı */
  font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}

Sihir, ortadaki ifadede gizli. 1rem + 4vw kısmı, sabit bir taban (1rem) ile viewport genişliğine bağlı bir bileşeni (4vw, yani ekran genişliğinin %4'ü) birleştirir. Ekran genişledikçe 4vw büyür, yazı da onunla birlikte akar.

Neden sadece vw kullanmıyoruz?

Tek başına font-size: 5vw yazmak cazip gelebilir ama iki ciddi sorunu vardır. Birincisi, çok küçük ekranlarda yazı okunamayacak kadar küçülür, çok büyük ekranlarda ise kontrolden çıkar; alt ve üst sınır yoktur. İkincisi ve daha önemlisi: saf vw tabanlı boyut, kullanıcı tarayıcısında yazıyı büyüttüğünde hiç tepki vermez. Bu bir erişilebilirlik ihlalidir.

İşte tam burada rem ile vw'yi karıştırmanın değeri ortaya çıkar. İfadede bir rem bileşeni bulundurduğunuzda, kullanıcı tarayıcı yazı tipi boyutunu artırdığında o kısım da büyür ve metin ölçeklenebilir kalır.

Doğru eğimi (slope) hesaplamak

"4vw" rakamını gözden atmak yerine, iki ekran genişliği arasında istediğiniz iki boyutu tanımlayıp aradaki doğrusal eğimi hesaplayabilirsiniz. Diyelim ki yazının 320px ekranda 16px, 1280px ekranda 24px olmasını istiyorsunuz.

• Eğim = (24 − 16) / (1280 − 320) = 8 / 960 ≈ 0.00833 → yüzde olarak 0.833vw
• Kesişim (taban) = 16 − 0.00833 × 320 ≈ 13.33px → 0.833rem (16px taban varsayımıyla)

p {
  font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);
}

Bu hesabı her seferinde elle yapmak istemezseniz, Utopia veya Fluid Type Scale Calculator gibi araçlar minimum ve maksimum ekran/boyut çiftlerini girerek hazır clamp() ifadeleri üretir. Mantığı bir kez kavradıktan sonra bu araçlar zamandan büyük tasarruf sağlar.

Bir tipografi ölçeği kurmak

Tek tek elemanlar için clamp() yazmak yerine, CSS özel değişkenleriyle (custom properties) tutarlı bir ölçek tanımlamak çok daha sürdürülebilirdir:

:root {
  --step-0: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --step-2: clamp(1.56rem, 1.3rem + 1.3vw, 2.5rem);
  --step-3: clamp(1.95rem, 1.5rem + 2.2vw, 3.75rem);
}

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

Bu yapı, projedeki tüm başlık ve gövde metni boyutlarını tek bir yerden yönetmenizi sağlar. Bir değişkeni değiştirdiğinizde tüm site tutarlı şekilde güncellenir.

Erişilebilirlik: zoom testini geçmek

Akıcı tipografinin en sık ihmal edilen yönü, WCAG'ın 1.4.4 Metni Yeniden Boyutlandırma kriteridir: kullanıcı metni %200'e kadar büyütebilmelidir. Saf vw kullanırsanız, viewport genişliği değişmediği için tarayıcı zoom'unda metin yeterince büyümez ve bu testten kalırsınız.

Pratik kural: clamp() ifadesinin tercih edilen (orta) kısmında her zaman bir rem bileşeni bulundurun ve vw oranını çok yüksek tutmayın. 2.5vw civarı ve altı genellikle güvenlidir. Bitirdiğinizde tarayıcıda Ctrl/Cmd + ile %200 zoom yapıp metnin gerçekten büyüdüğünü doğrulayın.

• satır uzunluğu: gövde metnini max-width: 65ch ile sınırlayın; akıcı boyut, satırların aşırı uzamasını engellemez.
• satır yüksekliği: line-height için birimsiz değer (örn. 1.5) kullanın ki yazı büyüdükçe orantılı kalsın.

Tarayıcı desteği ve geri dönüş

İyi haber: clamp(), modern tüm tarayıcılarda (Chrome, Firefox, Safari, Edge) yıllardır kararlı şekilde desteklenir; ayrı bir öneke veya yapılandırmaya gerek yoktur. Çok eski tarayıcıları desteklemeniz gerekiyorsa, basit bir geri dönüş yeterlidir:

h1 {
  font-size: 2rem; /* clamp anlamayan tarayıcı bunu kullanır */
  font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}

Tarayıcı ikinci satırı anlamazsa onu yok sayar ve ilk satırdaki sabit değere düşer; anlarsa ikincisi kazanır. Bu, ek bir @supports bloğuna bile gerek bırakmaz.

Sık Sorulan Sorular

clamp() içinde matematiksel işlemler için calc() gerekir mi?

Hayır. clamp() kendi içinde +, - gibi işlemlere zaten izin verir; 1rem + 4vw yazmak için ayrıca calc() sarmalamanıza gerek yoktur. Yine de calc() kullanmak hata vermez.

clamp() yalnızca font-size için mi kullanılır?

Kesinlikle hayır. Akıcı padding, margin, gap, width ve hatta border-radius için de aynı mantıkla kullanılır. Boşlukları akıcı yapmak, tasarımın her ekranda dengeli durmasına yardımcı olur.

vw yerine container query birimleri (cqw) kullanmalı mıyım?

Bileşen, kapsayıcısının genişliğine göre ölçeklenmeli ise cqw daha doğru sonuç verir; ama bu, kapsayıcıda container-type tanımlamayı gerektirir. Sayfa genelindeki tipografi için vw hâlâ en basit ve güvenilir seçimdir.

Tipografiniz her ekranda dengeli görünsün ister misiniz? Akıcı bir tip ölçeği ve erişilebilir bir frontend kurmanız için yardıma ihtiyacınız varsa benimle iletişime geçin.