1. Sabit boyutların arasındaki boşluk

Bir başlık için telefonda 24, masaüstünde 48 piksel seçmek kolaydır. Fakat aradaki ekranlarda iki keskin kırılma noktası yerine yumuşak bir geçiş isteyebilirsin. clamp(minimum, tercih edilen, maksimum), hesaplanan değeri belirlediğin sınırlar içinde tutar.

Tercih edilen değerde yalnızca vw kullanmak, çok küçük ekranda okunmayacak yazı ya da çok geniş ekranda aşırı büyüyen başlık yaratabilir. Minimum ve maksimum sınırlar bu taşmayı engeller. rem ve vw birlikte kullanıldığında kullanıcı yazı boyutu tercihleriyle ekran ölçüsü aynı formülde yer alabilir.

2. İki noktadan bir formül çıkar

Örneğin 360 piksel genişlikte 24, 1200 piksel genişlikte 48 piksel hedefliyorsun. Eğim, boyut farkının genişlik farkına bölünmesidir: 24 / 840. Yüzde genişlik birimine dönüştürünce yaklaşık 2.857vw olur. Sabit terim de 24 − 360 × 24 / 840, yani 13.714 pikseldir.

Kök yazı boyutunu örnek hesap için 16 piksel varsaydığında sabit terim yaklaşık 0.857rem, sınırlar 1.5rem ve 3rem olur. Bu bir tasarım başlangıcıdır; kök ölçüyü kullanıcı veya sayfa değiştirdiğinde ortaya çıkan davranışı tarayıcıda kontrol et. Araçlarımızdaki clamp hesaplayıcı bu varsayımı görünür biçimde sunar.

CSS
.article-title {
  font-size: clamp(1.5rem, 0.8571rem + 2.8571vw, 3rem);
  line-height: 1.12;
  max-width: 18ch;
}
.article-body {
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 68ch;
}

3. Her ölçüyü akışkan yapmak zorunda değilsin

Başlık, bölüm aralığı veya büyük bir görsel çerçevesi akışkan ölçüden faydalanabilir. Küçük düğme metinleri ve uzun okuma paragrafları ise daha istikrarlı ölçülerle daha rahat okunabilir. Aynı sayfada bütün değerleri vw ile değiştirmek, tasarımın her genişlikte farklı bir yoğunluğa sahip olmasına neden olabilir.

Önce tek bir rol seç: ana başlık. Ardından gövde metni, etiket ve butonla birlikte karşılaştır. Görsel hiyerarşiyi font-size tek başına kurmaz; satır uzunluğu, line-height, ağırlık ve beyaz alan da aynı kararda yer alır.

4. Yakınlaştırma kontrolünü atlama

Denklem doğru görünse bile gerçek tarayıcıda yüzde 200 yakınlaştırma dene. Başlık büyüdüğünde metin kırpılıyor mu, menü kapanıyor mu, içerik yatay kaydırma istiyor mu? Sabit yükseklik verilen kutular akışkan metinle birlikte kolayca sorun çıkarır.

MDN erişilebilirlik notu, metin boyutlandırmada büyümeye izin veren göreli sınırların önemini vurgular. Bu öneriyi yalnızca sayı olarak uygulamak yeterli değildir. Kullanıcı tercihleri ve uzun Türkçe sözcükler için gerçek sayfa kontrolü gerekir; küçük ekranda satır kırılmaları içerik okunabilirliğinin parçasıdır.

5. Sonucu üç genişlikte değerlendir

Minimum genişlik, aradaki bir tablet genişliği ve maksimum genişliğin üzerinde bir masaüstü seç. Her birinde başlığı ve gövde metnini birlikte oku. Formül doğru uç noktaları verirken ortada başlık çok yoğun görünüyorsa en büyük boyutu veya hedef genişliği yeniden düşün.

clamp bir tasarım kararı üretmez; seçtiğin kararlar arasında kontrollü bir geçiş sağlar. Bu nedenle hesaplayıcıdan gelen değeri doğrudan yayımlamak yerine sayfadaki gerçek metinle dene. Hesap, gözle incelemenin yerini almaz.

Kaynaklar ve kontrol notu

Bu rehber yapay zekâ desteğiyle hazırlanmış özgün bir editoryal içeriktir. Kaynak kontrolü: 30 Eylül 2026. Örnekleri kendi proje koşullarına uyarlayarak doğrula.

Bir hata fark ettiysen editörlüğe bildir; düzeltmeleri güncelleme tarihiyle işleriz.