Typography là xương sống của web: quyết định khả năng đọc, giọng thương hiệu, độ tin cậy và thậm chí cảm nhận về tốc độ. Một hệ thống chữ tốt cần chọn font, ghép cặp, tỉ lệ, nhịp, hiệu năng, accessibility, bản địa hóa và quy trình quản trị để mọi trang đều nhất quán. Playbook này đưa ra kế hoạch trọn vẹn để xây dựng typography chuyên nghiệp cho cả tiếng Việt và đa ngôn ngữ.
1. Mục Tiêu Và Nguyên Tắc
Xác định mục tiêu: ưu tiên rõ ràng cho site nội dung, cảm xúc cho brand, tập trung chuyển đổi cho landing, trung tính cho app phức tạp. Dựa trên: dễ đọc (cỡ, tương phản, khoảng cách), phân cấp (cấp độ rõ, nhịp ổn định), nhất quán (token/quy tắc), accessibility (WCAG, thân thiện dyslexia), hiệu năng (tải nhanh, ít layout shift).
2. Chiến Lược Chọn Font
Serif vs sans: serif mang cảm giác biên tập/cổ điển; sans hiện đại/trung tính. Ghép một font body “lính thợ” với một font display nhấn; hiếm khi cần hơn hai họ. Kiểm tra độ legible ở cỡ nhỏ trên Windows/Android nơi render khó.
Giấy phép & hosting: nếu ngân sách hạn chế, dùng web-safe hoặc Google/Adobe Fonts; nếu tự host, đảm bảo license cho pageview. Ưu tiên WOFF2 + WOFF fallback, subset bộ ký tự.
Hỗ trợ tiếng Việt: kiểm tra đầy đủ dấu (ă â đ ê ô ơ ư và dấu thanh). Test nhiều weight để tránh lệch dấu. Chuẩn bị fallback stack an toàn cho tiếng Việt.
Variable font: một file bao nhiều weight/width/italic/optical size, giảm request và linh hoạt hơn; cẩn trọng kích thước file, subset trục cần thiết.
3. Ghép Cặp Và Vai Trò
Xác định vai: display (H1/H2), body, UI, monospace cho code, accent nhỏ. Ghép theo tương phản, không xung đột: ví dụ sans hình học + sans/serif humanist. Giữ x-height và nhịp tương thích để spacing ổn định. Tài liệu hóa cặp font kèm ví dụ.
4. Tỉ Lệ Và Nhịp
Dùng modular scale và nhất quán. Tỉ lệ 1.125 cho UI dày, 1.25–1.333 cho marketing. Dùng clamp() cho cỡ fluid. Chiều dài dòng 45–75 ký tự, line-height ~1.5, spacing đoạn/hàng hợp lý. Bám grid 4/8px cho nhịp dọc, margin heading/body ổn định, tránh dòng mồ côi.
5. Phân Cấp Và Bố Cục
H1 nêu mục đích, H2 cho phần, H3 cho mục nhỏ; không nhảy cấp. Cỡ/weight nhất quán giữa template. Có biến thể S/M/L cho card, bảng, dashboard, bài viết. Giới hạn chiều rộng đoạn để đọc tốt trên màn rộng.
6. Màu, Tương Phản, Theme
Đặt token màu chữ: primary, secondary, muted, disabled, link, inverse, success, warning, error. Đạt WCAG: 4.5:1 cho thân bài, 3:1 cho text lớn/control. Tránh đen tuyệt đối trên trắng tuyệt đối; chọn cặp mềm để giảm lóa. Dark mode: làm sáng text, focus ring tương phản. Không chỉ dùng màu; thêm icon/text cho trạng thái.
7. Accessibility
Dùng text thật, không hình. Giữ outline focus; target tối thiểu 44x44px. Zoom 200% không vỡ layout. Chọn font dễ phân biệt ký tự (I/l/1, 0/O). Tránh text-transform cho tiếng Việt; small caps dùng font-variant nếu hỗ trợ. Label thật cho form; placeholder không thay label. Hạn chế chuyển động với prefers-reduced-motion.
8. Kỹ Thuật Hiệu Năng
Tự host để kiểm soát cache và preload. Dùng WOFF2, subset Latin/Vietnamese/symbol riêng. font-display: swap hoặc optional tránh FOIT; class fallback để điều chỉnh FOUT. Preload font quan trọng; nén và phục vụ qua HTTP/2/3.
Giảm biến thể: regular, italic, medium/semibold, bold thường đủ. Variable font thay nhiều file. Dùng unicode-range để tải subset theo locale. Loại bỏ weight không dùng.
9. Pattern Tải Font
Chèn script nhỏ ở head thêm class khi loading và loaded. Dùng font metric override/font-size-adjust để giảm CLS giữa fallback và webfont.
10. Loại Nội Dung
Bài dài: line-height thoáng, body 17–19px, max-width 70ch, khoảng cách list/quote rộng, pull quote rõ. Có thể thêm progress bar.
Dashboard/bảng: scale chặt, số dùng tabular-lining, monospace cho code/ID, header đậm, hover row không giảm tương phản, ellipsis có tooltip.
Form/UI: label đồng nhất, helper nhỏ hơn nhưng ≥13px, lỗi tương phản cao + icon. Nút ngắn gọn, sentence case.
Code: monospace, highlight đạt tương phản, tránh neon.
11. Bản Địa Hóa
Font phải đặt dấu đúng; tránh font lệch thanh. Đa ngôn ngữ: set lang, đổi stack nếu script khác. Kiểm tra xuống dòng tiếng Việt; chỉnh word-break/line-break hợp lý. Hỗ trợ RTL bằng logical property.
12. Responsive Typesetting
Dùng clamp() cho heading linh hoạt. Scale chặt hơn trên mobile, thoáng hơn trên desktop. Test Android yếu, iOS, laptop Windows, màn DPI cao; tránh widow/orphan trên mobile.
13. Token Và Tài Liệu
Mã hóa token: family, weight, size, line-height, letter-spacing, màu, link, list, code, quote. Ví dụ Đúng/Sai: không căn giữa đoạn dài, không all-caps body, không dùng nhiều serif. Công bố trong design system kèm CSS variable và snippet React/Vue.
14. Quy Trình
Đưa tiêu chí typography vào Ready/Done. Handoff gồm phân cấp, spacing, rule responsive, link state, fallback stack. Code review chặn màu/cỡ ngoài token. QA kiểm zoom, tương phản, FOUT. Changelog khi đổi token/font, thông báo marketing/content.
15. Checklist Accessibility
- Tương phản đạt chuẩn mọi trạng thái.
- Focus rõ trên link/nút/form.
- Heading trật tự logic.
- Zoom 200% vẫn dùng được.
- font-display swap/optional, CLS thấp.
- Dấu tiếng Việt hiển thị đúng.
- Screen reader đọc đúng, link có nghĩa.
- Placeholder không thay label; lỗi/trợ giúp truy cập được.
16. Checklist Hiệu Năng
- WOFF2 chính, WOFF fallback.
- Unicode-range subset theo locale.
- Preload font quan trọng.
- font-display đặt; class fallback có.
- Variable font dùng hợp lý.
- Budget bundle theo dõi CI.
- Không weight thừa.
17. Thương Hiệu
Gán tính cách (đáng tin, táo bạo, thân thiện, kỹ thuật) vào lựa chọn chữ: humanist sans ấm áp, geometric sans hiện đại, serif/slab tạo uy tín. Đồng bộ logo nhưng không ép dùng một font cho mọi thứ. Dùng title/sentence case nhất quán.
18. Microcopy
Microcopy ngắn gọn, dễ đọc. Nút hành động, tránh all-caps body. Tooltip/helper nhỏ hơn nhưng rõ; giữ size tối thiểu. Tránh uppercase làm mất dấu; ưu tiên sentence case cho tiếng Việt.
19. Dark Mode & High Contrast
Kiểm tra typography ở dark mode: text sáng hơn, màu phụ tinh chỉnh, focus rõ. Kiểm tra high-contrast Windows. Tránh shadow nặng; dùng gạch chân/viền và focus mạnh.
20. In Ấn
Style print: nền trung tính, chữ đậm, hiển thị URL cho link, margin hợp lý, ẩn nav/điều khiển. Fallback sang font hệ thống nếu webfont không in được.
21. Công Thức Mẫu
Hero marketing: display 48–64px, body 18px, line-height 1.5, highlight bằng weight/màu, không gạch chân; dòng ~12–14 từ.
Blog: body 17–19px, max-width 70ch, list/quote thoáng, H2 28–32px, H3 22–24px, pull quote nổi bật.
Dashboard: body 14–16px, label 13–14px, heading vừa phải, số tabular, huy hiệu tương phản cao.
Mobile-first: body tối thiểu 16px, heading thu gọn, line-height/spacing đủ chạm; test cụm tiếng Việt dài trong nút.
22. Công Cụ
- Figma: plugin tương phản, scale, preview tiếng Việt.
- Dev: fontsource/google-webfonts-helper tự host; capsized/Font Metrics chỉnh fallback; Lighthouse/axe; fontmin/subsetter.
- CMS: bắt buộc alt, hạn chế font/màu tùy tiện, enforce heading order, style link tự động.
23. Số Liệu
Theo dõi: CLS từ font, LCP trang chữ, tỉ lệ pass tương phản, % component dùng token, dung lượng bundle theo route, ticket về khó đọc, tuân thủ biên tập trong CMS. Rà soát hàng quý và điều chỉnh scale/token nếu người dùng phản ánh mỏi mắt.
24. Kế Hoạch Di Trú
Audit font hiện tại. Chọn họ và token mục tiêu. Thay body toàn site, rồi heading, rồi UI. Xóa file font thừa. Test đa trình duyệt/thiết bị/locale. Thông báo SEO/content để tránh layout shift bất ngờ.
25. Hướng Dẫn Viết
Quy định: body sentence case, heading ngắn gọn, hạn chế jargon, giữ dấu rõ, tránh uppercase cho chuỗi dài. Nội địa hóa ví dụ code/UI; quy tắc cắt dòng tôn trọng từ tiếng Việt.
26. Đào Tạo & Rollout
Workshop cho designer/dev/content về vai trò, scale, tương phản, hiệu năng, lưu ý tiếng Việt. Cung cấp template khởi động cho marketing/blog/dashboard/form. Checklist typography trong PR. Rollout qua bản phát hành design system; thu thập feedback; chỉnh token nếu test người dùng mỏi mắt.
27. Case Study
Chọn trang mẫu (bài blog có hero, quote, ảnh, code). Đo baseline: readability, LCP/CLS, lỗi tương phản, phản hồi. Áp hệ chữ mới: đổi font, scale, tương phản, tối ưu tải. Đo lại, chia sẻ kết quả để chứng minh giá trị.
28. Chuẩn Bị Tương Lai
Theo dõi công nghệ render: COLRv1 cho icon sắc nét, CSS font-tech/font-palette, size-adjust. Cập nhật variable font, subset khi cần thêm glyph. Rà soát mỗi 6–12 tháng.
Typography web tốt nên “vô hình” vì mọi thứ đọc dễ, nhanh, chuẩn brand. Xây có kỷ luật, ghi chép, và mọi trang mới sẽ thừa hưởng chất lượng đó.
29. Kiểm Tra Riêng Cho Tiếng Việt
Kiểm dấu trên mọi weight/italic; đảm bảo móc và mũ rõ ở cỡ nhỏ. Tránh ép uppercase vì dấu bị chật. Test cụm từ dài trong nút/tab/breadcrumb. Với bảng, tránh cột hẹp làm gãy dấu; ưu tiên xuống dòng hoặc tooltip.
Lưu ý kerning/hinting trên Windows ClearType; font đẹp trên macOS có thể mờ trên Windows, luôn cross-test. Với heading kiểu biển hiệu, test dấu trên nền tối để tránh viền màu.
30. Ghép Cặp Nâng Cao
Phương án: sans humanist cho body + serif/slab nhấn cho heading; hoặc sans geometric (Inter) + humanist cho heading để tương phản nhẹ; hoặc dùng variable font đủ trục cho display/text. Ghi rõ weight dùng cho vai trò (body 400/500, heading 600/700).
31. Bảng, Số, Data Viz
Dùng tabular figure cho số; monospace khi cần canh thẳng hàng. Header đậm, tương phản cao; hover/focus có outline rõ. Biểu đồ: nhãn đọc được ở cỡ nhỏ, tránh hairline, legend rõ, palette đạt WCAG. SVG cần aria-label/desc; điểm focusable có nhãn.
32. Guardrail Cho Biên Tập
Trong CMS: ép thứ bậc heading, chặn override font thủ công, giới hạn palette token, auto style link. Strip style khi dán để tránh kiểu chữ “lạ”. Cung cấp block dựng sẵn cho callout, code, checklist, bảng với style chuẩn.
33. Giảm CLS Khi Load Font
Đo CLS từ font bằng RUM. Nếu cao, chọn fallback cùng metric, dùng font-size-adjust/size-adjust, hoặc load body trước display. Chỉ preload weight xuất hiện trên màn đầu; tránh preload quá nhiều.
34. Typography Dark Mode
Dùng cặp token text/muted/inverse. Làm dịu trắng thành off-white để giảm lóa. Tăng nhẹ letter-spacing cho label uppercase nhỏ trên nền tối. Giữ gạch chân link; tránh phân biệt chỉ bằng màu. Focus ring dùng viền sáng + halo nhẹ.
35. Giao Diện Mật Độ Cao
Cho console quản trị: body 13–15px, line-height ≥1.4, padding cột đủ để dấu không chạm nhau. Giảm icon, dựa vào chữ/spacing. Tắt text-transform cho filter/chip để dễ đọc.
36. Email Và PDF
Email thường bỏ webfont: đặt fallback chắc chắn, test auto-invert dark mode, tránh nền trong suốt + chữ trắng. PDF xuất từ HTML: font phải nhúng được và license hợp lệ; body 12–14px; tránh weight quá mảnh.
37. Mobile Và Chạm
Test trên Android tầm trung: render khác. Body ≥16px; label ≥13px; line-height đủ chỗ cho dấu. Tránh icon đè chữ trong chip/huy hiệu. Bàn phím ảo không che label; cuộn input vào tầm nhìn. Kiểm tra mode landscape cho nhãn dài.
38. SEO & Nội Dung
Chữ dễ đọc giảm bounce, tăng thời gian ở lại. Heading mô tả, đúng cấp; anchor có ý nghĩa. Ưu tiên render text (LCP), tránh ảnh hero chặn nội dung. Nội dung cấu trúc rõ giúp cả crawl lẫn accessibility.
39. Analytics & Phản Hồi
Thu thập survey về đọc dễ, theo dõi ticket chứa từ “font/đọc/nhỏ/mờ/tương phản”. A/B khi đổi scale/font, đo chuyển đổi và hoàn tất tác vụ. Dùng ghi hình hành vi có xin phép để xem cách người dùng scan.
40. Quản Trị & Kiểm Soát Thay Đổi
Ghi ADR cho quyết định chữ. Token tập trung, thay đổi cần review đa nhóm. Version token và thông báo. Script hỗ trợ migrate class/CSS var. Có kế hoạch rollback nếu font mới gặp lỗi.
41. Tài Liệu Đào Tạo
Soạn hướng dẫn ngắn: chọn heading, viết microcopy, yêu cầu glyph mới, style bảng, test tương phản. Thêm video hướng dẫn áp token trong code/Figma. Nêu bẫy tiếng Việt (uppercase, dấu, tách từ) và ví dụ.
42. Checklist Khởi Động Nhanh
1) Chọn body + display hỗ trợ tiếng Việt. 2) Định scale/token. 3) Host WOFF2, font-display swap/optional, preload cần thiết. 4) Dùng clamp() và grid spacing. 5) Đạt WCAG tương phản/focus. 6) Ghi rule vào design system. 7) Test Windows/Android/iOS + dark + zoom 200%. 8) Rollout qua phát hành design system, theo dõi CLS/LCP/feedback đọc.
43. Lợi Ích Kinh Doanh
Typography tốt giảm bounce, tăng chuyển đổi, cải thiện Core Web Vitals, giảm rủi ro pháp lý. Trình bày số liệu trước/sau để biện minh cho việc duy trì và chi phí license.
Làm đúng, chữ sẽ “vô hình”: người dùng chỉ việc đọc, tin và hành động.
Mỗi quý tổng kết: test thiết bị mới, chạy lại kiểm tra trợ năng, cập nhật template. Sự nhất quán lâu dài tạo niềm tin và giảm gánh nhận thức—typography là “hợp đồng” thầm lặng với người đọc.
Nếu cần mở rộng sang script khác (Thái, Nhật, Khmer), đánh giá font riêng và quy tắc xuống dòng đặc thù. Chuẩn bị fallback nhiều tầng để khi webfont lỗi, nội dung vẫn đọc được. Luôn đặt chất lượng đọc lên đầu: nếu người dùng phải căng mắt hoặc phóng to quá mức, hãy giảm bớt sự cầu kỳ và quay lại quy tắc cơ bản về cỡ, tương phản và nhịp.
44. Kiểm Thử Người Dùng
Tổ chức test nhanh với 5–8 người đọc khác nhau (tuổi, thiết bị, mức thị lực). Yêu cầu họ đọc đoạn dài, điền form, quét dashboard và phản hồi về dễ đọc, mỏi mắt, và độ nổi bật của thông tin. Ghi nhận nơi họ dừng lại, nhầm lẫn hoặc phải zoom. Điều chỉnh scale, khoảng cách, hoặc màu chữ dựa trên phản hồi thực tế.
45. Quy Tắc Áp Dụng Lại
Mọi tính năng mới phải dùng token typography mặc định trước; chỉ override khi có lý do mạnh và phải ghi lại. Chặn việc thêm font tự phát. Reviewer cần kiểm tra spacing và heading khi duyệt PR để ngăn lệch dần theo thời gian. Khi tổ chức chiến dịch marketing đặc biệt, tạo biến thể type trong phạm vi token để không phá vỡ hệ thống.
46. Kết Nối Với Design System
Đảm bảo mọi component (button, input, card, modal, alert, breadcrumb, tab, table, chart legend) đều lấy style chữ từ token. Khi token đổi, component cập nhật tự động. Thêm cờ kiểm tra trong Storybook để xem component dưới nhiều chế độ: dark, high contrast, zoom 200%, tiếng Việt dài, heading sâu nhiều cấp.
47. Thủ Thuật Thực Tế
- Tránh chữ quá mảnh dưới 400 ở kích thước nhỏ.
- Nếu dùng letter-spacing dương cho chữ in hoa, hãy giảm một chút ở heading lớn để tránh loang.
- Với list, tăng padding-left cho tiếng Việt chứa từ dài và dấu.
- Với breadcrumb, dùng ellipsis có tooltip để không gãy từ.
48. Thông Điệp Chốt
Một hệ thống typography tốt giúp người đọc hiểu nội dung nhanh hơn, đội ngũ ship nhanh hơn, và sản phẩm nhất quán hơn. Hãy đo lường, bảo trì, và đối xử với type như tài sản thiết kế cấp hạ tầng.
