Setelah Episode 2.02, halaman profil belajarmu sudah punya kartu-kartu yang rapi. Kalau dilihat sekilas, halaman itu tampak selesai.
Tetapi coba baca paragrafnya pelan-pelan, seolah kamu pengunjung yang baru datang. Barisnya memanjang mengikuti lebar jendela, jarak antarbaris terasa rapat, dan mata harus bekerja sedikit lebih keras dari seharusnya.
Itu wajar, karena sejauh ini kita baru mengurus kotak-kotaknya. Isi kotaknya, yaitu teks, belum pernah kita urus sungguh-sungguh. Padahal sebagian besar isi web adalah teks. Orang datang ke blog untuk membaca, dan halaman yang nyaman dibaca akan ditinggali lebih lama.
Ilmu mengatur teks supaya nyaman dibaca punya nama: tipografi. Episode ini membahas tiga bahan utamanya, yaitu ukuran huruf, jarak antarbaris, dan panjang baris, lalu menutupnya dengan dua hal yang sudah kamu cicil sejak awal: warna yang kontras dan ruang kosong yang cukup.
Yang Akan Dipelajari
Di akhir episode ini, kamu akan bisa mengatur ukuran huruf dengan sadar, bukan sekadar menerima bawaan browser. Property font-size yang di Episode 2.01 baru mampir sekilas di class catatan akan mendapat penjelasan utuhnya.
Kamu akan mengenal line-height, pengatur jarak antarbaris, lengkap dengan satu kejutan kecil: value-nya justru dianjurkan ditulis tanpa satuan.
Kamu juga akan membatasi panjang baris teks memakai max-width, lalu meletakkan kolom bacanya di tengah halaman dengan margin-left dan margin-right, dua property per-sisi yang di Episode 2.02 sempat dijanjikan "menyusul saat dibutuhkan". Sekarang waktunya.
Terakhir, kebiasaan kontras dari Episode 2.01 kita naikkan kelasnya: bukan lagi sekadar menyipitkan mata, tetapi memeriksa dengan patokan angka.
Kita belum membahas cara mendatangkan font baru dari internet, satuan ukuran selain px, atau menyusun kotak berdampingan. Yang terakhir itu jatahnya episode depan.
Tipografi: Mengurus Bagian yang Paling Banyak Dibaca
Tipografi adalah seni dan aturan menata teks supaya nyaman dibaca. Kedengarannya seperti urusan desainer, tetapi di web ia urusan semua orang yang menulis CSS, karena hampir semua halaman web isinya teks.
Kabar baiknya: tipografi web yang baik tidak dimulai dari memilih font yang keren. Ia dimulai dari tiga pertanyaan sederhana. Seberapa besar hurufnya? Seberapa lega jarak antarbarisnya? Dan seberapa panjang satu baris kalimatnya?
Tiga pertanyaan itu yang akan kita jawab satu per satu.
Ukuran Huruf: font-size
Kamu sebenarnya sudah pernah memakai font-size saat membuat class catatan di Episode 2.01. Sekarang penjelasan utuhnya.
Tanpa diberi tahu apa-apa, browser menampilkan teks paragraf pada ukuran 16px. Itu ukuran bawaan yang sudah dipikirkan baik-baik, jadi patokannya sederhana: untuk teks bacaan utama, jangan lebih kecil dari itu. Ukuran 16px sampai 18px adalah wilayah yang nyaman bagi kebanyakan orang.
Mengatur ukuran dasar halaman dilakukan di tempat yang sudah kamu kenal: aturan body.
body {
font-size: 17px;
}Karena semua konten tinggal di dalam <body>, ukuran ini diwariskan ke seluruh halaman, sama seperti font-family dan color yang kamu atur di Episode 2.01. Heading tetap lebih besar dari paragraf; browser menghitung ukurannya relatif terhadap ukuran dasar ini.
Satu hal yang perlu dilawan sejak awal: godaan mengecilkan huruf supaya halaman terlihat "muat banyak". Halaman yang memuat banyak teks kecil tidak membuat orang membaca lebih banyak; ia membuat orang berhenti membaca.
Jarak Antarbaris: line-height
Sekarang bahan kedua. Perhatikan dua paragraf dengan isi yang sama: satu dengan baris yang berdempetan, satu dengan baris yang diberi napas. Yang kedua selalu terasa lebih ringan, walau hurufnya sama besar.
Jarak antarbaris itu diatur oleh property line-height:
body {
font-size: 17px;
line-height: 1.6;
}Dan di sinilah kejutannya. Di Episode 2.02 kita bilang angka tanpa satuan tidak berlaku di CSS, dengan pengecualian nol. Sekarang kamu bertemu pengecualian kedua, dan yang ini justru dianjurkan: line-height boleh diisi angka polos.
Angka polos itu artinya kelipatan dari ukuran huruf. line-height: 1.6 berarti tinggi satu baris adalah 1,6 kali ukuran hurufnya; pada huruf 17px, barisnya setinggi kira-kira 27px. Kalau suatu hari ukuran hurufnya berubah, jarak barisnya ikut menyesuaikan secara otomatis. Itulah kenapa angka polos dianjurkan.
Untuk teks bacaan, nilai antara 1,5 sampai 1,7 adalah wilayah nyaman. Nilai bawaan browser sedikit di bawah itu, sekitar 1,2 kali; cukup untuk teks pendek, tetapi terasa sesak untuk artikel yang panjang.
Panjang Baris: Kolom yang Tidak Melelahkan
Bahan ketiga jarang disadari, tetapi efeknya paling besar: panjang baris.
Coba perhatikan buku atau koran. Barisnya tidak pernah membentang selebar halaman penuh; teks selalu diberi kolom. Alasannya sederhana: saat satu baris terlalu panjang, mata harus menempuh perjalanan jauh ke kanan, lalu kesulitan menemukan awal baris berikutnya di kiri. Baca sepuluh baris seperti itu dan kepalamu ikut bergerak seperti menonton tenis.
Patokan yang enak: satu baris berisi kira-kira delapan sampai dua belas kata. Di layar, itu setara lebar sekitar 600px sampai 700px untuk huruf seukuran punya kita.
Cara membatasinya memakai property baru: max-width, lebar maksimal sebuah element. Kita pasang di main, rumah konten utama halaman:
main {
max-width: 640px;
}Artinya: main boleh menyempit mengikuti jendela yang kecil, tetapi tidak boleh melebar melewati 640px. Kata max di depannya penting; ia batas atas, bukan lebar paksa.
Tetapi kalau kamu coba sekarang, ada yang janggal: kolomnya menempel ke kiri, dan sisi kanan halaman jadi lapang sebelah. Kita ingin kolomnya di tengah.
Di sinilah janji Episode 2.02 dibayar. Selain margin serba-sisi, ada property per-sisi seperti margin-left dan margin-right. Keduanya menerima satu value istimewa bernama auto, yang artinya: serahkan ke browser, bagi rata sisa ruangnya.
main {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}Sisa ruang di kiri dan kanan dibagi sama besar, dan kolom baca pun berdiri di tengah halaman. Resep tiga baris ini adalah salah satu pola paling sering dipakai di seluruh web; hampir semua blog yang nyaman kamu baca memakainya, termasuk halaman yang sedang kamu baca sekarang.
Warna dan Kontras: Sekarang dengan Angka
Di Episode 2.01, kamu sudah membawa pulang kebiasaan memeriksa kontras dengan menyipitkan mata. Kebiasaan itu tetap berlaku, tetapi tipografi yang serius memeriksa dengan angka.
Kontras antara warna teks dan warna latar bisa dihitung sebagai perbandingan. Patokan yang dipakai luas di dunia aksesibilitas: teks bacaan sebaiknya punya kontras minimal 4,5 banding 1 terhadap latarnya. Kamu tidak perlu menghitungnya sendiri; ada alat pemeriksa kontras online yang menerima dua kode hex dan langsung memberi angkanya, salah satunya menunggu di bagian rujukan.
Mari kita audit palet halaman kita sendiri. Teks utama #333333 di atas latar #f9f7f2: kontrasnya sekitar 11 banding 1, jauh di atas patokan. Catatan footer #5f5f5f di atas #e8eef5: sekitar 5 banding 1, masih di atas 4,5. Palet kita lulus, tidak ada yang perlu diubah.
Itu juga pelajaran yang bagus: memeriksa kontras tidak selalu berakhir dengan mengubah warna. Kadang hasilnya adalah kepastian bahwa pilihanmu sudah benar, dan kepastian itu yang membuatmu berani memakai palet yang sama di halaman-halaman berikutnya.
Whitespace: Ruang Kosong yang Bekerja
Bahan terakhir bukan property baru, melainkan cara pandang. Di Episode 2.02 kita sudah bicara: ruang kosong bukan ruang terbuang. Sekarang kita rasakan versi satu halamannya.
Ritme baca adalah pola yang tercipta dari ukuran dan jarak yang konsisten: heading yang ukurannya jelas bertingkat, paragraf yang jaraknya seragam, bagian-bagian yang diberi napas cukup. Saat ritmenya konsisten, pembaca tidak perlu berpikir; matanya tahu ke mana harus pergi.
Yang merusak ritme biasanya bukan kekurangan hiasan, melainkan ketidakteraturan: satu heading besar sekali sementara yang lain kecil, jarak yang kadang rapat kadang renggang. Maka aturan praktisnya: pilih sedikit ukuran, pakai secara konsisten.
Untuk halaman kita, dua tingkat heading sudah cukup: h1 judul halaman, h2 judul bagian. Kita beri ukuran yang tenang, cukup beda untuk terasa bertingkat, tidak perlu dramatis:
h1 {
font-size: 28px;
}
h2 {
font-size: 20px;
}Praktik Kecil: Merapikan Halaman Artikel
Waktunya menggabungkan semuanya. Buka style.css hasil Episode 2.02. Kali ini kita tidak banyak menambah aturan baru; kita menyempurnakan aturan yang sudah ada.
Ini penting dan sengaja: daripada menulis aturan body kedua di bagian bawah file, kita mengedit aturan body yang sudah ada. Kamu sudah tahu dari Episode 2.02 apa akibat punya dua aturan untuk selector yang sama di posisi berjauhan: salah satunya menang diam-diam, dan suatu hari kamu bingung sendiri. File yang rapi lebih mudah dirawat daripada file yang sekadar jalan.
Ubah empat aturan ini di style.css sehingga isinya menjadi seperti berikut. Aturan lain biarkan seperti adanya.
body {
font-family: Arial, sans-serif;
font-size: 17px;
line-height: 1.6;
color: #333333;
background-color: #f9f7f2;
}
h1 {
color: #1f3a5f;
font-size: 28px;
}
h2 {
color: #1f3a5f;
font-size: 20px;
}
main {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: 16px;
}Simpan, lalu refresh browser. Perubahannya terasa sekaligus tenang: konten berdiri di kolom tengah yang lebarnya pas untuk membaca, barisnya bernapas, heading bertingkat dengan rapi, sementara header dan footer tetap membentang penuh sebagai bingkai halaman.
Kalau semua langkah tadi benar, halamanmu kurang lebih akan tampil seperti ini:
Kolom kontennya kini berdiri di tengah dengan lebar yang nyaman; kalau jendela browsermu lebar, ruang kosong di kiri dan kanan itu memang disengaja. Foto profil masih kotak abu-abu pengganti, dan isi teksmu boleh berbeda; yang penting ritmenya terasa.
Sebelum lanjut, lakukan satu eksperimen supaya ilmunya menempel di tangan. Ubah line-height menjadi 1 lalu refresh: barisnya langsung berdesakan. Ubah menjadi 2.5: paragrafnya seperti daftar antrean. Kembalikan ke 1.6. Lakukan hal yang sama pada max-width dengan 400px lalu 900px, rasakan bedanya, dan kembalikan ke 640px. Angka final boleh kamu geser sesuai selera; yang penting sekarang kamu menggesernya dengan sadar.
Kesalahan Umum Pemula
Kesalahan pertama: memberi line-height satuan px dengan nilai lebih kecil dari ukuran hurufnya, misalnya line-height: 14px pada huruf 17px. Hasilnya baris-baris saling menumpuk seperti kertas yang ditumpuk miring. Pakai angka polos, dan masalah ini hilang sendiri.
Kesalahan kedua: menambah aturan body atau main baru di bagian bawah file, bukan mengedit yang sudah ada. Dua-duanya "jalan", tetapi kamu baru saja menanam jebakan cascade untuk dirimu sendiri di masa depan. Satu selector, satu rumah.
Kesalahan ketiga: memakai width padahal maksudnya max-width. width: 640px memaksa lebar tetap 640px bahkan di jendela yang lebih sempit, dan halamanmu tiba-tiba punya scroll ke samping. max-width membolehkan menyempit; itulah yang kita mau.
Kesalahan keempat: margin-left: auto dan margin-right: auto terasa tidak berpengaruh. Penyebabnya hampir selalu satu: elementnya belum punya max-width. Tanpa batas lebar, element memenuhi seluruh baris dan tidak ada sisa ruang untuk dibagi.
Kesalahan kelima: mengecilkan huruf atau merapatkan baris demi halaman yang terlihat padat dan "profesional". Pembaca tidak mengukur profesionalitas dari kepadatan; mereka hanya merasakan lelah, lalu pergi. Kalau ragu, kembali ke wilayah nyaman: huruf 16px sampai 18px, line-height 1,5 sampai 1,7.
Rangkuman
Tipografi web berdiri di atas tiga bahan: ukuran huruf yang cukup (16px sampai 18px untuk bacaan), jarak antarbaris yang lega (line-height 1,5 sampai 1,7, ditulis sebagai angka polos), dan panjang baris yang terkendali (kolom sekitar 600px sampai 700px lewat max-width, ditengahkan dengan margin-left: auto dan margin-right: auto).
Kontras warna kini punya patokan angka: minimal 4,5 banding 1 untuk teks bacaan, dan palet halaman kita lulus audit tanpa perubahan. Ritme baca dijaga dengan sedikit ukuran yang dipakai konsisten.
Halaman profil belajarmu sekarang bukan cuma tertata, tetapi juga betah dibaca: kolom tengah yang tenang, baris yang bernapas, heading yang bertingkat jelas. Perubahan hari ini nyaris tak terlihat satu per satu, tetapi terasa besar saat digabungkan. Begitulah tipografi bekerja.
Berikutnya
Sejauh ini semua kotak di halaman kita tersusun menurun, satu di bawah yang lain. Dua kartu section itu misalnya, sebenarnya cukup ramping untuk berdiri berdampingan, tetapi kita belum punya alat untuk menyusunnya begitu.
Di Episode 2.04, alatnya datang: flexbox dan grid, dua cara CSS menyusun kotak berdampingan. Kita juga akan berkenalan dengan satu element HTML yang selama ini sengaja disimpan, karena baru di sanalah ia benar-benar dibutuhkan.
Belajar Lebih Lanjut
Kalau ingin belajar lebih lanjut, kamu juga bisa membaca beberapa rujukan berikut.