Duyarlı tipografi

clamp() ve vw birimleriyle duyarlı tipografiyi öğrenirsin.

vw birimi nedir?

vw (viewport width), görünüm alanı genişliğinin yüzde biridir. 1vw = görünüm alanı genişliğinin %1'i. 1200px genişlikte bir ekran için 1vw = 12px olur.

Yazı boyutu için kullanıldığında, ekran daraldıkça yazı da küçülür:

h1 { font-size: 5vw; }

Tek başına vw kullanmak risklidir: çok dar ekranlarda yazı okunamayacak kadar küçülür, çok geniş ekranlarda çok büyür.

clamp() işlevi

clamp(), üç değer alır: clamp(min, tercih, max). Tarayıcı, tercih edilen değeri kullanır; ancak bu değer min'in altına düşemez ve max'ın üstüne çıkamaz.

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Bu örnekte yazı 4vw oranında değişir ama hiçbir zaman 1.5rem'in altına inmez ya da 3rem'in üstüne çıkmaz. vw'nin uç davranışlarını düzeltir.

Duyarlı yazı stratejisi

Duyarlı tipografinin yaygın reçeti: clamp(min, vw, max). Min, telefonda okunabilir alt sınır; max, geniş ekranda abartısız üst sınır; vw, ikisinin arasında akışkan geçiş.

Örnek: clamp(1rem, 2.5vw, 1.5rem). Telefonda 1rem, masaüstünde 1.5rem, arada akışkan. rem tabanlı sınırlar erişilebilirliği (kullanıcının tarayıcı yazı boyutu ayarını) korur.

Uygulama h1 için clamp ile duyarlı yazı

h1 seçicisine font-size: clamp(2rem, 5vw, 4rem) bildirimini ekle. Yazı, 2rem ile 4rem arasında 5vw oranında akışkan değişmeli.

Örnek çözümü göster

/* h1 için akışkan ama sınırlı yazı boyutu */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Kendini test et

800px genişlikte 5vw kaç px olur?
- 5px
- 8px
- 40px
- 400px
Cevabı göster

40px — Doğru. 800 × 0,05 = 40px. 5vw, 800px genişliğin %5'idir.

clamp() çağrısını tamamla

h1 {
  font-size: clamp(1.5rem, ____, 3rem);
}

Cevabı göster

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

clamp() neyi çözüyor?
- Yazı tipini değiştirir
- Saf vw'nin çok küçük veya çok büyük yazıya kaymasını engeller
- Sayfaya yakınlaştırmayı kapatır
- Renkleri duyarlı yapar
Cevabı göster

Saf vw'nin çok küçük veya çok büyük yazıya kaymasını engeller — Doğru. clamp(), vw'nin uç değerlerini min ve max ile sınırlandırır.

Sıradaki ders: Duyarlı görseller

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler