Dalam video ini saya akan menggunakan file baru sebagai bahan pelajaran. Saya telah membuat 2 file yaitu lanjutan.html dan lanjutan.css. Pertama kita isikan dahulu konten pada file lanjutan.html.

Kita gunakan html boilerplate. Dan kita isi tag Title dengan konten Belajar CSS Lanjutan. Pada bagian body, kita tambahkan juga tag h1 dengan konten Belajar CSS Lanjutan.

Kemudian kita tambahkan dua buah tag paragraf. Kali ini kita akan menggunakan paket Emmet untuk membantu penulisan kode. Kita ketik p+p, dan kemudian tekan tombol Control+E. Maka Emmet akan membuatkan 2 buah tag Paragraf yang posisinya sejajar.

Sedangkan untuk isinya kita akan menggunakan paket Lorem untuk menghasilkan kata-kata random yang akan membentuk sebuah paragraf. Kita ketik lorom_p dan kemudian kita tekan tombol alt + l. Kita ulangi proses ini untuk paragraf kedua.

Selanjutnya kita akan membuat tag h2 yang diikuti oleh 2 paragraf. Kita ketik h2+p+p, dan tekan tombol Ctrl+E. Dalam tag h2, kita isikan konten Judul Kecil Pertama. Lalu kita ulangi paket Lorem untuk mengisikan konten kedua paragraf.

Dan sebagai konten terakhir kita buat tag h2 yang diikuti oleh 3 paragraf. Kita ketik h2+p+p+p dan tekan tombol Ctrl+E. Kita isikan dengan Judul Kecil Kedua. Dan kita generate lagi random konten untuk ketiga paragraf.

Lalu kita kembali ke tag head. Setelah tag title, kita tambahkan tag link dengan attribute rel=”stylesheet” dan href=”lanjutan.css”.

Kita simpan file html. Dan kita lihat hasilnya pada browser. Sekarang kita sudah memiliki konten dengan satu judul utama, dua judul kecil dan secara total 7 paragraf. Konten ini akan kita gunakan dalam playlist Belajar CSS Lanjutan.

Selanjutnya kita akan belajar untuk mengubah jenis font yang digunakan untuk menampilkan konten. Kita klik file lanjutan.css. Lalu kita ubah elemen body. Untuk mengubah jenis font, kita menggunakan properti font-family. Disini kita bisa melihat bahwa Auto-Complete dari Atom memberikan 6 buah saran untuk nilai properti ini. Yang satunya adalah inherit artinya nilai mengikuti css dari parentnya. Sedangkan 5 pilihan lainnya adalah jenis font-family.

Dari kelima font-family ini, yang paling sering digunakan adalah serif dan sans-serif. Apa bedanya? Kita bisa buka google dan memasukkan kata kunci css fonts w3schools. Lalu kita lihat referensi dari w3schools.com.

Nah, disini kita bisa melihat ada 3 buah huruf ya. Kita lihat dari yang tengah terlebih dahulu yaitu Serif. Pada font serif, kita bisa melihat ada tekukan di bagian ujung font. Lekukan inilah yang disebut dengan nama Serif.

Sedangkan sans-serif itu artinya tidak memiliki serif. Jadi seluruh hurufnya hanya berupa garis lurus, tanpa ada gaya lekukan pada ujung garis.

Untuk melihat lebih jelas perbedaan serif dan sans-serif, kita bisa melihat huruf ketiga. Dimana bagian yang berwarna merah adalah serif-nya.

Sekarang kita coba beri nilai sans-serif untuk properti font-family. Kita simpan dan lihat hasilnya di browser. Sekarang jenis font yang digunakan untuk menampilkan konten kita sudah berubah ya. Kita lihat pada huruf B judul utama sudah tidak ada serifnya.

Tipe font sans-serif ini sifatnya sederhana, mudah untuk dibaca, namun gayanya tetap menarik. Sehingga font sans-serif inilah yang paling banyak digunakan untuk menampilkan konten situs.

Selanjutnya kita coba ganti nilai properti menjadi serif. Kita simpan dan refresh browser. Sekarang kita lihat pada huruf B judul utama sudah ada serif-nya ya. Jenis font serif ini lebih bergaya daripada sans-serif, dan lekukan pada hurufnya bisa memberikan rasa tertentu pada tulisan kita. Jenis font serif ini bisa kita gunakan untuk memberikan kesan lebih kuat pada bagian-bagian tertentu dari situs kita, misalkan pada bagian judul.

Kita coba lagi font-family lain, kali ini kita coba monospace. Monospace ini artinya seluruh huruf pada font ini akan memiliki lebar yang sama. Yang paling gampangnya bisa kita lihat pada huruf i. Huruf i pada monospace memiliki lebar yang sama dengan huruf lainnya. Tipe font monospace ini biasanya digunakan untuk menampilkan source code pada situs kita. Apabila kita menggunakan font monospace untuk seluruh konten seperti sekarang, maka situs kita akan terkesan jadul.

Mungkin kita tidak sadar ya, sebenarnya semua code editor itu menggunakan font monospace. Contohnya saja kita lihat kode kita sendiri pada Atom. Kita buka lagi halaman HTML. Efek dari tulisan monospace ini adalah, apabila kita menarik garis lurus vertikal pada konten kita, maka akan kelihatan bahwa huruf-huruf tersebut tersusun rapi secara vertikal.

Kita coba lagi font family berikutnya yaitu cursive. Tipe font cursive ini akan memberikan efek seperti tulisan tangan. Jadi huruf-hurufnya akan dibuat sedikit miring, sedikit naik ataupun turun. Terkadang kita juga bisa menjumpai tulisan bersambung pada jenis font-family ini. Jenis font cursive dapat kita gunakan pada konten tertentu seperti judul. Namun tidak disarankan untuk digunakan pada paragraf, karena akan menyebabkan mata lebih cepat lelah pada saat membaca.

Dan font family terakhir yang bisa kita coba adalah fantasy. Font family ini sangat jarang digunakan ya. Kalau dilihat dari namanya, fantasy, mungkin lebih cocok digunakan untuk konten cerita fiksi. Namun jenis font ini juga tidak disarankan untuk digunakan pada paragraf, karena menyebabkan mata cepat lelah pada saat membaca.

Selain menggunakan font family, kita juga bisa merujuk langsung ke nama font yang hendak kita gunakan. Sebagai contoh, saya ganti nilai font-family menjadi Arial. Kita simpan dan refresh browser. Maka font yang digunakan akan berubah menjadi Arial.

Apakah yang akan terjadi apabila pada browser atau sistem operasi pengunjung situs kita ternyata tidak memiliki font Arial? Nah hal inilah yang selalu menghantui para perancang tampilan situs, karena browser akan mengganti font Arial menjadi font standart yang digunakan pada sistem operasi tersebut. Artinya situs yang sudah kita rancang dengan baik agar tampilannya seperti ini, mungkin memiliki tampilan yang berbeda di komputer pengunjung kita. Bisa saja font yang digunakan memiliki tinggi atau lebar yang berbeda, dan bisa menyebabkan hal-hal yang tidak diinginkan.

Sebagai contoh misalkan kita merancang judul Belajar CSS Lanjutan dengan ukuran yang pas-pasan untuk satu baris, dan karena browser mengganti font-nya dengan ukuran yang lebih lebar, maka bisa saja berubah menjadi dua baris. Dan hal-hal seperti ini akan merubah user experience yang dirasakan oleh pengunjung situs kita.

Untuk mempelajari lebih lanjut mengenai hal ini, kita bisa membuka situs cssfontstack.com. Pada situs ini kita bisa menjumpai jenis-jenis font yang paling sering digunakan, dan sudah digrup berdasarkan font family-nya. Jadi kita bisa melihat daftar font yang termasuk ke dalam keluarga sans-serif, kemudian serif, monospace, fantasy, dan script disini adalah cursive.

Dan kita perhatikan lagi pilihan pertama sans-serif adalah Arial. Ini adalah font default yang paling banyak diinstall di seluruh sistem operasi. Bisa kita lihat disini bahwa pada Windows telah terinstall 99,84% dan di Mac telah terinstall 98,74%. Sayangnya situs ini tidak menghitung sistem operasi Linux. Artinya kalau kita menggunakan font Arial untuk menampilkan konten kita, maka ada 0,16% dari pemakai sistem operasi Windows yang gagal menampilkan konten kita seperti yang kita inginkan. Sedangkan pada sistem operasi Mac ada 1,26% yang gagal. Disini kemungkinan gagal pada Mac lebih besar.

Namun apabila kita melihat font lain, misalnya Lucida Grande. Disini dituliskan bahwa tidak ada yang memiliki font ini pada Windows, sedangkan pada Mac 100% ada. Kemungkinan font Lucida Grande sudah langsung preinstall di seluruh Mac, sehingga kemungkinannya bisa 100%. Apabila kita menggunakan font ini, maka artinya para pengguna Windows sudah pasti gagal untuk menampilkan konten kita.

Kebetulan saya menggunakan Windows. Kita coba ya. Pertama saya copy dahulu tulisan nama font Lucida Grande. Dan saya paste ke nilai properti font-family. Kita simpan dan lihat hasilnya pada browser. Dan browser pun gagal menampilkan font Lucide Grande. Seharusnya kita mendapatkan font sans-serif, sedangkan ini adalah font serif default yang digunakan browser apabila kita tidak mengatur font-family.

Nah, untuk mengatasi hal ini, kita menggunakan yang namanya fallback font stacks. Jadi apabila kita ingin menggunakan font Lucida Grande, maka kita bisa klik ke font tersebut untuk melihat lebih detail. Dan pada sebelah kanannya kita bisa mendapatkan kode css untuk mengatur font-family dengan menggunakan Lucida Grande. Kita copy kode tersebut dan paste ke kode kita.

Kita lihat kembali kode yang kita paste barusan. Disini kita telah menggunakan fallback font stacks. Browser akan mencoba untuk menggunakan font yang kita tuliskan disini, dimulai dari yang paling kiri, yaitu Lucida Grande. Apabila pada sistem operasi kita tidak ada Lucida Grande, maka browser akan mencoba menggunakan Lucida Sans Unicode yang masih mirip dengan font Lucida Grande. Apabila masih tidak ada, maka akan menggunakan Lucida Sans, dan seterusnya mencoba ke Geneva, Verdana. Dan yang terakhir akan menggunakan font family sans-serif.

Kita simpan dan refresh browser. Sekarang font sudah berganti dengan font yang mirip dengan Lucida Grande. Dan tampilan dari situs kita sudah menjadi lebih menarik.

Selanjutnya kita akan mengubah font untuk h1 dan h2 pada situs kita, dengan menggunakan jenis font serif. Kita kembali ke situs CSSFontStack.Com. Dan sebagai contoh saya pilih Lucida Bright. Kita klik ke font tersebut, dan kita copy kode font-family-nya.

Kita buka kembali kode CSS kita. Kita tambahkan h1, h2 dan kemudian kurung kurawal. Dan kita paste kode font-family tadi ke dalam kurung kurawal. Artinya kita hendak menggunakan font Lucida Bright pada seluruh tag h1 dan h2 kita.

Kita simpan dan refresh browser. Oke, sekarang kita memiliki judul yang menggunakan font serif, dan paragraf yang menggunakan font sans-serif.

Dalam video ini kita sudah mempelajari cara mengatur font menggunakan fallback dengan bantuan dari situs cssfontstack.com. Namun disini masih ada beberapa kelemahan ya.

Kelemahan pertama adalah belum tentu pengunjung kita menggunakan font yang sama persis dengan yang kita rancang. Karena bisa saja pada browser atau sistem operasi yang digunakan oleh pengunjung tidak memiliki font tersebut, sehingga browser akan mengganti penggunakan font ke alternatif lain yang masih mirip dengan font yang kita pilih.

Kelemahan kedua adalah kita hanya bisa memilih font-font yang umumnya digunakan oleh perancang situs. Kurang lebih hanya font-font yang tercantum pada halaman ini saja ya. Lama kelamaan orang akan menjadi bosan karena melihat font yang sama terus-menerus di semua situs. Hal ini akan menyebabkan situs kita akan terkesan jadul.

Kelemahan ini nantinya akan bisa kita atasi dengan menggunakan embedded font, sebagai contohnya adalah Google Fonts. Bagaimana caranya? Nanti akan kita bahas di video berikutnya.

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.