Kategoriler
Kodlama

Akışkan tipografi

Akışkan tipografi ve CSS clamp nedir? Örnekler ve kaynaklar

Akışkan tipografi nedir? Akıcı tipografi ile, yazı tipi boyutlarınız için görüntü alanı birimlerini(cihazın ekran boyutu) tek başına veya bir calc()değerin parçası olarak kullanırsınız. Bu, ikisini dengede tutarak yazı tipi boyutunuzun ekranın boyutuyla birlikte büyümesini sağlayacaktır. Be bu da responsive tasarımda yazı/font boyutlarının da akıcı olmasını yani responsive typography/duyarlı tipografi kullanmanız anlamında gelir.

Görüntü alanıyla değişken tipografi boyutları olduğundan, metnin çok küçük veya çok büyük olmasını önlemek için minimum ve maksimum boyut kullanılması gerekir. Bunun için çeşitli teknikler vardır, en kolayı medya sorgularını kullanmaktır: belirli bir genişliğe kadar, boyut sabittir, bundan sonra boyut ya içinde ya da içinde vw, calc() örneğin calc(1rem + 0.25vw)ve belirli bir görüntü alanı genişliğindedir. maksimum yazı tipi boyutunu siz belirlersiniz.

clamp()Yakında tarayıcılarda tanıtılacak ve bunu medya sorguları olmadan yapmanıza izin verecek olan yaklaşan bir yöntem . Örneğin clamp(1rem, 2.5vw, 1.75rem), minimum 1rem ve maksimum 1.75rem olan 2.5vw bir yazı tipi boyutu elde etmek için kullanılabilir.

CSS clamp
CSS clamp

Örnek:

h1 {
  font-size: clamp(1.75rem, 3vw, 2.1rem);
}

Örnek 2:

Hemen hemen tüm tarayıcılar tarafından desteklenmektedir ancak aşağıdaki örnekte olduğu gibi eğer desteklemiyorsa bu şekilde kullanmanız günü kurtarır:

h1 {
  font-size: min(max(1.75rem, 3vw), 2.1rem);
  @supports (font-size: clamp(1.75rem, 3vw, 2.1rem)) {
    font-size: clamp(1.75rem, 3vw, 2.1rem);
  }
}

Kaynaklar:

min(), max(), and clamp() are CSS magic!

Bu arada Kevin Powell harika bir anlatıcı ve developer, ilgiliyseniz takip etmenizi öneririm kendisi tüm modern yöntemlere detaylı deyinir.

wolkanca.com’da Akışkan tipografi veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Akışkan tipografi için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.