Font Weight CSS: Teks Bold dan Nilai 100 sampai 900

Cara membuat teks tebal di CSS

font-weight mengatur seberapa tebal huruf-hurufnya. bold (sama dengan 700) membuat teks tebal, dan normal (sama dengan 400) adalah teks biasa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

Heading, <th>, <b>, dan <strong> tebal secara default karena stylesheet bawaan browser, jadi font-weight: normal adalah cara menghilangkan efek tebalnya. Untuk kapan memakai <b> atau <strong> di HTML itu sendiri, lihat HTML bold.

Skala angka: 100 sampai 900

Angka-angka ini punya nama standar yang diikuti keluarga font:

Angka apa pun dari 1 sampai 1000 valid, jadi 450 dan 650 juga diizinkan. Apakah kamu melihat perbedaannya bergantung pada font: browser hanya bisa menggambar ketebalan yang memang dimiliki font itu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui adalah font antarmuka sistem operasi, yang biasanya punya banyak ketebalan. Jika setiap baris di atas terlihat seperti salah satu dari dua ketebalan saja, font sistemmu hanya punya regular dan bold.

Kenapa sebuah ketebalan tidak menunjukkan perubahan

Sebuah font adalah kumpulan file, sering kali satu file per ketebalan. Saat ketebalan yang persis tidak ada, browser memilih yang terdekat yang dimilikinya:

• Untuk 500, browser mencoba 500, lalu ketebalan yang lebih tipis, lalu yang lebih tebal.
• Untuk 600 ke atas, browser mencoba ketebalan yang lebih tebal dulu, lalu yang lebih tipis.
• Jika sama sekali tidak ada file bold, sebagian besar browser memalsukannya dengan menebalkan huruf regular (synthetic bold).

Bandingkan font dengan banyak ketebalan dengan serif, yang di sebagian besar sistem hanya punya regular dan bold:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

Di kolom serif, 300 dan 500 biasanya jatuh ke versi regular dan 600 ke versi bold. Itulah jawaban untuk sebagian besar pertanyaan "font-weight tidak berfungsi": CSS-nya benar, font-nya yang tidak punya ketebalan itu. Variable font (satu file dengan sumbu ketebalan) menggambar setiap nilai di dalam rentang ketebalannya dengan mulus.

bolder dan lighter

bolder dan lighter relatif terhadap ketebalan yang diwarisi elemen. Keduanya melompat ke kelompok ketebalan berikutnya alih-alih menambah jumlah yang tetap:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Pola nyata: skala ketebalan dalam variabel

Pilih tiga atau empat ketebalan untuk seluruh situs lalu beri nama, alih-alih menyebar angka di mana-mana:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

Kesalahan umum

• Berharap setiap angka terlihat berbeda. Hanya ketebalan yang dimiliki font yang tampil berbeda.
• Memakai <b> untuk label tombol. Beri gaya pada tombol dengan font-weight; simpan <b> dan <strong> untuk teks.
• Memberi tanda kutip pada angka. font-weight: "700" tidak valid dan diabaikan. Tulis font-weight: 700.
• Bold untuk penekanan di mana-mana. Jika semuanya tebal, tidak ada yang menonjol. Pertahankan teks isi di 400.
• Ketebalan tipis untuk teks kecil. 100 sampai 300 di ukuran kecil sulit dibaca, terutama di atas background dengan kontras rendah.