Font weight trong CSS: in đậm, thang 100 đến 900 và ví dụ

Cách in đậm chữ bằng CSS

font-weight quy định nét chữ dày hay mỏng. bold (tương đương 700) làm chữ đậm, còn normal (tương đương 400) là chữ thường.

<!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>

Tiêu đề, <th>, <b> và <strong> mặc định in đậm do stylesheet riêng của trình duyệt, nên font-weight: normal là cách bỏ in đậm. Để biết khi nào dùng <b> hay <strong> ngay trong HTML, xem in đậm trong HTML.

Thang số: từ 100 đến 900

Các con số có tên chuẩn mà các họ font tuân theo:

Mọi số từ 1 đến 1000 đều hợp lệ, nên 450 và 650 cũng được. Bạn có thấy khác biệt hay không tùy vào font: trình duyệt chỉ vẽ được những độ đậm mà font thực sự có.

<!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 là font giao diện của hệ điều hành, thường có nhiều độ đậm. Nếu mọi dòng ở trên trông như chỉ có hai mức, font hệ thống của bạn chỉ có chữ thường và chữ đậm.

Vì sao đổi độ đậm mà không thấy thay đổi

Một font là một bộ tệp, thường mỗi độ đậm một tệp. Khi thiếu đúng độ đậm cần dùng, trình duyệt chọn độ đậm gần nhất mà nó có:

• Với 500, nó thử 500, rồi các mức mảnh hơn, rồi các mức đậm hơn.
• Với 600 trở lên, nó thử các mức đậm hơn trước, rồi mới đến các mức mảnh hơn.
• Nếu hoàn toàn không có tệp chữ đậm, phần lớn trình duyệt sẽ giả lập bằng cách làm dày nét chữ thường (synthetic bold).

So sánh một font có nhiều độ đậm với serif, font mà trên phần lớn hệ thống chỉ có chữ thường và chữ đậm:

<!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>

Ở cột serif, 300 và 500 thường rơi về kiểu chữ thường còn 600 rơi về kiểu chữ đậm. Đó là câu trả lời cho phần lớn thắc mắc "font-weight không hoạt động": CSS không sai, chỉ là font thiếu độ đậm đó. Một variable font (một tệp duy nhất có trục độ đậm) vẽ mượt mọi giá trị trong khoảng độ đậm của nó.

bolder và lighter

bolder và lighter tính theo độ đậm mà phần tử kế thừa. Chúng nhảy sang nhóm độ đậm kế tiếp thay vì cộng thêm một lượng cố định:

<!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>

Mẫu thực tế: thang độ đậm bằng biến

Chọn ba hoặc bốn độ đậm cho toàn bộ trang web và đặt tên cho chúng, thay vì rải các con số khắp nơi:

: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); }

Lỗi thường gặp

• Mong mọi con số đều trông khác nhau. Chỉ những độ đậm có trong font mới hiển thị khác biệt.
• Dùng <b> cho nhãn nút. Định dạng nút bằng font-weight; để dành <b> và <strong> cho văn bản.
• Đặt con số trong dấu nháy. font-weight: "700" không hợp lệ và bị bỏ qua. Viết font-weight: 700.
• In đậm để nhấn mạnh ở khắp nơi. Khi mọi thứ đều đậm, không có gì nổi bật. Giữ chữ thân trang ở 400.
• Dùng độ đậm mảnh cho chữ nhỏ. Từ 100 đến 300 ở cỡ nhỏ rất khó đọc, nhất là trên nền có độ tương phản thấp.