Bài 6 — Typography Scale & Type System — UI Design and Design Handoff

Mở đầu — vì sao bài này quan trọng

Hãy tưởng tượng bạn mở một file Figma của đồng nghiệp và thấy các cỡ chữ thế này: 13px, 15px, 17px, 22px, 23px, 31px, 46px. Không có logic nào cả — mỗi lần cần một tiêu đề mới, người thiết kế lại gõ đại một con số "trông có vẻ ổn". Kết quả là giao diện trông lộn xộn, dev không biết dùng cỡ nào cho đúng, và khi cần chỉnh một chỗ thì phải sửa hàng chục nơi thủ công.

Typography chiếm khoảng 90% nội dung của hầu hết các sản phẩm digital. Người dùng đọc chữ nhiều hơn là nhìn hình. Vì vậy một type system — hệ thống chữ được định nghĩa rõ ràng, có quy luật — không phải là chuyện "làm cho đẹp", mà là xương sống quyết định độ dễ đọc, tính nhất quán, và tốc độ làm việc của cả team.

Trong bài này, chúng ta tập trung vào hai thứ cụ thể và có thể áp dụng ngay: type scale (thang cỡ chữ được sinh ra từ một tỷ lệ toán học) và type system (bộ các style chữ được đặt tên, gán role rõ ràng để tái sử dụng). Đây là nền tảng. Ở các bài sau bạn sẽ dựng type system này trong Figma bằng text styles và variables — nhưng trước hết, bạn phải hiểu tại sao chọn từng con số.

Khái niệm cốt lõi

Type scale là gì và tại sao dùng tỷ lệ cố định

Type scale (thang cỡ chữ) là tập hợp các cỡ chữ mà bạn cho phép mình sử dụng trong sản phẩm. Thay vì tùy hứng chọn số, bạn sinh ra thang này từ một tỷ lệ (ratio) cố định.

Cách hoạt động: bạn chọn một cỡ nền tảng (base size), thường là cỡ body text — ví dụ 16px. Sau đó nhân liên tiếp với một hệ số để đi lên, và chia để đi xuống.

Ví dụ với base 16px và ratio 1.25 (Major third):

16 (base)
16 × 1.25 = 20
20 × 1.25 = 25
25 × 1.25 = 31.25 ≈ 31
31 × 1.25 = 39
39 × 1.25 = 49

Đi xuống: 16 ÷ 1.25 = 12.8 ≈ 13 (dùng cho caption, label nhỏ).

Kết quả là một chuỗi số có quan hệ tỷ lệ nhất quán với nhau. Mắt người nhận diện được sự hài hòa này giống như tai nghe nhận ra các nốt nhạc cùng một điệu — thực tế các tên gọi như "Minor third", "Major third", "Perfect fourth" đều mượn từ lý thuyết âm nhạc, gọi chung là modular scale.

Chọn ratio nào cho dự án của bạn

Đây là phần quan trọng nhất và cũng hay bị bỏ qua. Ratio càng lớn thì độ tương phản giữa các cỡ chữ càng mạnh, tiêu đề càng "hét to" so với body.

Minor second (1.067) và Major second (1.125) — bước nhảy rất nhỏ. Phù hợp giao diện cực kỳ dày đặc thông tin, nơi bạn cần nhiều bậc chữ mà không muốn chúng chênh nhau quá.
Minor third (1.2) — bước nhảy vừa phải, an toàn cho UI dày đặc như admin dashboard, bảng dữ liệu tài chính, công cụ nội bộ. Tiêu đề không lấn át nội dung, tiết kiệm không gian dọc.
Major third (1.25) — lựa chọn "quốc dân" cho phần lớn web app và trang marketing. Cân bằng tốt giữa phân cấp rõ ràng và sự gọn gàng.
Perfect fourth (1.333) và Golden ratio (1.618) — bước nhảy lớn, tạo cảm giác kịch tính, sang trọng. Phù hợp landing page, trang thương hiệu, editorial nơi tiêu đề cần gây ấn tượng mạnh.

Nguyên tắc mentor muốn bạn ghi nhớ: thông tin càng dày, ratio càng nhỏ; nội dung càng "biểu cảm", ratio càng lớn. Một dashboard ngân hàng dùng golden ratio sẽ khiến tiêu đề chiếm hết màn hình và đẩy dữ liệu quan trọng xuống dưới — sai hoàn toàn về mặt công năng.

Type scale ≠ Type system

Cần phân biệt rõ hai khái niệm:

Type scale chỉ cho bạn các con số cỡ chữ. Nhưng một cỡ chữ trần trụi thì chưa dùng được. Để trở thành type system, mỗi style cần thêm các thuộc tính khác:

Font size — cỡ chữ (lấy từ scale).
Line height — chiều cao dòng, quyết định khoảng thở giữa các dòng.
Font weight — độ đậm (Regular 400, Medium 500, Semibold 600, Bold 700...).
Letter spacing (tracking) — khoảng cách giữa các ký tự.
Vai trò (role) và tên — ví dụ "Heading 1", "Body", "Caption", "Overline".

Một type system tốt là khi bạn gom các cỡ chữ + thuộc tính này thành các style được đặt tên theo chức năng, không phải theo cỡ. Bạn đặt tên "Body/Large" chứ không phải "16px", vì cỡ có thể đổi nhưng vai trò thì giữ nguyên.

Line height — người bạn bị lãng quên

Rất nhiều bạn junior chăm chút cỡ chữ nhưng để mặc line height ở giá trị mặc định. Đây là lỗi lớn. Quy tắc thực dụng:

Body text: line height khoảng 1.5 – 1.6 lần cỡ chữ. Chữ 16px thì line height 24–26px. Đủ khoảng thở để đọc đoạn dài không mỏi mắt.
Heading lớn: line height chặt hơn, khoảng 1.1 – 1.25. Chữ tiêu đề 40px không cần dãn dòng 60px — trông sẽ rời rạc.
Quy luật chung: cỡ chữ càng lớn thì line height (tính theo tỷ lệ) càng nhỏ.

Riêng với tiếng Việt, đây là điểm cực kỳ đáng lưu ý: chữ Việt có nhiều dấu thanh và dấu phụ chồng lên nhau (ví dụ "ệ", "ướ", "ỗ"). Nếu line height quá chặt, dấu của dòng dưới sẽ chạm vào chân chữ dòng trên, gây rối. Vì vậy với nội dung tiếng Việt, hãy cộng thêm khoảng 0.1 vào line height so với thiết kế gốc tiếng Anh — body 1.5 nên đẩy lên 1.6.

Số bậc vừa đủ

Một type system gọn gàng thường chỉ cần 5 đến 8 bậc chữ: ví dụ Display, H1, H2, H3, Body Large, Body, Caption, Overline. Nhiều bạn mắc bệnh tạo 15–20 style vì "phòng khi cần". Càng nhiều bậc, team càng khó chọn đúng, và ranh giới giữa các bậc càng mờ. Ít mà rõ luôn tốt hơn nhiều mà mơ hồ.

Tình huống thực tế

Ví dụ 1 — Dashboard fintech của một startup Việt Nam

Một startup fintech ở TP.HCM (gọi là "MoniPay") xây dashboard cho doanh nghiệp theo dõi dòng tiền. Bản đầu tiên, designer dùng Golden ratio (1.618) với base 16px, ra scale: 16, 26, 42, 68px. Trên màn hình dashboard đầy bảng số liệu, tiêu đề "Tổng quan dòng tiền" ở cỡ 42px chiếm gần nửa chiều cao khu vực đầu trang, đẩy các con số quan trọng xuống dưới nếp gấp màn hình.

Sau khi review, team chuyển sang Minor third (1.2) với base 14px (dashboard nên dùng base nhỏ hơn marketing một chút): 14, 17, 20, 24, 29px. Tiêu đề lớn nhất giờ chỉ 29px — vẫn nổi bật nhưng không lấn át. Mật độ thông tin trên một màn hình tăng đáng kể, người dùng thấy được nhiều dòng dữ liệu hơn mà không phải cuộn.

Bài học: ratio phải phục vụ loại sản phẩm. UI dày đặc dữ liệu cần ratio nhỏ và base nhỏ. Đừng bê nguyên scale của landing page vào dashboard.

Ví dụ 2 — Sàn thương mại điện tử và cái bẫy "cỡ tùy hứng"

Một team làm sàn TMĐT (tương tự Tiki, Shopee) có 4 designer làm song song các trang: trang chủ, trang sản phẩm, giỏ hàng, trang thanh toán. Không có type system chung. Mỗi người tự chọn cỡ chữ. Khi ghép lại, giá sản phẩm ở trang chủ là 18px Bold, nhưng cùng giá đó ở trang giỏ hàng lại là 16px Semibold, còn ở trang thanh toán là 20px Medium.

Người dùng không nhận ra bằng lời, nhưng cảm giác "thiếu chuyên nghiệp, không đáng tin" xuất hiện — điều tối kỵ với một trang liên quan đến tiền bạc. Dev thì khổ sở vì mỗi trang một kiểu, không tái sử dụng được component.

Team giải quyết bằng cách ngồi lại xây một type scale chung (Major third 1.25, base 16px) và định nghĩa các style theo vai trò: "Price/Primary" = 20px Bold, "Price/Secondary" = 16px Medium, dùng thống nhất trên mọi trang. Chỉ một buổi chiều, nhưng sự nhất quán tăng vọt và tốc độ dựng trang các sprint sau nhanh hơn hẳn.

Bài học: type system không chỉ giải quyết vấn đề thẩm mỹ mà còn là vấn đề vận hành team và niềm tin của người dùng. Đặt tên theo vai trò (Price/Primary) chứ không theo cỡ (20px).

Ví dụ 3 — Ứng dụng đọc tin tức và bài toán line height tiếng Việt

Một app đọc báo tiếng Việt lấy cảm hứng design từ Medium (vốn tối ưu cho tiếng Anh). Họ copy nguyên thông số: body 18px, line height 1.4. Trên tiếng Anh trông thoáng, nhưng khi đổ nội dung tiếng Việt vào — những từ như "nghiên cứu", "phường", "thưởng thức" với đầy dấu — các dòng chữ nhìn chật chội, dấu nặng của dòng dưới gần chạm chân chữ dòng trên.

QA phản hồi "đọc mỏi mắt". Designer chỉ cần chỉnh line height từ 1.4 lên 1.6 cho body, và tăng nhẹ letter spacing về 0. Ngay lập tức đoạn văn "thở" ra, cảm giác đọc dễ chịu hẳn. Không đổi cỡ chữ, không đổi font, chỉ đổi khoảng cách dòng.

Bài học: thông số typography của phương Tây không thể bê nguyên cho tiếng Việt. Dấu thanh của chúng ta cần thêm không gian dọc. Luôn test type system bằng nội dung tiếng Việt thật, không dùng "Lorem ipsum".

Hướng dẫn từng bước

Đây là quy trình xây một type scale và type system từ đầu:

Xác định loại sản phẩm và base size. Marketing/editorial: base 16–18px. Web app thông thường: base 16px. Dashboard/admin dày dữ liệu: base 14px. Base chính là cỡ body text bạn muốn người dùng đọc thoải mái.

Chọn ratio. Dày dữ liệu → 1.2 (Minor third). Web app cân bằng → 1.25 (Major third). Landing/thương hiệu → 1.333 hoặc 1.618. Nếu phân vân, chọn 1.25 — hiếm khi sai.

Sinh scale. Nhân base với ratio để đi lên (thường 4–5 bậc là đủ), chia để đi xuống (1–2 bậc cho caption/label). Có thể dùng công cụ như typescale.com để tự động tính và xem preview.

Làm tròn thông minh. Kết quả toán học ra số lẻ (25.6, 31.25...). Làm tròn về số nguyên, và ưu tiên số chẵn hoặc bội số của 2/4 để khớp với spacing system (bạn sẽ học ở bài về spacing). Ví dụ 31.25 → 32.

Gán line height cho từng bậc. Body và cỡ nhỏ: 1.5–1.6. Heading vừa: 1.3. Heading lớn/display: 1.1–1.2. Với tiếng Việt, cộng thêm ~0.1.

Gán font weight cho từng vai trò. Ví dụ: Display/H1 dùng Bold hoặc Semibold, Body dùng Regular, Caption/Overline dùng Medium. Đừng để mọi thứ cùng một weight — weight cũng là công cụ tạo phân cấp.

Đặt tên theo vai trò và gom thành style. Ví dụ: Display, Heading/1, Heading/2, Heading/3, Body/Large, Body/Base, Caption, Overline. Mỗi tên gói trọn size + line height + weight + letter spacing.

Lập bảng tài liệu. Ghi rõ: tên style → cỡ / line height / weight → dùng ở đâu ("Heading/2 dùng cho tiêu đề section, không dùng cho label"). Bảng này là hợp đồng giữa design và dev.

Lỗi thường gặp & mẹo

Chọn cỡ chữ tùy hứng, không theo scale. Đây là lỗi gốc rễ. Cứ mỗi khi định gõ một con số cỡ chữ mới, hãy tự hỏi "con số này có nằm trong scale không?". Nếu không, đừng dùng.

Bỏ quên line height. Chỉ set font size mà để line height mặc định là dấu hiệu của người mới. Line height quyết định độ dễ đọc ngang ngửa font size.

Tạo quá nhiều bậc. 15 style chữ khiến team tê liệt vì không biết chọn cỡ nào. Giới hạn 5–8 bậc. Nếu thấy hai bậc gần nhau quá và ai cũng lúng túng, gộp lại.

Đặt tên theo cỡ thay vì vai trò. Style tên "18px" sẽ thành thảm họa ngày bạn quyết định đổi nó thành 17px — cái tên trở nên dối trá. Đặt "Body/Large" để tên độc lập với giá trị.

Dùng ratio quá lớn cho app dày dữ liệu. Golden ratio đẹp trên landing page nhưng phá vỡ dashboard.

Test bằng Lorem ipsum. Luôn đổ nội dung tiếng Việt thật để phát hiện vấn đề dấu thanh và độ dài từ.

Mẹo — dùng đơn vị tương đối khi bàn giao web. Khi làm việc với dev web, khuyến khích họ dùng rem cho cỡ chữ (1rem = base = 16px). Nhờ đó khi người dùng chỉnh cỡ chữ mặc định của trình duyệt (accessibility), toàn bộ scale co giãn theo tỷ lệ — điều mà px cứng không làm được.

Mẹo — giới hạn font weight. Chỉ cần 2–3 weight (ví dụ Regular, Medium, Bold) là đủ cho hầu hết sản phẩm. Nhiều weight làm nặng file font và loãng phân cấp.

Bài tập thực hành

Sinh scale. Chọn một trong hai bối cảnh: (a) một trang blog cá nhân, hoặc (b) một admin dashboard. Với mỗi bối cảnh, chọn base size và ratio phù hợp, rồi tự tay tính ra 6 bậc chữ (4 lên, 1 base, 1 xuống). Làm tròn các số về số nguyên/số chẵn hợp lý.

Hoàn thiện thành type system. Với scale vừa tạo, lập một bảng gồm 6 dòng, mỗi dòng có: Tên vai trò · Font size · Line height · Font weight · Ghi chú dùng ở đâu. Nhớ áp dụng quy tắc line height (nhỏ cho heading, lớn cho body, cộng 0.1 cho tiếng Việt).

Kiểm chứng bằng tiếng Việt. Viết một đoạn văn tiếng Việt thật khoảng 4 dòng, áp style "Body/Base" của bạn vào (có thể mô phỏng trong bất kỳ công cụ nào). Thử line height 1.4 rồi 1.6, quan sát sự khác biệt về khoảng cách dấu thanh và ghi lại nhận xét.

Phản biện. Tìm một app hoặc website Việt Nam bạn hay dùng, đoán xem họ dùng khoảng bao nhiêu bậc chữ và ratio nào (lớn hay nhỏ). Chỉ ra một chỗ typography mà bạn nghĩ chưa nhất quán, và đề xuất cách sửa theo type system.

Tóm tắt

Type scale là tập cỡ chữ được sinh ra từ một ratio cố định (modular scale), không phải chọn tùy hứng. Ratio nhỏ (1.2) cho UI dày dữ liệu; ratio lớn (1.333–1.618) cho landing/thương hiệu; 1.25 là mặc định an toàn.
Base size là cỡ body: 16px cho web app, 14px cho dashboard, 16–18px cho editorial.
Type system = type scale + line height + font weight + letter spacing, gom thành các style đặt tên theo vai trò (Body/Large) chứ không theo cỡ.
Line height quan trọng ngang font size: 1.5–1.6 cho body, 1.1–1.25 cho heading lớn; với tiếng Việt cộng thêm ~0.1 vì dấu thanh cần không gian.
Giữ hệ thống gọn: 5–8 bậc chữ, 2–3 font weight. Ít mà rõ hơn nhiều mà mơ hồ.
Luôn test bằng nội dung tiếng Việt thật, và lập bảng tài liệu làm hợp đồng giữa design và dev.

Nắm chắc nền tảng này, bạn đã sẵn sàng để ở các bài sau dựng chính type system này thành text styles và variables trong Figma, nơi mọi con số bạn vừa tính sẽ trở thành tài sản tái sử dụng cho cả team.