UKURAN FONT RESPOSINVE

Membuat ukuran font yang responsif adalah aspek penting dari desain web yang mendukung semua jenis perangkat. Di CSS, ada beberapa cara untuk mengatur ukuran font sehingga tetap dapat dibaca dengan baik pada berbagai ukuran layar. Dalam artikel ini, kita akan membahas beberapa metode untuk mencapai hal tersebut.

Menggunakan Unit Em

Em adalah unit relatif yang merujuk pada ukuran font saat ini. Misalnya, jika ukuran font induk adalah 16px, maka 1em = 16px. Untuk membuat ukuran font menjadi responsif, kamu dapat menggunakan em dalam deklarasi font-size.

body {
  font-size: 2em;
}

Dengan kode di atas, ukuran font akan menjadi dua kali lipat dari ukuran font induk.

Menggunakan Unit Rem

Rem (root em) juga merupakan unit relatif, namun merujuk pada ukuran font dasar dari seluruh halaman, bukan hanya elemen induk. Mirip dengan em, rem dapat membuat ukuran font yang responsif.

body {
  font-size: 1.5rem;
}

Dalam contoh ini, ukuran font akan menjadi 1.5 kali ukuran font dasar dari halaman.

Menggunakan Unit Vw dan Vh

Vw (viewport width) dan vh (viewport height) adalah unit yang merujuk kepada persentase lebar dan tinggi viewport. Sebagai contoh, 1vw adalah 1% dari lebar viewport. Penggunaan vw dan vh untuk ukuran font dapat membuat font responsif terhadap perubahan ukuran viewport.

body {
  font-size: 3vw;
}

Dengan kode di atas, ukuran font akan membesar atau mengecil seiring dengan perubahan lebar viewport.

Menggunakan Media Queries

Media queries juga bisa digunakan untuk mengubah ukuran font berdasarkan ukuran viewport. Dengan media queries, kamu dapat merancang tampilan yang khusus untuk perangkat dengan ukuran layar tertentu.

@media (max-width: 600px) {
 body {
  font-size: 1.5em;
 }
}

Kode di atas akan mengubah ukuran font menjadi 1.5em ketika lebar layar berada di bawah 600px.

Dengan menggunakan metode-metode di atas, kamu dapat dengan mudah membuat ukuran font yang responsif di CSS.