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.
Ö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:
- developer.mozilla.org/en-US/docs/Web/CSS/clamp()
- docs.w3cub.com/css/clamp
- web.dev/min-max-clamp/
- levelup.gitconnected.com/fluid-typography-with-css-clamp
- mertcertel.com/post/css-clamp-ozelligi-nedir
- css-tricks.com/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.