Tipografi adalah urusan rupa huruf: jenis font, ukuran, ketebalan, dan jarak antarbaris. Di CSS, semuanya diatur lewat properti yang namanya diawali font-, ditambah line-height.
🧪 Tebakan cepat: kamu menulis nama font yang gak terpasang di perangkat pengunjung. Teksnya hilang gak? Tebak dulu, jawabannya ada di bagian "Font cadangan".
Mengatur huruf paragraf
p {
font-family: Georgia, serif;
font-size: 20px;
font-weight: 400;
}
padalah selector: aturannya buat semua<p>. Tiap baris di dalam{ }adalah deklarasi: properti, titik dua, nilai, titik koma.font-familymemilih jenis huruf.Georgia, serifartinya pakai Georgia, kalau gak ada pakai font serif apa pun.font-size: 20px;membuat ukuran hurufnya 20 piksel. Angka dan satuannya nempel:20px, bukan20 px.font-weightmengatur ketebalan, dari100(tipis) sampai900(paling tebal).400sama dengannormal,700sama denganbold.
Hasilnya, paragraf berhuruf Georgia, 20 piksel, dengan ketebalan biasa.
Font cadangan
font-family boleh berisi beberapa nama, dipisah koma. Browser memakai yang pertama terpasang di perangkat pengunjung. Akhiri daftarnya dengan keluarga umum: serif (huruf berkait, kayak koran), sans-serif (tanpa kait), atau monospace (semua huruf sama lebar, kayak di editor kode). Nama font yang ada spasinya ditulis dalam tanda kutip: "Times New Roman".
Jawaban tebakan: gak hilang. Browser pindah ke nama berikutnya di daftar, dan kalau semuanya gak ada, ke font bawaannya.
Satu nama saja juga sah, misalnya font-family: Arial;.
Jarak antarbaris dengan line-height
line-height mengatur tinggi tiap baris. Angka tanpa satuan artinya kali ukuran huruf: dengan font-size: 18px, line-height: 1.6 bikin tiap baris setinggi 18 kali 1.6, yaitu 28.8 piksel. Paragraf panjang nyaman dibaca di sekitar 1.5 sampai 1.6.
Satuan ukuran: px, em, rem
px: ukuran tetap.em: dihitung dari ukuran huruf induknya.2emdi dalam induk 16px jadi 32px, dan kalau bersarang bisa berlipat.rem(root em): dihitung dari ukuran huruf elemen<html>, bawaannya 16px.1.5remsama dengan 24px.
Pengguna yang menaikkan ukuran huruf di setelan browser gak terbantu kalau semua ukuran dikunci dalam px, karena teksnya gak ikut membesar. rem ikut setelan itu, jadi pakai rem buat ukuran huruf di proyek nyata. Latihan di sini memakai px biar angkanya gampang dicek.
⚠️ Jebakan yang sering ketemu
- Spasi atau satuan yang hilang.
32 pxdanfont-size: 32;sama-sama diabaikan. Tulis32px. Cumaline-heightyang enak ditulis tanpa satuan. - Nama font salah ketik.
Georgaigak ketemu, jadi browser diam-diam pakai font cadangan. emyang berlipat.1.5emdi dalam1.5emjadi 2.25 kali ukuran asal.
TL;DR: font-family memilih jenis huruf (tulis cadangannya, akhiri dengan serif, sans-serif, atau monospace), font-size ukurannya (32px, angka nempel satuan), font-weight ketebalannya (bold sama dengan 700), dan line-height jarak antarbarisnya (angka tanpa satuan, sekitar 1.5). rem dihitung dari <html>, em dari induknya, dan rem paling ramah buat pengguna yang memperbesar huruf.
