Tipografi

Fitur web: font-size rem unit em line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max(), dan clamp() Unit area pandang

Praktik terbaik keseluruhan

  • Gunakan angka tanpa satuan untuk line-height (misalnya, 1.5) guna memastikan penskalaan relatif selama pewarisan ukuran font.
  • Gunakan overflow-wrap: break-word (atau anywhere) untuk memuat URL panjang.
  • JANGAN gunakan px untuk ukuran font. Pilih rem untuk mengikuti preferensi ukuran font browser pengguna (ukuran font root), atau em/persentase untuk ukuran kontekstual.

Keterbacaan

  • Hindari baris teks yang panjang: Batasi blok paragraf hingga lebar maksimum 80 karakter.
  • Hindari spasi kosong yang berlebihan: Hindari text-align: justify karena dapat membuat teks lebih sulit dibaca. Jika Anda harus menggunakannya, gabungkan dengan hyphens: auto untuk menghindari spasi kosong yang berlebihan di antara kata.
  • Jangan gunakan font Ornate: Hilangkan typeface kursif untuk konten bacaan utama.
  • Jangan mengandalkan huruf besar semua untuk penekanan: Lebih baik gunakan huruf tebal untuk penekanan visual, dan gunakan <em>/<strong> jika penekanannya bersifat semantik.
  • Batasi penekanan secara keseluruhan: Penekanan akan kehilangan makna jika diterapkan di mana-mana — terapkan hanya jika penekanan tersebut mengubah cara konten harus dibaca.
  • Mendukung preferensi zoom pengguna: Izinkan pengguna mengubah ukuran teks hingga 200% tanpa kehilangan konten atau fungsi.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Pengemasan teks

  • Gunakan text-wrap: balance untuk judul yang seimbang dan konten yang mirip judul (misalnya, <th>)
  • Gunakan text-wrap: pretty untuk teks isi panjang (paragraf, kutipan blok, dll.)
  • Gunakan text-wrap: balance atau text-wrap: pretty dengan sengaja, JANGAN terapkan pada * karena memiliki biaya performa.
  • Hindari text-wrap: balance pada elemen dengan kotak yang terlihat (latar belakang, batas, bayangan, dll.) karena tidak mengubah lebar penampung, melainkan hanya memengaruhi cara pengemasan teks dalam lebar tersebut. Hal ini dapat menyisakan ruang kosong di akhir penampung, yang biasanya tidak diinginkan.

Tipografi Responsif

  • LAKUKAN penggabungan unit relatif area pandang dan relatif font di clamp() untuk ukuran font yang diskalakan dengan ukuran area pandang sekaligus memastikan ukuran font tetap dalam rentang yang diinginkan. Misalnya, clamp(2rem, 1rem + 5vw, 4rem). Sesuaikan proporsi unit relatif area pandang dan relatif font untuk mengontrol seberapa cepat ukuran font berubah.
  • JANGAN gunakan vw saja untuk ukuran font tanpa clamp(), karena dapat menskalakan teks terlalu kecil atau terlalu besar pada layar ekstrem.