Setelah warna, penataan huruf adalah lapisan penampilan yang paling menentukan kesan sebuah halaman. CSS mengelompokkan pengaturan ini ke dalam properti font-family, font-size, font-weight, line-height, hingga beberapa properti text-* untuk perataan dan hiasan teks. Masing-masing terlihat kecil, tetapi kombinasi kelimanya menghasilkan perbedaan besar pada keterbacaan. Pada Chapter ini kita membangun tipografi artikel yang nyaman dibaca dengan properti-properti tersebut.

font-family dan Fallback Stack #

Properti font-family menentukan jenis huruf yang dipakai teks. Browser hanya dapat menampilkan huruf yang terpasang di sistem pengunjung, sehingga kita menuliskan daftar pilihan berurutan yang disebut fallback stack:

css Stack font dengan fallback 
body {
  font-family: "Segoe UI", Arial, sans-serif;
}

Browser mencoba jenis huruf pertama, lalu beralih ke pilihan berikutnya bila tidak tersedia, hingga menemukan yang cocok. Anggota terakhir daftar sebaiknya nama generik seperti sans-serif, serif, atau monospace agar selalu ada pilihan akhir. Jenis huruf bawaan sistem (system fonts) menjadi pilihan praktis karena cepat: tidak ada file font tambahan yang perlu diunduh.

font-size dengan px dan rem #

Properti font-size mengatur ukuran huruf, dan dua unit paling lazim adalah px dan rem. Nilai px menetapkan ukuran pasti dalam piksel, misalnya font-size: 16px. Nilai rem bersifat relatif terhadap ukuran huruf elemen akar dokumen, yang bawaannya 16 piksel; dengan demikian 2rem sama dengan 32 piksel pada pengaturan bawaan. Manfaat rem terletak pada keramahannya: bila pengunjung memperbesar ukuran huruf lewat pengaturan browser, seluruh teks yang memakai rem ikut membesar secara seragam, sebuah kebutuhan yang penting bagi pengunjung dengan penglihatan terbatas.

font-weight dan line-height #

Properti font-weight mengatur ketebalan huruf dengan angka 100 hingga 900; nilai 400 adalah ketebalan normal dan 700 adalah tebal. Sebagian jenis huruf sistem hanya menyediakan dua tingkat, normal dan tebal, sehingga nilai di luar keduanya dapat dibulatkan browser ke yang tersedia. Properti line-height mengatur jarak antarbaris; nilai tanpa satuan seperti 1.6 berarti 1,6 kali ukuran huruf. Untuk paragraf, jarak 1.5 hingga 1.6 menjadi titik awal yang nyaman dibaca, sedangkan nilai terlalu rapat membuat baris-baris sulit dibedakan.

text-align, text-decoration, dan letter-spacing #

Properti text-align meratakan teks secara horizontal dengan nilai left, right, center, atau justify. Nilai justify sebaiknya dipakai hemat karena spasi antarkata menjadi tidak rata dan memperlambat pembacaan. Properti text-decoration mengatur hiasan garis pada teks; link secara bawaan bergaris bawah, dan garis tersebut adalah petunjuk visual utama bagi pengunjung, sehingga menghilangkannya dengan text-decoration: none perlu pertimbangan matang. Properti letter-spacing menambah jarak antarhuruf dan paling sering dipakai pada label kecil berhuruf kapital agar tidak terasa sesak.

Contoh Tipografi Artikel #

Contoh berikut menyusun tipografi lengkap untuk satu artikel resep:

html tipografi-artikel.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tipografi Artikel Resep</title>
  <style>
    body {
      font-family: Georgia, serif;
      line-height: 1.6;
      color: #1f2937;
    }

    h1 {
      font-size: 2rem;
      font-weight: 700;
    }

    .label {
      font-size: 0.875rem;
      letter-spacing: 0.1em;
    }

    a {
      color: #1a6b54;
    }

    a:hover {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <article>
    <p class="label">Kelas Masak Mingguan</p>
    <h1>Rendang Sapi Siti</h1>
    <p>Resep keluarga ini memakai santan kelapa asli dan dimasak dengan api kecil selama empat jam.</p>
    <p>Bumbu dihaluskan tanpa pengganti agar rasa aslinya terjaga. Baca juga <a href="#variasi">variasi bumbu rendang</a> pada halaman resep lain.</p>
  </article>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Seluruh teks memakai jenis huruf serif Georgia dengan jarak baris 1.6
  - Judul "Rendang Sapi Siti" berukuran 32 piksel dan tebal
  - Label "Kelas Masak Mingguan" kecil dengan jarak antarhuruf yang lebar
  - Link "variasi bumbu rendang" hijau bergaris bawah
  - Garis bawah link menghilang saat kursor berada di atasnya

Mari kita telaah peran setiap baris penting di atas:

  1. Baris 8-12 CSS (body { ... }): stack font serif, jarak baris 1.6, dan warna teks gelap menjadi dasar seluruh halaman.
  2. Baris 14-17 CSS (h1 { ... }): judul ditetapkan 2rem (32 piksel pada ukuran bawaan) dengan ketebalan 700.
  3. Baris 19-22 CSS (.label { ... }): label kategori dibuat kecil (0.875rem) dengan letter-spacing lebar agar terasa seperti keterangan.
  4. Baris 24-26 CSS (a { ... }): link diberi warna hijau; garis bawah bawaannya tetap dipertahankan sebagai petunjuk link.
  5. Baris 28-30 CSS (a:hover): pseudo-class yang menghilangkan garis bawah saat kursor di atas link, menggantinya dengan perubahan warna sebagai umpan balik.
  6. Baris 35 HTML (<p class="label">): paragraf label menjadi sasaran selector class .label.
  7. Baris 38 HTML (paragraf isi): teks mewarisi line-height 1.6 dari body sehingga nyaman dibaca dalam dua baris.

Tipografi yang baik tidak memerlukan deklarasi banyak: satu stack font, satu ukuran dasar, jarak baris yang lega, dan beberapa pengecualian untuk judul serta label. Bekal ini menuntaskan setengah bagian pertama section; Chapter berikutnya mulai membahas ruang di sekeliling elemen lewat margin dan padding.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

tipografi-artikel.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tipografi Artikel Resep</title>
  <style>
    body {
      font-family: Georgia, serif;
      line-height: 1.6;
      color: #1f2937;
    }

    h1 {
      font-size: 2rem;
      font-weight: 700;
    }

    .label {
      font-size: 0.875rem;
      letter-spacing: 0.1em;
    }

    a {
      color: #1a6b54;
    }

    a:hover {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <article>
    <p class="label">Kelas Masak Mingguan</p>
    <h1>Rendang Sapi Siti</h1>
    <p>Resep keluarga ini memakai santan kelapa asli dan dimasak dengan api kecil selama empat jam.</p>
    <p>Bumbu dihaluskan tanpa pengganti agar rasa aslinya terjaga. Baca juga <a href="#variasi">variasi bumbu rendang</a> pada halaman resep lain.</p>
  </article>
</body>
</html>