Mở bất kỳ website nào ra, che hết hình ảnh và nút bấm đi, thứ còn lại gần như toàn bộ là chữ. Menu, tiêu đề, đoạn văn, nhãn nút, giá tiền, dòng cảnh báo, dòng chân trang đều là chữ. Đó là lý do typography không phải lớp trang trí thêm vào sau cùng, mà là nền móng của giao diện. Một bố cục đẹp nhưng chữ khó đọc vẫn là một sản phẩm hỏng.
Bài viết này đi qua sáu quyết định cốt lõi của typography cho web: chọn font, ghép cặp font, dựng thang cỡ chữ, chỉnh line-height, kiểm soát độ dài dòng và phân cấp chữ. Mỗi phần đều có con số tham chiếu từ nguồn uy tín để bạn áp dụng được ngay, không phải đoán.
Vì sao chữ chiếm phần lớn UI
Giao diện web vận hành chủ yếu bằng đọc. Người dùng quét trang theo kiểu chữ F hoặc Z chứ ít khi đọc tuần tự từng dòng, theo các nghiên cứu eye-tracking (theo dõi điểm nhìn) của Nielsen Norman Group. Khi mắt quét nhanh như vậy, cỡ chữ, độ đậm và khoảng cách giữa các khối chữ chính là thứ giúp người dùng tìm đúng phần họ cần. Typography tốt làm cho việc quét trở nên dễ dàng; typography kém biến mỗi lần đọc thành một bài tập căng mắt.
Vì vậy đầu tư vào chữ thường cho lợi ích cao hơn nhiều so với thêm hiệu ứng động hay đồ hoạ. Nó tác động đến mọi trang, mọi thiết bị, mọi người dùng.
Chọn font cho web
Với phần lớn website, font sans-serif (chữ không chân) là lựa chọn an toàn cho thân bài vì nét chữ sạch, hiển thị tốt trên màn hình ở nhiều độ phân giải. Một số nguyên tắc khi chọn:
- Ưu tiên font có nhiều độ đậm (weight — độ dày nét chữ, ví dụ 400, 600, 700). Bạn cần ít nhất một độ thường và một độ đậm để tạo phân cấp.
- Kiểm tra bộ ký tự tiếng Việt. Nhiều font đẹp nhưng dấu thanh đặt lệch hoặc thiếu chữ. Luôn gõ thử một câu tiếng Việt đủ dấu trước khi chốt.
- Ưu tiên font biến thiên (variable font — một file chứa nhiều độ đậm và độ rộng) để giảm số file tải về, giúp trang nhẹ hơn.
- Đừng dùng quá hai họ font trong một dự án. Nhiều hơn dễ thành rối.
Ví dụ thực chiến: web22.dev dùng một họ font duy nhất là Inter Tight cho cả tiêu đề lẫn thân bài, chỉ phân biệt bằng độ đậm và cỡ chữ. Khi nhận thiết kế website cho khách, Web22 cũng giữ đúng nguyên tắc một hệ chữ thống nhất như vậy. Một font khoẻ vẫn đủ tạo cá tính nếu thang cỡ chữ rõ ràng.
Ghép cặp font
Khi muốn hai font, nguyên tắc cốt lõi là tương phản. Một cặp đáng tin cậy là serif (chữ có chân) cho tiêu đề kết hợp sans-serif cho thân bài, vì sự khác biệt cấu trúc tự nó tạo phân cấp thị giác ngay lập tức. Cặp font sai thường là hai font quá giống nhau, khiến người đọc cảm thấy có gì lệch mà không gọi tên được.
| Cách ghép | Hiệu ứng | Khi nào dùng |
|---|---|---|
| Serif tiêu đề + sans-serif thân bài | Tương phản rõ, có chiều sâu biên tập | Blog, trang nội dung dài |
| Một họ font, đổi độ đậm và cỡ | Gọn, thống nhất, dễ bảo trì | App, dashboard, landing |
| Hai sans-serif khác đặc tính | Tinh tế, dễ hỏng nếu thiếu kinh nghiệm | Khi đã quen ghép font |
Thang cỡ chữ (typographic scale)
Thay vì chọn cỡ chữ ngẫu hứng, hãy dựng một thang typographic scale: tập các cỡ chữ tuân theo một tỷ lệ toán học cố định để mọi cỡ ăn nhịp với nhau. Khái niệm này được Robert Bringhurst phổ biến và sau đó được điều chỉnh cho web. Các tỷ lệ phổ biến gồm 1.2 (tương phản nhẹ), 1.25 (vừa) và 1.333 (mạnh hơn).
Lấy cỡ thân bài 16px làm gốc và tỷ lệ 1.25, một thang cỡ chữ thật trông như sau:
--text-sm: 13px (chú thích, nhãn nhỏ)
--text-base: 16px (thân bài, cỡ gốc)
--text-lg: 20px (dẫn nhập, sapo)
--text-xl: 25px (h3)
--text-2xl: 31px (h2)
--text-3xl: 39px (h1)Mỗi cỡ bằng cỡ trước nhân 1.25 rồi làm tròn. Cách này cho phân cấp chữ đều đặn mà không cần ngồi căn từng số. Trên thiết bị nhỏ, có thể dùng clamp() để cỡ chữ co giãn mượt theo chiều rộng màn hình thay vì nhảy bậc đột ngột.
Lưu ý cỡ gốc: Material Design khuyến nghị 16px cho thân bài để dễ đọc; trên di động nên giữ tối thiểu 14–15px, đừng nhỏ hơn.
Line-height và độ dài dòng
Hai con số này quyết định cảm giác đọc thoải mái hay mệt:
- Line-height (khoảng cách dòng): với thân bài, đặt 1.5 đến 1.6 lần cỡ chữ. Material Design lấy 1.5 làm mốc. Tiêu đề lớn thì giảm xuống khoảng 1.1–1.2 vì chữ to đã đủ thoáng. Dòng càng dài thì line-height nên càng nhỉnh lên để mắt không lạc dòng.
- Độ dài dòng (line length): giữ trong khoảng 50–75 ký tự mỗi dòng, với 66 ký tự là mốc lý tưởng được trích dẫn nhiều nhất, bắt nguồn từ Bringhurst. Trên di động dọc, mục tiêu hẹp hơn, khoảng 30–50 ký tự. Đừng để đoạn văn kéo dài hết chiều ngang màn hình lớn; dùng
max-widthđể khoá độ rộng khối chữ.
Một mẹo nhanh: với cỡ thân bài 16px, đặt max-width khối nội dung quanh 65ch (đơn vị ch tính theo độ rộng ký tự) là tự động rơi vào vùng dễ đọc.
Phân cấp chữ
Phân cấp chữ là việc dùng cỡ, độ đậm và khoảng cách để báo cho người đọc cái gì quan trọng và cái gì phụ. Đây là nơi typography gặp phân cấp thị giác trong thiết kế: thang cỡ chữ chính là công cụ chủ lực để dựng trật tự thị giác.
Vài quy tắc giữ phân cấp sạch:
- Mỗi cấp tiêu đề phải khác cấp kế nó đủ rõ, bằng cỡ hoặc độ đậm, không phải bằng màu mè.
- Trên màn hình nhỏ, rút gọn số cấp tiêu đề. Ba cấp rõ ràng hoạt động tốt hơn năm cấp khi không gian dọc hạn chế.
- Tránh viết hoa toàn bộ cho đoạn dài, vì chữ hoa làm chậm tốc độ đọc. Dành nó cho nhãn ngắn.
Checklist typography trước khi giao trang
- Thân bài tối thiểu 16px trên desktop, không nhỏ hơn 14px trên mobile.
- Line-height thân bài 1.5–1.6; tiêu đề lớn 1.1–1.2.
- Độ dài dòng nằm trong 50–75 ký tự (đã khoá bằng max-width).
- Mọi cỡ chữ lấy từ một thang typographic scale thống nhất.
- Đã kiểm tra tiếng Việt đủ dấu, không lệch không vỡ.
- Tối đa hai họ font, dùng độ đậm để tạo phân cấp.
Câu hỏi thường gặp
Cỡ chữ thân bài bao nhiêu là chuẩn cho web?
16px là mốc được Material Design khuyến nghị cho desktop. Trên di động giữ tối thiểu 14–15px. Đừng đặt thân bài nhỏ hơn vì sẽ căng mắt khi đọc dài.
Nên dùng serif hay sans-serif cho web?
Sans-serif là lựa chọn an toàn cho thân bài trên màn hình. Serif hợp làm tiêu đề để tạo tương phản và chất biên tập. Cặp serif tiêu đề + sans-serif thân bài là công thức đáng tin.
Typographic scale là gì?
Là tập cỡ chữ tuân theo một tỷ lệ cố định (ví dụ 1.25) từ cỡ gốc. Nó giúp các cỡ ăn nhịp với nhau và dựng phân cấp đều đặn thay vì chọn số ngẫu hứng.
Nếu bạn cần dựng nguyên một hệ chữ thống nhất cho website chứ không chỉ chỉnh vài cỡ, đội dịch vụ thiết kế UI/UX của Web22 vừa lên bản thiết kế vừa code đúng như bản thiết kế, nên thang cỡ chữ và line-height ra sản phẩm không sai một pixel. Đọc thêm về nguyên tắc thiết kế giao diện để ráp typography vào bức tranh lớn.