Responsive Tipografi dengan 1 Baris Kode CSS

Membuat responsive tipografi memang gampang-gampang susah, ada berbagai cara untuk mencapai tujuan tersebut, dari mulai menggunakan viewport unit, menggunakan media query atau pun menggunakan fungsi calc().

Tapi tahukah kamu kalau CSS saat ini sudah berkembang dengan pesat, saat ini kita bisa membuat responsive tipografi dengan hanya menulis 1 baris kode css saja!

clamp()

Sebagian dari kamu pasti belum familiar dengan fungsi di atas, clamp(). Saat saya menulis artikel ini, saya pun baru saja mengetahuinya ?. Jadi, dengan fungsi ini kita bisa mengatur nilai minimal dan maksimal serta nilai pilihan atau nilai yang ingin kita gunakan.

Maksudnya seperti ini, untuk menggunakan fungsi clamp() dibutuhkan 3 parameter yang harus kita isi clamp(MIN, VAL, MAX):

• min adalah nilai minimal
• val adalah nilai pilihan atau nilai yang ingin digunakan
• max adalah nilai maksimal

Contoh dari penggunaannya seperti berikut

.clamp {
  font-size: clamp(16px, 5vw, 36px);
}

Cara membaca kode di atas, .clamp nilainya adalah 5% dari total lebar viewport, atau simpelnya total lebar dari monitor kamu, tapi apabila nilainya lebih besar dari 16px dan lebih kecil dari 36px.

Jadi apabila total lebar viewport kamu 1280px maka nilai dari 5vw harusnya adalah 64px (1280 * 5%) tapi karena sudah dibatasi maka nilai yang akan digunakan adalah 36px.

Pun sebaliknya, apabila nilai lebar viewport kamu 300px maka nilai dari 5vw harusnya adalah 15px, tapi dikarenakan nilai minimal yang saya atur adalah 16px, maka nilai dari 5vw adalah 16px.

Saya sudah mempersiapkan satu pen untuk kamu bisa mencoba fungsi ini, silahkan kunjungi url ini https://codepen.io/satrya/pen/xxVyjEa.

Browser Support

Untuk support dari browser sendiri sudah sangat baik, hampir semua browser modern sudah mensupport fungsi ini, silahkan cek di sini.

Satu hal lagi, fungsi ini tidak hanya bisa digunakan untuk font-size saja, tapi kamu bisa gunakan untuk CSS properti lainnya seperti padding, margin, height & width.

Kalau mau baca dan pelajari lebih lanjut, silahkan kunjungi website ini https://developer.mozilla.org/en-US/docs/Web/CSS/clamp