Tipografi

WCAG menyarankan baris tidak lebih dari 80 karakter dan jarak antarbaris paling sedikit 1.5 di dalam paragraf. Dua properti CSS menangani keduanya.

Memilih fon

font-family menerima daftar fon yang dipisahkan koma. Browser memakai fon pertama yang tersedia di perangkat pembaca, lalu turun ke fon berikutnya jika fon itu tidak ada. Selalu akhiri daftar dengan keluarga generik, serif, sans-serif, monospace, atau system-ui, supaya yang tampil tetap masuk akal apa pun yang terpasang. Nama fon yang mengandung spasi ditulis dalam tanda kutip, seperti "Noto Sans KR". system-ui memakai fon antarmuka sistem operasi, yang dirancang dengan baik, sudah ada di perangkat, dan mencakup banyak sistem tulisan.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

Kamu juga bisa memuat file fon dari servermu sendiri dengan aturan @font-face, atau dari layanan fon. Fon web memberi halaman karakternya sendiri, tetapi setiap fon adalah unduhan yang menunda tampilnya teks, dan fon Korea, Tionghoa, serta Jepang bisa berukuran beberapa megabita karena memuat ribuan glif. Muat ketebalan sesedikit yang kamu perlukan, dan tetap sediakan cadangan yang baik di daftar.

Ukuran, ketebalan, dan tinggi baris

font-size mengatur ukuran; seperti dijelaskan di unit warna dan satuan, rem membuat teks tetap selaras dengan pengaturan pembaca. font-weight berkisar dari 100 (tipis) sampai 900 (hitam), dengan 400 sebagai normal dan 700 sebagai tebal; kata kunci normal dan bold berarti 400 dan 700. Sebuah fon hanya punya ketebalan yang dibuat perancangnya, jadi meminta 300 pada fon yang hanya punya 400 dan 700 akan memberimu ketebalan yang terdekat.

line-height mengatur jarak antarbaris. Beri nilai angka polos tanpa satuan, seperti 1.6: artinya 1.6 kali ukuran fon setiap elemen, sehingga judul dan teks kecil masing-masing mendapat jarak yang pas. Nilai bersatuan, seperti 24px, dihitung sekali lalu diwariskan sebagai panjang tetap, yang terlalu rapat untuk judul besar. Teks isi biasanya enak dibaca antara 1.4 dan 1.7; kriteria keberhasilan WCAG 1.4.8 menyarankan paling sedikit 1.5 di dalam paragraf. Judul besar lebih bagus jika lebih rapat, sekitar 1.1 sampai 1.3.

Panjang baris dan perataan

Baris yang sangat panjang melelahkan: mata kehilangan posisi saat melompat kembali ke awal baris berikutnya. WCAG 1.4.8 menyarankan tidak lebih dari 80 karakter per baris (40 untuk bahasa Tionghoa, Jepang, dan Korea). Cara mudah menerapkannya adalah max-width dalam satuan ch pada paragraf, misalnya max-width: 65ch. text-align mengatur perataan: left (atau start) paling mudah dibaca untuk teks panjang dalam bahasa yang ditulis dari kiri ke kanan, center cocok untuk judul pendek, dan justify bisa memunculkan celah tidak rata di antara kata.

Sentuhan akhir kecil

text-transform: uppercase menampilkan teks dalam huruf kapital tanpa mengubah HTML, jadi sumbernya tetap memakai ejaan biasa dan gayanya bisa diubah nanti di satu tempat. MDN mencatat bahwa deretan huruf kapital yang panjang lebih sulit dibaca sebagian orang, termasuk penyandang disleksia, jadi pakailah hanya untuk label pendek, dan tambahkan sedikit letter-spacing, misalnya 0.08em. text-decoration menggambar garis: underline, line-through, atau none untuk menghapus garis bawah tautan (sisakan tanda lain bahwa itu tautan). Pembaca yang butuh ruang lebih mungkin menimpa jarak yang kamu atur; WCAG 1.4.12 meminta halaman tetap berfungsi saat tinggi baris 1.5, jarak huruf 0.12em, jarak kata 0.16em, dan jarak paragraf 2em, jadi hindari kotak bertinggi tetap yang bisa memotong teks.