CSS memiliki banyak properti yang dapat digunakan untuk memperindah tampilan halaman web, salah satu contohnya adalah properti yang mengatur font. Untuk itu pada kesempatan kali ini akan dibahas cara menentukan ukuran font (font size) di CSS dan contoh penggunaannya.

Table of Contents Show

Ukuran huruf
Mengatur Ukuran Font Dengan Piksel
Mengatur Ukuran Font dengan Em
Menggunakan Kombinasi Persen dan Em
Ukuran Font Responsif
Langkah-langkah untuk mengubah ukuran font?
Berapa ukuran font dalam CSS?
Keluarga Font CSS apa saja?
Apa fungsi font family?

Bagian Artikel

Ukuran huruf

Properti font-size pada CSS digunakan untuk mengatur ukuran teks

Memiliki kemampuan untuk menyesuaikan ukuran font dalam desain web adalah penting. Jadi sebaiknya jangan menggunakan ukuran font agar paragraf terlihat seperti ukuran font heading, atau sebaliknya

Selalu gunakan tag HTML yang tepat, seperti tag

–

untuk heading dan tag
untuk paragraf.

Nilai font-size dapat diatur ke ukuran absolut atau relatif. Berikut adalah ciri-ciri ukuran font-size absolut dan relatif
Fitur ukuran absolut pada ukuran font
Teks diatur ke ukuran tertentu
Tidak mengizinkan pengguna untuk mengubah ukuran teks di semua browser (buruk karena alasan aksesibilitas)
Ukuran font absolut akan berguna ketika ukuran keluaran diketahui
Fitur ukuran relatif pada ukuran font
Teks disusun dalam ukuran relatif terhadap elemen sekitarnya
Mengizinkan pengguna mengubah ukuran teks di browser
Catatan. Jika ukuran font tidak diatur secara spesifik, maka ukuran default untuk teks normal, seperti paragraf, adalah 16px (16px = 1em)

Mengatur Ukuran Font Dengan Piksel

Mengatur ukuran font dengan piksel memberi kita kendali penuh atas ukuran teks. Berikut adalah contoh pengaturan ukuran font dengan piksel di CSS

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini paragraf.</p>
<p>Ini juga paragraf.</p>

</body>
</html>

Kiat. Mengatur ukuran font menggunakan piksel, memungkinkan kita menggunakan alat zoom untuk mengubah ukuran seluruh halaman

Mengatur Ukuran Font dengan Em

Untuk memungkinkan pengguna mengubah ukuran teks (di menu browser), banyak pengembang web menggunakan em sebagai pengganti piksel

Penggunaan ukuran em direkomendasikan dalam mengatur ukuran font pada halaman web

1em sama dengan ukuran font yang digunakan dalam kalimat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px

Untuk menghitung ukuran dari piksel ke em, Anda dapat menggunakan rumus ini. piksel / 16 = em

Berikut adalah contoh penggunaan em dalam mengatur ukuran font

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini paragraf.</p>
<p>Menentukan ukuran font di em memungkinkan semua browser utama untuk mengubah ukuran teks.
Sayangnya, masih ada masalah dengan IE versi yang lebih lama. Saat mengubah ukuran teks menjadi lebih besar / lebih kecil teks akan berubah menjadi lebih besar/ lebih kecil dari yang seharusnya.</p>

</body>
</html>

Pada contoh di atas, ukuran font dibuat dengan konversi yang sama seperti contoh sebelumnya saat menggunakan piksel. Namun, dengan ukuran em memungkinkan teks untuk menyesuaikan ukuran teks di semua browser

Namun, menggunakan em masih memiliki masalah saat digunakan pada versi Internet Explorer yang lebih lama. Ukuran teks menjadi lebih besar dari seharusnya jika diatur lebih besar, dan lebih kecil dari seharusnya jika diatur lebih kecil

Menggunakan Kombinasi Persen dan Em

Jadi solusi agar font-size berfungsi di semua browser adalah dengan mengatur ukuran font secara default dalam bentuk persen pada elemen .

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini paragraf.</p>
<p>Menentukan ukuran font dalam persen dan em membuat ukuran font sama di semua browser utama, dan memungkinkan semua browser untuk mengubah ukuran teks!</p>

</body>
</html>

Kode sekarang berfungsi dengan baik. Hal ini menunjukkan bahwa penggunaan persen dan em menjadikan ukuran teks sama di semua browser, dan memungkinkan semua browser memperbesar atau mengubah ukuran teks

Ukuran Font Responsif

Ukuran teks bisa diatur menggunakan satuan vw yang artinya "viewport width"

Dengan begitu, ukuran teks akan mengikuti ukuran jendela browser

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Ubah ukuran jendela browser untuk melihat bagaimana skala ukuran teks.</p>

<p style="font-size:5vw;">Gunakan "vw" saat memberi ukuran teks. 10vw akan mengatur ukuran menjadi 10% dari lebar viewport.</p>

<p>Viewport width adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm.</p>

</body>
</html>

Lebar viewport adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm

Langkah-langkah untuk mengubah ukuran font?

Ubah ukuran font .

Di perangkat, buka aplikasi Setelan

Ketuk Tampilan

Ketuk Lanjutan

Ketuk Ukuran font

Pilih ukuran font dengan penggeser

Berapa ukuran font dalam CSS?

Ukuran font pada CSS adalah properti yang digunakan untuk menyesuaikan ukuran font pada elemen HTML . Dengan properti ini, ukuran teks pada elemen dapat disesuaikan dengan kebutuhan.