Kita buka dahulu kode dari pelajaran sebelumnya. Dan untuk contoh pertama pada video ini, kita akan mengubah ukuran dari font pada paragraf.

Kita buka kode css kita. Kita cari selector p, dan kita tambahkan properti font-size. Ukuran yang paling mudah untuk digunakan adalah pixel, dan secara default font yang digunakan adalah ukuran 16 pixel. Kita coba berikan nilai 16 px.

Kita simpan dan refresh browser. Tidak ada perubahan ya. Karena defaultnya tulisan memang sudah menggunakan 16 pixel. Namun apabila font-size kita ganti, misalnya menjadi 8 pixel, maka bisa dilihat hasilnya tulisan pada paragraf akan menjadi jauh lebih kecil.

Perlu diingat bahwa ukuran 8 pixel ini bukan berarti lebar dari huruf pada font sama persis dengan 8 pixel. Secara browser tetap akan menyesuaikan ukuran pixel pada saat pemakai melakukan zoom in dan zoom out. Sebagai contoh, saya akan zoom in browser hingga 200%. Dapat dilihat bahwa font tetap ikut diperbesar. Begitu juga apabila saya melakukan zoom out, maka font juga ikut diperkecil.

Ada beberapa satuan lain, namun sangat jarang digunakan. Misalkan kita bisa menyebutkan 8 centimeter dengan menuliskan nilai 8 cm. Hasilnya berantakan ya, karena kita masih menggunakan properti line-height. Kita hapus dahulu properti line-height. Dan bisa dilihat hasil dari font ukuran 8 cm akan menjadi super besar seperti ini.

Ada juga ukuran inch, misalkan nilainya kita ganti menjadi 8in. Hasilnya fontnya akan lebih besar lagi. Atau bisa juga menggunakan satuan milimeter ya. Misalnya kita tulis 8mm. Dan hasilnya tulisan akan sedikit lebih besar dari ukuran normal.

Ukuran centimeter, inch, dan milimeter ini sangat jarang digunakan. Jadi disini kita hanya sekedar tau saja ya, bahwa kita bisa menggunakan satuan-satuan seperti ini. Kabarnya sih satuan ini lebih sering digunakan untuk percetakan, tapi dari pengalaman saya membuat situs, saya tidak pernah menggunakan satuan ini.

Sekarang kita kembalikan ke ukuran normal yaitu 16 pixel. Nah satuan-satuan yang kita pelajari barusan, seperti pixel, centemeter, inch, dan milimeter ini disebut dengan satuan absolute. Apabila kita hendak membuat situs yang responsive, responsive disini maksudnya situs kita tetap bisa dibaca dengan enak baik di smartphone, tablet maupun desktop komputer, maka kita disarankan untuk tidak menggunakan satuan absolute.

Mengapa begitu? Karena apabila kita menggunakan satuan absolute, maka browser tidak bisa menyesuaikan ukuran font dari settingnya. Sebagai contoh, kita tekan tombol menu pada Chrome dan kita pilih bagian setting. Lalu kita cari bagian Appeareance dan disini ada pilihan font size yang nilai defaultnya adalah medium.

Apabila saya mengganti ukuran font menjadi yang paling besar, yaitu very large. Disini kita bisa melihat bahwa tulisan pada setting sudah berubah menjadi besar. Lalu kita lihat kembali ke halaman HTML kita. Kita bisa melihat bahwa ukuran font pada judul kita turut membesar, namun ukuran font pada paragraf tetap sama.

Begitu juga kalau kita mengganti font size menjadi very small. Tulisan akan berubah menjadi kecil sekali hingga sulit untuk dibaca. Pada halaman HTML kita, ukuran font judulnya mengecil, namun ukuran font pada paragraf tetap sama. Dan pada judul h2 kita, bahkan ukuran fontnya berubah menjadi lebih kecil dari paragraf.

Kita kembalikan setting font size menjadi medium.

Untuk pengaturan nilai pada font-size ini, kita lebih disarankan untuk menggunakan satuan relatif. Satuan relatif ini artinya kita membandingkan ukuran font yang hendak kita gunakan dengan satuan normal. Sebagai contoh, apabila kita hendak menggunakan font dengan ukuran 2 kali lipat ukuran normal, maka kita menggunakan font dengan ukuran 32 pixel. Dapat kita lihat ukuran font 32 pixel adalah seperti ini.

Satuan 32 pixel ini akan kita ganti menjadi satuan relatif. Sebagai contoh pertama kita coba satuan persentase terlebih dahulu. Dua kali lipat kalau kita ubah menjadi persentase adalah 200%. Kita masukkan nilai 200% dan kita lihat hasilnya. Tidak ada perubahan ukuran font ya. Karena 200% itu setara dengan 32 pixel. Namun apabila font size pada setting Chrome kita ubah menjadi very small, maka ukuran font pada paragraf akan ikut berubah.

Nah, satuan lain yang sering digunakan adalah em. Disini kita menggunakan bilangan desimal untuk membandingkan font size dengan ukuran normal. Nilai 1em artinya ukuran font normal, atau setara dengan 16 pixel. Sedangkan apabila kita ingin agar ukurannya 32 pixel atau dua kali lipat, maka kita menggunakan nilai 2em. Kita masukkan nilai 2em dan kita refresh browser. Tidak ada perubahan ya, karena nilainya masih sama.

Kelemahan dari satuan em ini adalah, ukuran font pada paragraf adalah 2 kali lipat dibandingkan dengan parentnya. Kalau kita lihat kembali struktur dari kode HTML kita, kita bisa melihat bahwa kita membuat tag p berada di dalam tag body. Jadi kalau misalkan kita menambahkan properti font-size pada body dengan nilai 200%, maka font-size pada paragraf akan berubah menjadi lebih besar lagi.

Dan kalau kita melakukan inspect pada paragraf, disini kita bisa menemukan bahwa font-size yang digunakan adalah 2em. Dan kalau kita geser lebih ke bawah lagi, kita bisa menemukan pada body bahwa font-size-nya adalah 200% namun dicoret. Dicoret disini artinya font-size pada body ini seharusnya tidak digunakan pada paragraf, namun kenyataannya nilai 200% ini berpengaruh pada paragraf dan menyebabkan ukuran fontnya membesar dua kali lipat. Hal ini menyebabkan bug yang sangat sulit untuk ditemukan.

Kelemahan lain dari satuan em ini bisa kita temukan apabila kita membuat tag di dalam tag. Sebagai contoh, kita hapus dahulu properti font-size pada body. Lalu kita buka kode HTML kita.

Setelah paragraf terakhir, kita tambahkan H2 dengan konten Daftar Menu Restoran.

Kita tambahkan daftar dengan 2 isi. Kita ketik ul>li+li, lalu tekan Ctrl+E. Kita isikan list pertama dengan Makanan dan list kedua dengan Minuman.

Lalu di dalam makanan kita tambahkan lagi list yang isinya ada 5 baris. Kita ketik ul>li+li+li+li+li, lalu tekan Ctrl+E. Lalu kita isikan Masakan Nusantara, Chinese Food, Japanese Food, Korean Food dan Western Food.

Di dalam Masakan Nusantara kita tambahkan list lagi dengan isi 4 baris. Kita ketik ul>li+li+li+li lalu tekan Ctrl+E. Dan kita isikan dengan Nasi Rames, Nasi Timbal, Nasi Kapau, dan Nasi Goreng.

Nanti isi listnya bisa kita lengkapi lagi. Namun untuk mempersingkat waktu, kita simpan dahulu dan lihat hasilnya pada browser. Sekarang kita sudah memiliki list daftar menu restoran, yang dimulai dari kategori, kemudian diikuti dengan sub kategori, dan terakhir baru nama menunya. Semuanya masih menggunakan ukuran font normal.

Misalkan kita hendak menggunakan font dengan ukuran dua kali lipat pada list. Maka kita bisa membuka kembali kode css kita. Kita tambahkan selector li. Lalu kita tambahkan properti font-size dengan nilai 2em.

Kita simpan dan refresh browser. Dan kita lihat hasilnya. Wow. Nasi rames menggunakan font yang terlalu besar ya.

Mengapa hal ini bisa terjadi? Karena em melakukan perbandingan ukuran font relatif terhadap ukuran font parentnya. Dan kalau kita lihat pada konten kita, list pertama kita dengan konten Makanan, parentnya adalah tag body dengan ukuran font normal. Maka makanan menggunakan font dengan ukuran dua kali normal.

Kemudiaan kita lihat ke Masakan Nusantara, yang parentnya adalah Makanan dengan ukuran tulisan dua kali normal. Maka Masakan Nusantara akan memperbesar fontnya lagi sebanyak dua kali, sehingga akhirnya Masakan Nusantara menggunakan font ukuran empat kali normal.

Begitu juga yang terjadi pada Nasi Rames. Berhubung parentnya adalah Masakan Nusantara yang sudah menggunakan font ukuran empat kali normal, Nasi Rames akan memperbesarnya lagi sebanyak dua kali, sehingga akhirnya menggunakan font ukuran delapan kali normal.

Bagaimana kalau kita ubah satuan em menjadi persentase? Kita ubah font-size menjadi 200%. Dan kita lihat hasilnya di browser. Ternyata sama ya. Persentase juga membandingkan font-size elemen terhadap parentnya.

Untuk mengatasi hal-hal seperti ini, maka ada satuan baru dengan nama rem, yang merupakan singkatan dari root em. Satuan ini adalah satuan relatif, dengan nilai yang sama dengan em. Namun rem membandingkan ukuran font elemen dengan ukuran font dari root. Sehingga hasil dari ukuran rem akan selalu sama, tidak peduli dimanapun elemen tersebut berada.

Sebagai contoh, kita ubah font-size pada li menjadi 2 rem. Kita simpan dan lihat hasilnya. Nah, sekarang seluruh list dari Daftar Menu Restoran kita menggunakan font dengan ukuran yang sama.

Oke, pada video ini kita sudah mempelajari mengenai properti font-size. Sebenarnya masih ada banyak satuan yang bisa digunakan untuk mengisikan nilai dari properti ini, untuk referensi lebih lengkapnya teman-teman dapat melihat dari situs MDN. Namun di video ini kita hanya membahas mengenai satuan-satuan yang paling sering digunakan saja ya, yaitu pixel, persentase, em dan rem. Dari semua satuan yang kita bahas dalam video ini, yang paling disarankan untuk digunakan adalah satuan rem.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.