Mở phần kiểm tra mã của một trang web làm lâu năm, bạn có thể đếm được hai mươi cỡ chữ khác nhau: 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26… Mỗi cỡ được thêm vào bởi một người, vào một ngày, để giải quyết một chỗ. Không cỡ nào sai, nhưng tổng thể thì lủng củng: tiêu đề cấp ba ở trang này to hơn tiêu đề cấp hai ở trang khác.
Thang cỡ chữ (type scale) giải quyết chuyện này bằng một quy tắc đơn giản: chọn cỡ thân bài, chọn một tỉ lệ, và mọi cỡ khác được tính bằng cách nhân hoặc chia liên tiếp cho tỉ lệ đó. Kết quả là 6–8 cỡ có quan hệ với nhau, thay cho hai mươi cỡ ngẫu nhiên.
Chọn cỡ thân bài trước
Mọi thứ bắt đầu từ cỡ chữ thân bài, vì đó là chữ được đọc nhiều nhất.
- Web: 16px là mức mặc định của trình duyệt và là điểm xuất phát hợp lý. Trang đọc dài, người đọc lớn tuổi, phông có chiều cao chữ thường nhỏ thì 17–18px. Chữ thân bài dưới 15px trên điện thoại thường khó đọc với tiếng Việt vì dấu nhỏ.
- Ấn phẩm in: sách và tạp chí thường 9–11pt. Tài liệu văn phòng in A4 thường 10–12pt. Sách cho người lớn tuổi hoặc trẻ em cần lớn hơn.
- Trình chiếu: không nhỏ hơn khoảng 24pt cho thân chữ nếu chiếu trong phòng họp.
Chọn tỉ lệ
Tỉ lệ quyết định các bậc cách nhau bao xa. Nhiều tỉ lệ được đặt tên theo quãng âm nhạc, một thói quen có từ các nhà sắp chữ cổ điển:
| Tỉ lệ | Tên thường gọi | Tính cách | Hợp với |
|---|---|---|---|
| 1,125 | Quãng hai trưởng | Rất nhẹ, các bậc gần nhau | Giao diện dày thông tin, bảng điều khiển |
| 1,2 | Quãng ba thứ | Nhẹ nhàng | Ứng dụng, trang tài liệu |
| 1,25 | Quãng ba trưởng | Cân bằng | Phần lớn trang web, blog |
| 1,333 | Quãng bốn đúng | Rõ ràng | Trang tin, tạp chí trực tuyến |
| 1,5 | Quãng năm đúng | Mạnh, kịch tính | Trang giới thiệu, poster, trang đích |
| 1,618 | Tỉ lệ vàng | Rất mạnh | Tiêu đề lớn, ấn phẩm ít chữ |
Tỉ lệ càng lớn, tiêu đề càng to nhanh. Giao diện nhiều thông tin cần tỉ lệ nhỏ để không lãng phí chỗ; trang ít chữ, cần ấn tượng có thể dùng tỉ lệ lớn.
Tính thang cụ thể
Ví dụ: thân bài 16px, tỉ lệ 1,25. Nhân liên tiếp lên, chia liên tiếp xuống, rồi làm tròn:
- Bậc −2: 16 ÷ 1,25 ÷ 1,25 = 10,24 → 10px (chú thích rất nhỏ, dùng hạn chế)
- Bậc −1: 16 ÷ 1,25 = 12,8 → 13px (chú thích, nhãn)
- Bậc 0: 16px (thân bài)
- Bậc 1: 20 → 20px (tiêu đề cấp 4, đoạn dẫn)
- Bậc 2: 25 → 25px (tiêu đề cấp 3)
- Bậc 3: 31,25 → 31px (tiêu đề cấp 2)
- Bậc 4: 39,06 → 39px (tiêu đề cấp 1)
- Bậc 5: 48,8 → 49px (tiêu đề hiển thị lớn)
Làm tròn là điều bình thường; một số người làm tròn về số chẵn hoặc về bội số của 4 cho dễ căn lưới. Điều quan trọng là sau khi chốt thang, chỉ dùng các cỡ trong thang.
Thang trên điện thoại cần hẹp lại
Tiêu đề 49px đẹp trên màn máy tính nhưng trên điện thoại rộng khoảng 375px, một từ tiếng Việt dài như “nghiêng” đã chiếm phần lớn một dòng. Cách xử lý phổ biến:
- Giữ nguyên cỡ thân bài (hoặc tăng nhẹ).
- Dùng tỉ lệ nhỏ hơn cho màn hình nhỏ, ví dụ 1,2 trên điện thoại và 1,333 trên máy tính.
- Hoặc dùng cỡ chữ co giãn theo bề ngang màn hình, có giới hạn trên và dưới, để tiêu đề lớn dần mượt mà thay vì nhảy bậc.
Đơn vị: pt, px, rem và em
- pt (điểm): đơn vị in ấn, 1pt = 1/72 inch ≈ 0,353mm. Dùng trong phần mềm dàn trang và xử lý văn bản.
- px (điểm ảnh CSS): đơn vị logic trên màn hình, không phải điểm ảnh vật lý. Theo quy ước của web, 1px = 1/96 inch, nên 16px = 12pt.
- rem: bội số của cỡ chữ gốc của trang (thường 16px). 1,25rem = 20px. Ưu điểm lớn: khi người dùng tăng cỡ chữ mặc định trong trình duyệt (nhiều người lớn tuổi làm vậy), mọi thứ tính bằng rem phóng theo.
- em: bội số cỡ chữ của phần tử cha. Tiện cho khoảng cách phụ thuộc cỡ chữ (đệm trong nút), nhưng lồng nhiều tầng dễ nhân dồn ngoài ý muốn.
Quy tắc thực hành cho web: đặt cỡ chữ bằng rem, đặt khoảng cách dòng bằng số không đơn vị (1,5 thay vì 24px) để nó tự theo cỡ chữ.
Thang không chỉ là cỡ
Một bậc trong thang thường đi kèm các thông số khác, và nên được định nghĩa thành một “kiểu chữ” trọn gói:
- Khoảng cách dòng giảm dần khi cỡ tăng: thân bài 1,5–1,6; tiêu đề lớn 1,1–1,25 (với tiếng Việt, kiểm dấu chạm).
- Khoảng cách chữ giảm nhẹ ở cỡ lớn: tiêu đề rất lớn thường trông thưa, có thể giảm nhẹ khoảng cách chữ.
- Độ đậm: tiêu đề nhỏ (bậc 1–2) thường cần đậm hơn để phân biệt với thân bài vì chênh lệch cỡ ít.
Checklist dựng thang trong một buổi
- Chọn phông và cỡ thân bài, kiểm với đoạn văn tiếng Việt thật.
- Chọn tỉ lệ theo loại sản phẩm.
- Tính 6–8 bậc, làm tròn, ghi thành bảng.
- Gán mỗi bậc cho một vai trò (thân bài, chú thích, tiêu đề cấp 1–4, số liệu lớn).
- Định nghĩa khoảng cách dòng và độ đậm cho từng bậc.
- Dựng một trang mẫu dùng đủ mọi bậc, xem trên điện thoại và máy tính.
- Kiểm kê các cỡ đang dùng trong sản phẩm cũ và quy về thang mới.
Việc nên làm tiếp: đếm số cỡ chữ khác nhau trong dự án hiện tại của bạn. Nếu vượt quá mười, hãy dựng thang và gom lại — đây là một trong những thay đổi rẻ nhất mà hiệu quả thấy rõ nhất về độ chỉn chu.
Câu hỏi thường gặp
Cỡ chữ thân bài website nên là bao nhiêu?
16px là điểm xuất phát phổ biến; trang đọc dài hoặc người đọc lớn tuổi nên dùng 17–18px. Với tiếng Việt trên điện thoại, dưới 15px thường khó đọc vì dấu nhỏ.
Thang cỡ chữ là gì?
Là tập hợp các cỡ chữ được tính từ cỡ thân bài nhân hoặc chia liên tiếp cho một tỉ lệ. Nó giúp các cỡ chữ có quan hệ với nhau và giảm số cỡ ngẫu nhiên.
Nên chọn tỉ lệ nào cho thang cỡ chữ?
Giao diện nhiều thông tin dùng tỉ lệ nhỏ như 1,125–1,2; blog và trang web thông thường dùng 1,25–1,333; trang ít chữ, cần ấn tượng dùng 1,5 trở lên.
16px bằng bao nhiêu pt?
Theo quy ước của web, 1px bằng 1/96 inch và 1pt bằng 1/72 inch, nên 16px bằng 12pt.
Nên dùng px hay rem cho cỡ chữ web?
Nên dùng rem, vì khi người dùng tăng cỡ chữ mặc định của trình duyệt, chữ tính bằng rem sẽ phóng theo. Khoảng cách dòng nên dùng số không đơn vị.
