Mở đầu — vì sao bài này quan trọng
Hãy thử tưởng tượng bạn vừa nhận một file thiết kế từ một bạn junior. Tiêu đề trang dùng cỡ 30px, tiêu đề phụ 23px, đoạn giới thiệu 17px, nội dung chính 15px, ghi chú 13px. Mỗi con số trông đều "hợp lý" khi đứng một mình, nhưng khi ghép lại trên cùng một trang, tổng thể lại có cảm giác lộn xộn, thiếu một mạch nhịp rõ ràng. Người dùng không nói được vì sao, họ chỉ cảm thấy trang web "trông không chuyên nghiệp".
Vấn đề ở đây không phải là gu thẩm mỹ. Vấn đề là bạn đang chọn cỡ chữ một cách ngẫu nhiên (random font sizes), không theo một hệ thống nào cả. Trong Bài 7 chúng ta đã hiểu về cấu tạo của một con chữ — anatomy của typeface. Bài 8 này sẽ trả lời câu hỏi tiếp theo và quan trọng hơn nhiều với công việc hằng ngày: làm sao chọn ra một bộ cỡ chữ ăn khớp với nhau?
Câu trả lời là Type Scale (thang cỡ chữ) và Modular Scale (thang module). Đây là một trong những công cụ giúp phân biệt designer nghiệp dư và designer chuyên nghiệp rõ rệt nhất. Khi bạn nắm được nó, bạn sẽ không bao giờ phải "đoán" cỡ chữ nữa — bạn có một hệ thống sinh ra mọi cỡ chữ một cách nhất quán, có lý do, và dễ bảo trì khi dự án lớn lên. Đây cũng là nền tảng cho design token về typography mà các bài sau sẽ nhắc tới.
Khái niệm cốt lõi
Type Scale là gì?
Type Scale là một tập hợp các cỡ chữ được chọn có chủ đích để dùng xuyên suốt một sản phẩm. Thay vì có 20 cỡ chữ rải rác, bạn chỉ có khoảng 5–8 bậc (steps), mỗi bậc có một vai trò rõ ràng: cỡ cho body, cho caption, cho H3, H2, H1, cho display lớn...
Điểm mấu chốt: các bậc này không được chọn ngẫu nhiên mà liên hệ với nhau qua một tỷ lệ (ratio) nhất quán. Giống như âm nhạc — các nốt trong một hợp âm nghe hài hòa vì chúng có quan hệ tần số toán học với nhau. Type scale làm điều tương tự cho thị giác.
Modular Scale — toán học đằng sau sự hài hòa
Modular Scale là cách tạo ra Type Scale bằng cách lấy một cỡ gốc (base size) rồi nhân hoặc chia liên tiếp cho một tỷ lệ (ratio).
Công thức rất đơn giản:
cỡ bậc kế tiếp = cỡ hiện tại × ratio
cỡ bậc nhỏ hơn = cỡ hiện tại ÷ ratio
Ví dụ, lấy base = 16px (cỡ body chuẩn của web) và ratio = 1.25 (Major Third — quãng ba trưởng), ta tính lên:
- 16 × 1.25 = 20px
- 20 × 1.25 = 25px
- 25 × 1.25 = 31.25px → làm tròn 31px
- 31.25 × 1.25 = 39px
- 39 × 1.25 = 48.8px → làm tròn 49px
- 16 ÷ 1.25 = 12.8px → làm tròn 13px
Vì sao tên các ratio lại liên quan đến âm nhạc?
Bạn sẽ thấy nhiều ratio được đặt tên theo quãng nhạc. Đó không phải trùng hợp — chúng dựa trên các tỷ lệ tần số mà tai người thấy dễ chịu, và hóa ra mắt người cũng có phản ứng tương tự với tỷ lệ thị giác. Các ratio phổ biến:
- 1.067 — Minor Second: rất nhẹ, các bậc gần nhau, hợp với giao diện dày đặc thông tin (dashboard, bảng dữ liệu).
- 1.125 — Major Second: tinh tế, tương phản thấp, thường dùng cho nội dung dài đọc nhiều.
- 1.200 — Minor Third: cân bằng, an toàn, dùng được cho hầu hết website thông thường.
- 1.250 — Major Third: phổ biến nhất cho web hiện đại, tương phản rõ giữa heading và body.
- 1.333 — Perfect Fourth: tương phản mạnh, heading nổi bật, hợp landing page.
- 1.414 — Augmented Fourth: dựa trên √2, rất kịch tính.
- 1.500 — Perfect Fifth: heading cực lớn so với body, hợp web mang tính editorial, nghệ thuật.
- 1.618 — Golden Ratio (tỷ lệ vàng): huyền thoại nhưng nhảy bậc rất nhanh, dễ "trống" ở khoảng giữa.
Nguyên tắc chọn ratio
Ratio càng lớn thì độ tương phản giữa các bậc càng cao — heading trông càng "to và oách" so với body. Nhưng đổi lại khoảng cách giữa các bậc cũng rộng ra, nên bạn dễ thiếu cỡ chữ ở vùng giữa, phải chèn thêm bậc thủ công.
Nguyên tắc thực dụng:
- Web giàu nội dung, cần đọc nhiều (blog, báo, tài liệu): chọn ratio nhỏ (1.125–1.25).
- Landing page, marketing, cần gây ấn tượng mạnh: chọn ratio lớn (1.333–1.5).
- Dashboard, app nhiều dữ liệu: ratio rất nhỏ (1.067–1.2) để tiết kiệm không gian.
Một điểm tinh tế: scale cho desktop và mobile có thể khác nhau
Một sai lầm phổ biến là dùng cùng một ratio cho mọi màn hình. Trên màn hình điện thoại hẹp, một heading 49px có thể tràn dòng xấu xí. Designer chuyên nghiệp thường dùng ratio nhỏ hơn cho mobile (ví dụ desktop 1.333, mobile 1.2) để heading vẫn nổi nhưng không quá khổ. Bài 18 về Fluid Typography sẽ cho bạn cách nội suy mượt giữa hai đầu này bằng clamp(); ở bài này ta chỉ cần nhớ rằng scale là một quyết định có thể thích ứng theo ngữ cảnh.
Tình huống thực tế
Ví dụ 1 — Tiki "dọn dẹp" cỡ chữ trên trang sản phẩm (bối cảnh giả định hợp lý)
Giả sử đội thiết kế của một sàn thương mại điện tử lớn như Tiki audit lại trang chi tiết sản phẩm và phát hiện trong CSS có tới 22 giá trị font-size khác nhau: 11px, 12px, 13px, 14px, 15px, 16px, 18px, 19px, 20px, 22px... Mỗi lần một team khác nhau làm một module (đánh giá, gợi ý, mô tả), họ tự chọn cỡ chữ theo cảm tính.
Hệ quả: tên sản phẩm ở khối "sản phẩm liên quan" là 15px, còn ở khối "sản phẩm vừa xem" lại là 16px — cùng vai trò nhưng lệch nhau, gây cảm giác thiếu chỉn chu. Đội thiết kế quyết định chuẩn hóa về một modular scale base 14px (vì giao diện e-commerce dày thông tin), ratio 1.2:
12 — 14 — 17 — 20 — 24 — 29
Toàn bộ 22 giá trị cũ được ánh xạ về 6 bậc này. Giá: 24px. Tên sản phẩm: 17px. Mô tả: 14px. Ghi chú vận chuyển: 12px.
Bài học rút ra: Type scale không chỉ làm trang đẹp hơn, nó còn là một quy ước chung giúp nhiều team làm việc cùng nhau mà vẫn ra kết quả nhất quán. Số lượng cỡ chữ giảm từ 22 xuống 6 cũng giúp CSS gọn hơn và dễ bảo trì hơn rất nhiều.
Ví dụ 2 — Một startup SaaS ở Singapore chọn sai ratio cho dashboard
Một startup SaaS B2B làm phần mềm quản lý kho ở Singapore thuê một designer mới. Bạn này yêu tỷ lệ vàng nên áp ratio 1.618 cho toàn bộ sản phẩm, base 16px. Thang ra là:
16 — 26 — 42 — 68...
Trên landing page thì tuyệt — heading 42px và 68px trông rất ấn tượng. Nhưng khi áp vào dashboard, thảm họa xảy ra: giữa body 16px và heading 26px có một khoảng trống quá lớn, không có cỡ nào cho các tiêu đề bảng, nhãn cột, sub-label. Designer buộc phải chèn tay 18px, 20px, 22px — phá vỡ chính cái hệ thống mình lập ra.
Sau khi review, đội quyết định tách hai scale: ratio 1.333 cho trang marketing (cần ấn tượng) và ratio 1.125 cho dashboard (cần nhiều bậc gần nhau, tiết kiệm không gian). Dashboard giờ có thang 13 — 14 — 16 — 18 — 20 — 23 — đủ độ chi tiết cho một giao diện dày dữ liệu.
Bài học rút ra: Không có ratio "đúng" tuyệt đối. Ratio đẹp về mặt toán học (như golden ratio) chưa chắc phù hợp với loại sản phẩm của bạn. Hãy chọn ratio dựa trên mật độ thông tin và mục tiêu của giao diện, không phải vì con số nghe "huyền thoại".
Ví dụ 3 — Blog cá nhân của một freelancer Hà Nội
Một bạn freelancer ở Hà Nội làm blog chia sẻ về nhiếp ảnh. Nội dung chủ yếu là bài viết dài, người đọc dành 5–10 phút mỗi bài. Bạn chọn base 18px (lớn hơn chuẩn 16px một chút để đọc đỡ mỏi mắt trên bài dài) và ratio 1.25:
14 — 18 — 23 — 29 — 36
Body 18px, H3 23px, H2 29px, H1 36px, caption ảnh 14px. Vì chỉ có 5 bậc và mỗi bậc một vai trò rõ, bạn này không bao giờ phân vân "ảnh caption nên để cỡ mấy" nữa — câu trả lời luôn là 14px.
Bài học rút ra: Với người làm một mình, type scale tiết kiệm thời gian quyết định và giữ cho cả blog nhất quán qua hàng trăm bài viết. Base size lớn hơn một chút (18px) là lựa chọn hợp lý cho nội dung đọc nhiều — đây là quyết định ngữ cảnh, không phải lúc nào cũng phải bám 16px.
Hướng dẫn từng bước
Đây là quy trình bạn có thể áp dụng cho bất kỳ dự án nào:
Bước 1 — Chọn base size. Mặc định web là 16px (kích thước font mặc định của trình duyệt, và là cỡ dễ đọc trên đa số màn hình). Nội dung đọc nhiều có thể nhích lên 17–18px. Dashboard dày dữ liệu có thể xuống 14px. Đây là điểm gốc, mọi cỡ khác sinh ra từ nó.
Bước 2 — Chọn ratio dựa trên loại sản phẩm. Nhắc lại: nội dung nhiều → ratio nhỏ (1.125–1.2); cần ấn tượng → ratio lớn (1.333–1.5); cân bằng chung → 1.25.
Bước 3 — Tính các bậc. Nhân base với ratio để lên, chia để xuống. Tính 2–3 bậc trên và 1–2 bậc dưới base là đủ cho hầu hết dự án. Đừng tạo quá 7–8 bậc — nhiều bậc quá thì lại thành ngẫu nhiên.
Bước 4 — Làm tròn về số nguyên. Mắt người không phân biệt được 31.25px và 31px, mà số lẻ thì khó nhớ và đôi khi render mờ. Hãy làm tròn về px nguyên (hoặc bội số 0.5). Sau khi làm tròn, hệ thống vẫn "đủ tốt" — đừng cầu toàn về độ chính xác toán học.
Bước 5 — Gán vai trò cho từng bậc. Đây là bước biến những con số thành một hệ thống dùng được. Ví dụ:
caption / label : 13px
body : 16px (base)
H3 / lead : 20px
H2 : 25px
H1 : 31px
display : 39px
Bước 6 — Lưu thành biến để tái sử dụng. Đừng để các con số nằm rải rác trong code. Hãy đặt chúng thành CSS variables (Bài 23 sẽ đi sâu) để cả dự án dùng chung một nguồn:
:root {
--text-caption: 0.8125rem; / 13px /
--text-body: 1rem; / 16px /
--text-lead: 1.25rem; / 20px /
--text-h2: 1.5625rem; / 25px /
--text-h1: 1.9375rem; / 31px /
--text-display: 2.4375rem; / 39px /
}
Lưu ý dùng đơn vị rem thay vì px cứng để tôn trọng cài đặt cỡ chữ của người dùng (quan trọng cho accessibility — Bài 42).
Bước 7 — Dùng công cụ để thử nhanh. Trang type-scale.com (Typescale) cho bạn nhập base + ratio và xem ngay kết quả trực quan, xuất luôn CSS. Đây là cách nhanh nhất để thử nghiệm vài ratio trước khi chốt.
Lỗi thường gặp & mẹo
Lỗi 1 — Tạo quá nhiều bậc. Nếu bạn có 10–12 bậc, bạn đã quay lại điểm xuất phát: ngẫu nhiên trá hình. Hãy giữ 5–8 bậc. Nếu thấy thiếu một cỡ ở giữa, hãy tự hỏi: liệu mình có thực sự cần thêm một vai trò mới, hay chỉ đang lười dùng cỡ đã có?
Lỗi 2 — Quên rằng line-height cũng cần đi theo scale. Cỡ chữ to và cỡ chữ nhỏ cần line-height khác nhau (chữ lớn cần line-height nhỏ hơn theo tỷ lệ). Đây là chủ đề riêng của Bài 9, nhưng hãy nhớ rằng type scale không sống một mình — nó luôn đi cùng các thuộc tính chữ khác.
Lỗi 3 — Chọn ratio quá lớn cho giao diện đông thông tin. Như ví dụ startup Singapore: golden ratio đẹp nhưng để lại "lỗ hổng" giữa các bậc. Nếu giao diện cần nhiều cấp tiêu đề gần nhau, ratio lớn sẽ phản tác dụng.
Lỗi 4 — Không làm tròn, để số lẻ tùm lum. font-size: 25.628px vừa khó nhớ vừa không đẹp hơn 25px chút nào. Làm tròn ngay từ đầu.
Mẹo 1 — Một dự án có thể có nhiều scale. Marketing site và app dashboard hoàn toàn có thể dùng hai ratio khác nhau, miễn là trong từng ngữ cảnh nó nhất quán.
Mẹo 2 — Đặt tên bậc theo vai trò, không theo cỡ. Đặt --text-h1 thay vì --text-31. Khi bạn đổi base size sau này, tên vai trò vẫn đúng còn tên theo cỡ thì sai bét.
Mẹo 3 — Test trên nội dung thật, không phải Lorem Ipsum đẹp đẽ. Tiêu đề tiếng Việt có dấu (như "Hướng dẫn đăng ký tài khoản") chiếm chiều cao khác chữ Latin không dấu vì có dấu thanh và dấu mũ. Hãy kiểm tra scale với chính nội dung tiếng Việt của bạn để không bị bất ngờ.
Bài tập thực hành
- Tự tay tính một thang. Lấy base 16px, ratio 1.25. Tính ra 4 bậc lên và 1 bậc xuống, làm tròn về px nguyên. Viết kết quả ra giấy. Sau đó so sánh với kết quả trên type-scale.com để kiểm tra.
- Audit một website. Mở một trang web bạn hay dùng (ví dụ một trang báo Việt Nam như VnExpress), bật DevTools, kiểm tra
font-sizecủa ít nhất 6 thành phần khác nhau (tiêu đề bài, sapo, body, caption ảnh, tên chuyên mục, ngày đăng). Ghi lại các cỡ và thử đoán xem họ có dùng modular scale không, base và ratio khoảng bao nhiêu.
- Thiết kế scale cho hai ngữ cảnh. Cho một dự án giả định gồm một landing page và một dashboard quản trị. Hãy chọn base + ratio cho từng phần và giải thích bằng một câu vì sao bạn chọn như vậy. Viết kết quả thành một bảng gồm: vai trò — cỡ px — cỡ rem.
- Chuyển thành CSS variables. Lấy thang ở bài tập 1, viết thành một khối
:root { ... }với các biến đặt tên theo vai trò (caption, body, lead, h2, h1, display) và đơn vị rem.
Tóm tắt
Type Scale là tập hợp 5–8 cỡ chữ có vai trò rõ ràng, dùng nhất quán trong cả sản phẩm. Modular Scale là cách tạo ra tập hợp đó bằng cách lấy một base size rồi nhân/chia liên tiếp cho một ratio, để các cỡ chữ có quan hệ toán học hài hòa với nhau thay vì được chọn ngẫu nhiên.
Những điểm cốt lõi cần nhớ:
- Cỡ chữ ngẫu nhiên gây cảm giác lộn xộn dù từng con số trông "ổn"; scale giải quyết điều đó bằng một nhịp tăng đều.
- Ratio nhỏ (1.067–1.2) cho giao diện dày thông tin; ratio lớn (1.333–1.5) cho trang cần gây ấn tượng; 1.25 là lựa chọn cân bằng phổ biến.
- Không có ratio đúng tuyệt đối — chọn theo mật độ thông tin và mục tiêu giao diện, không theo "danh tiếng" của con số.
- Làm tròn về px nguyên, giữ ít bậc, đặt tên theo vai trò, lưu thành CSS variables với đơn vị rem.
- Một dự án có thể có nhiều scale cho các ngữ cảnh khác nhau (marketing vs dashboard, desktop vs mobile).