Font Style

Teks miring membawa nada berbeda: nama buku, istilah asing, atau kalimat yang disampaikan dengan penekanan. Property font-style mengatur kemiringan itu dengan tiga nilai — normal, italic, dan oblique. Di balik hasil yang sekilas tampak serupa, italic dan oblique bekerja dengan cara yang berbeda, dan perbedaan itu menentukan kualitas tampilan akhir. Pada chapter ini kita membedah ketiga nilai tersebut, hubungannya dengan elemen em dan i, serta konvensi gaya untuk kutipan.

Tiga Nilai font-style #

.istilah-asing { font-style: italic; }
.catatan-tepi  { font-style: oblique; }
.keterangan    { font-style: normal; }

Demo berikut menampilkan ketiga nilai berdampingan:

italic versus oblique #

italic adalah varian miring yang digambar khusus oleh perancang font: lengkungan, proporsi, bahkan bentuk hurufnya memang dibuat berbeda untuk kecepatan menulis, bukan sekadar huruf tegak yang dicondongkan. oblique hanyalah huruf tegak yang dimiringkan oleh browser tanpa penyesuaian bentuk.

Karena itu italic dari font yang baik terlihat lebih menyatu dan lebih mudah dibaca daripada oblique. Sisanya tergantung ketersediaan: bila keluarga font tidak menyediakan varian italic, browser secara otomatis memiringkan huruf tegak — hasilnya praktis sama dengan oblique. Keduanya punya sudut kemiringan yang lazim sekitar 12–14 derajat, sehingga pada font tanpa varian italic, italic dan oblique sering tampak identik.

em, i, dan Restyle yang Disengaja #

Elemen <em> dan <i> tampil miring karena gaya bawaan browser menerapkan font-style: italic — bukan kebetulan, melainkan konvensi. Kita bebas menimpanya bila konteksnya menuntut:

/* ikon dari icon font tidak perlu miring */
i.ikon { font-style: normal; }

/* penekanan tetap miring, ditambah tebal sedikit */
em { font-weight: 500; }

Aturannya sederhana: gaya bawaan boleh diterima apa adanya, tetapi setiap keputusan tampilan perlu disengaja dan eksplisit di CSS.

Konvensi untuk Blockquote #

Banyak desain editorial menata blockquote dengan teks miring sebagai tanda suara orang lain — suatu konvensi, bukan gaya bawaan browser:

blockquote {
  font-style: italic;
  border-left: 3px solid #1f6f54;
  margin: 16px 0;
  padding: 4px 0 4px 16px;
}

Untuk kutipan yang panjang, pertimbangkan font-style: normal kembali — kemiringan yang menumpuk selama beberapa paragraf melelahkan mata.

Ringkasan #

font-style mengatur kemiringan dengan normal, italic, dan oblique; italic adalah varian yang dirancang khusus sedangkan oblique kemiringan sintetis — keduanya bisa tampak sama bila font tidak menyediakan varian italic. Elemen em dan i mewarisi gaya miring dari browser dan boleh kita restyle secara sengaja, sementara blockquote miring adalah konvensi desain yang mudah diterapkan. Setelah bentuk dan tebal huruf beres, chapter berikutnya mengatur jarak antarbaris lewat line-height.