Font và icon: cho giao diện một tiếng nói riêng
Bài này nối tiếp chữa bệnh "UI phèn". Ở đó bạn học cách tránh những mẫu giao diện generic; bài này đi sâu vào hai thứ quyết định "chất" của giao diện nhiều hơn người ta tưởng: font chữ và icon. Học xong bạn sẽ biết cách chọn font miễn phí có hỗ trợ tiếng Việt, cài font riêng vào dự án (ba cách, kèm ưu nhược), và dùng kho icon thiết kế thay cho emoji - cùng cách nói để AI làm đúng những việc này.
Vì sao font là thứ đầu tiên lộ ra "phèn"
Đổi đúng một font, cả trang đổi khí chất. Ngược lại, để nguyên font mặc định của framework (thường là một font sans-serif hệ thống nhàn nhạt) là một trong những dấu hiệu "code AI ra" rõ nhất - vì đó chính là lựa chọn mặc định khi không ai nói cho AI biết khẩu vị.
Font không chỉ để "đọc được". Nó mang cảm xúc: một tiệm bánh và một dashboard tài chính cần hai giọng chữ hoàn toàn khác nhau.
Bốn nhóm font, dùng vào việc gì
Nguyên tắc vàng: một trang chỉ nên có 1-2 font. Thường là một font cho tiêu đề (có thể cá tính) và một font cho nội dung (ưu tiên dễ đọc). Ba font trở lên là bắt đầu loạn.
Cạm bẫy số 1 với người Việt: dấu tiếng Việt
Đây là điều tài liệu nước ngoài không nhắc, nhưng làm sản phẩm tiếng Việt thì phải nhớ: rất nhiều font đẹp không có đủ dấu tiếng Việt. Chữ ữ, ợ, ẩ, ỉ... sẽ hiện sai, lệch, hoặc nhảy sang font khác nhìn rất chắp vá.
Luôn kiểm tra font có hỗ trợ Vietnamese trước khi chọn. Cách thử nhanh: gõ thử câu "Tự học lập trình để giải quyết vấn đề của chính mình" bằng font đó, soi kỹ các chữ có dấu chồng (ữ, ượ, ẳ).
Nguồn font miễn phí, dùng được cho cả sản phẩm thương mại
| Nguồn | Điểm mạnh | Lưu ý |
|---|---|---|
| Google Fonts | Kho lớn nhất, lọc được "Vietnamese", miễn phí cả thương mại | Dùng qua CDN của Google sẽ gửi IP người dùng về Google (vấn đề riêng tư/GDPR) - xem cách tự host bên dưới |
| Fontshare | Font chất lượng cao của Indian Type Foundry, miễn phí | Kiểm tra kỹ dấu tiếng Việt từng font |
| Bunny Fonts | "Google Fonts phiên bản tôn trọng riêng tư" - cùng kho, không theo dõi | Thay thẳng link Google Fonts bằng link Bunny |
| Fontsource | Đóng gói sẵn để tự host qua npm, tiện cho dự án React/Next | Cài bằng lệnh, không cần tải file tay |
Font tiếng Việt được ưa dùng: Inter, Be Vietnam Pro, Nunito Sans, Lora, Merriweather (đều có trên Google Fonts, đủ dấu). Be Vietnam Pro do người Việt thiết kế, dấu rất chuẩn.
Ba cách cài font vào dự án
Cách 1 - Nhúng qua <link> (nhanh nhất, cho người mới)
Vào Google Fonts (hoặc Bunny Fonts), chọn font + độ đậm cần, copy đoạn <link> vào phần <head>:
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=be-vietnam-pro:400,600,700" rel="stylesheet">- Dùng
fonts.bunny.netthayfonts.googleapis.comđể không lộ IP người dùng cho Google. 400,600,700= ba độ đậm (thường, đậm vừa, đậm). Chỉ lấy độ đậm bạn thật sự dùng - mỗi độ đậm là một file phải tải thêm.
Rồi khai báo trong CSS:
body { font-family: "Be Vietnam Pro", system-ui, sans-serif; }system-ui, sans-serifở cuối là font dự phòng: nếu font chính chưa tải xong, trình duyệt dùng tạm font hệ thống thay vì để trang trắng chữ.
Cách 2 - Tự host qua Fontsource (tốt cho React/Next.js)
Tự host = file font nằm trên máy chủ của bạn, không phụ thuộc bên thứ ba, nhanh và riêng tư hơn:
npm install @fontsource/be-vietnam-proRồi import ở file khởi động ứng dụng:
import "@fontsource/be-vietnam-pro/400.css";
import "@fontsource/be-vietnam-pro/700.css";- Mỗi dòng import một độ đậm - lại nhắc: chỉ lấy cái cần dùng.
Cách 3 - @font-face thủ công (khi có file font riêng)
Khi bạn mua/được cấp một file font (.woff2), tự khai báo:
@font-face {
font-family: "Tên Font Của Tôi";
src: url("/fonts/ten-font.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}- Ưu tiên định dạng
.woff2- nhẹ nhất, mọi trình duyệt hiện đại đều hiểu. font-display: swap- hiện font dự phòng trước, đổi sang font chính khi tải xong (tránh chữ vô hình lúc đầu).
Nếu dự án dùng Next.js, có sẵn
next/fonttự tối ưu và tự host font giúp bạn - hỏi AI: "dùng next/font để nạp Be Vietnam Pro cho dự án này".
Icon: bỏ emoji, dùng icon thiết kế
Nhớ dấu hiệu "UI phèn": dùng emoji 🚀 ✨ 💡 thay icon thiết kế. Emoji nhanh nhưng mỗi hệ máy hiển thị một kiểu, không đồng bộ nét, không đổi được màu theo giao diện. So sánh:
Kho icon miễn phí đáng dùng
Gần như tất cả đều giấy phép MIT hoặc tương đương (dùng thoải mái cả thương mại), nét đồng bộ trong cùng một bộ:
| Kho | Phong cách |
|---|---|
| Lucide | Nét mảnh, sạch, rất phổ biến với dự án web hiện đại (chính là bộ dùng trong ví dụ trên) |
| Heroicons | Của đội Tailwind CSS, có bản nét và bản đặc |
| Phosphor | Kho khổng lồ, nhiều độ đậm |
| Tabler Icons | Hơn 5000 icon, đồng bộ tốt |
| Material Symbols | Của Google, kho rất rộng |
Ba cách dùng icon
- Copy thẳng SVG - vào trang icon, bấm copy, dán đoạn
<svg>...</svg>vào code. Đơn giản nhất, không cần cài gì. Đổi màu bằng thuộc tínhstrokehoặcfill. - Thư viện component - ví dụ
npm install lucide-react, rồi dùng như<Rocket />. Tiện cho React, chỉ đóng gói đúng icon bạn dùng. - Iconify - một cổng gom hầu hết mọi kho icon, gọi icon nào cũng được qua một cú pháp chung.
Nói với AI thế nào cho đúng
Font và icon là "khẩu vị" - phải khai báo, đừng để AI tự đoán. Ghi thẳng vào CLAUDE.md:
## Font & Icon
- Font tiêu đề: Be Vietnam Pro (đậm 700)
- Font nội dung: Inter (thường 400)
- Tự host qua Fontsource, KHÔNG nhúng Google Fonts CDN (lý do riêng tư)
- Icon: dùng bộ Lucide, KHÔNG dùng emoji làm iconMuốn diễn đạt chính xác hơn nữa - "canh icon thẳng hàng với chữ", "giảm độ đậm nét icon" - thì cần đúng thuật ngữ, đó là nội dung bài kế tiếp.
Bước tiếp theo
Bạn để ý chưa: xuyên suốt hai bài về giao diện, sức mạnh nằm ở chỗ nói đúng từ - "refactor", "polish", "canh lề". Bài cuối phần này gom lại bộ thuật ngữ đó: Nói đúng thuật ngữ khi làm việc với AI