Font size trong CSS: px, rem, em, từ khóa và ví dụ

Cách đặt cỡ chữ trong CSS

Thuộc tính font-size quy định kích thước của chữ. Đặt nó cho bất kỳ phần tử nào, mọi phần chữ bên trong sẽ kế thừa kích thước đó, trừ khi một phần tử con tự đặt cỡ riêng.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Để đổi cỡ chữ trong HTML, bạn vẫn dùng CSS. Thêm thuộc tính style (<p style="font-size: 20px;">) hoặc một quy tắc trong stylesheet. Thẻ <font size="5"> từ những năm 1990 đã lỗi thời và không có chỗ trong một trang web hiện đại.

Các đơn vị font-size nhận

Nhập một giá trị và xem kích thước trình duyệt tính ra:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Thử 20px, 2em, 150%, x-large, smaller và 5vw. Một giá trị không hợp lệ, như big, sẽ bị bỏ qua và chữ giữ kích thước hợp lệ gần nhất.

rem và em: khác biệt dễ gây lỗi

rem luôn nhìn vào phần tử gốc, nên 1.2rem có cùng kích thước ở bất kỳ đâu. em nhìn vào phần tử cha, nên kích thước bị nhân lên khi các phần tử lồng nhau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

Hộp em trong cùng có cỡ 16 × 1,2 × 1,2 × 1,2 = 27,648px. Hộp rem trong cùng vẫn là 19,2px. Việc nhân dồn này hữu ích cho một component mà các phần cần co giãn cùng nhau, và gây bất ngờ ở mọi chỗ khác. Trang đơn vị so sánh mọi đơn vị độ dài.

Từ khóa: từ xx-small đến xx-large

Các từ khóa tuyệt đối ứng với một thang cố định quanh medium, bằng cỡ chữ mặc định của người dùng (16px nếu họ chưa đổi):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Với mặc định 16px, small là 13px, large là 18px, x-large là 24px và xx-large là 32px. Từ khóa dùng nhanh thì được, nhưng một design system thường muốn có thang riêng bằng rem.

Cỡ chữ co giãn với clamp()

Một tiêu đề cần to lên theo màn hình nhưng không bao giờ quá nhỏ hay quá to chỉ cần một lần gọi clamp(): giá trị tối thiểu, một kích thước ưu tiên có co giãn, và giá trị tối đa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

Trong khung xem trước rộng 800px, 5vw là 40px, nằm giữa 24px và 48px, nên giá trị này được dùng. Trang clamp trình bày chi tiết về chữ co giãn.

Đặt cỡ chữ gốc cho cả trang

Đặt cỡ chữ một lần trên body (hoặc html) và đặt mọi thứ khác theo tỷ lệ với nó:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Tránh mẹo html { font-size: 62.5%; } trừ khi mọi kích thước trên trang sau đó đều đặt bằng rem, và đừng bao giờ đặt cỡ px cố định trên html: nó ghi đè cỡ chữ mà người đọc đã chọn trong trình duyệt, điều mà một số người cần đến mới đọc được.

Lưu ý về khả năng tiếp cận

• Chữ thân trang từ 16px trở lên là mức sàn tốt để đọc trên màn hình.
• Kích thước bằng rem và em đi theo cài đặt cỡ chữ mặc định của người dùng. Kích thước bằng px đi theo mức thu phóng trang nhưng không theo cài đặt đó.
• Trên iPhone, Safari phóng to trang khi bạn chạm vào ô nhập có cỡ chữ dưới 16px. Đặt font-size: 1rem trở lên cho các trường form để tránh việc này.

Lỗi thường gặp

• Dùng thẻ <font>. Thẻ này đã lỗi thời. Dùng thuộc tính font-size.
• Cỡ em lồng nhau to hoặc nhỏ đi mất kiểm soát. Dùng rem trừ khi bạn muốn nhân dồn.
• Cỡ px cố định trên html. Nó ghi đè cài đặt cỡ chữ riêng của người đọc.
• Quên rằng tiêu đề đã có sẵn kích thước. <h1> mặc định là 2em, nên cần h1 { font-size: 1em; } nếu bạn muốn nó bằng cỡ chữ thân trang.
• Chỉ dùng đơn vị viewport. font-size: 3vw sẽ khó đọc trên điện thoại và quá to trên màn hình rộng. Hãy bọc nó trong clamp().