Font chữ cho thiết kế web tiếng Việt nên được kiểm tra đủ dấu trước khi đưa vào giao diện. Chúng tôi thường bắt đầu với một họ chữ, hai độ đậm và thử ngay trên điện thoại. Chỉ thêm font khi nó phục vụ một vai trò rõ ràng.
Trả lời thẳng: chọn font chữ cho thiết kế web đủ dấu, tải gọn
Trên Google Fonts, tìm bộ ký tự Vietnamese, rồi thử cả chữ thường lẫn chữ hoa. Đừng chỉ nhìn câu tiếng Anh trong bản xem trước. Một tiêu đề có chữ “Ước”, “Nguyễn” hoặc “Đặng” sẽ cho bạn thông tin hữu ích hơn.
Hai họ font và ba đến bốn độ đậm là giới hạn tham khảo, không phải điều kiện bắt buộc. Website ít thành phần có thể chỉ cần một họ với độ đậm 400 và 600.
Preload là cách yêu cầu trình duyệt tải sớm tài nguyên. Chỉ nên dùng cho tệp chữ thật sự cần ở phần đầu trang. Tải sớm mọi biến thể có thể tranh băng thông với ảnh và nội dung chính.
Font web khác font in ở đâu và vì sao nhiều font đẹp bị mất dấu tiếng Việt
Font dùng trên web được trình duyệt tải và hiển thị cùng trang. WOFF2 là định dạng thường dùng để phân phối font web nhờ khả năng nén. Một tệp cài được trên máy chưa chắc là lựa chọn thích hợp để gửi cho mọi khách truy cập.
Mất dấu có thể do họ chữ thiếu ký tự, hoặc bản rút gọn đã bỏ phần tiếng Việt. Trình duyệt có thể lấy ký tự thiếu từ font dự phòng. Vì vậy, cùng một từ đôi khi trông như có hai nét chữ.
Google Fonts cung cấp thư viện font nguồn mở cùng cách tích hợp. Bạn vẫn cần chọn đúng họ, biến thể và kiểm tra giấy phép đi kèm khi phân phối tệp.
Đừng đánh giá bằng máy đã cài sẵn font. Hãy thử trên thiết bị khác hoặc môi trường sạch. Font có sẵn trong máy có thể che một lỗi tải tệp của website.
Tiêu chí chọn hệ font cho web tiếng Việt: đủ dấu, dễ đọc màn hình nhỏ, dung lượng
Chuẩn bị đoạn mẫu có “ă, â, ê, ô, ơ, ư, đ” và các dấu thanh. Thử thêm chữ hoa, số tiền và ký hiệu mà website dùng. Nội dung do người dùng nhập có thể chứa ký tự tổ hợp, nên đừng chỉ thử một tiêu đề soạn sẵn.
Tiếp đó, xem đoạn dài ở kích thước hiển thị thật. Những nét thanh nhìn đẹp trên màn hình lớn có thể khó đọc khi thu nhỏ. Kiểm tra cả nền sáng, nền tối và trạng thái nút bấm.
Với bảng giá, hãy xem cách các chữ số đứng cạnh nhau. Bài về chọn font chữ số có thể giúp bạn cân nhắc phần này. Đừng chọn chữ số đẹp riêng lẻ rồi bỏ qua tính dễ đọc của cả dòng giá.
Dung lượng cần đo từ những tệp trình duyệt thực sự tải. Một font biến thiên gộp nhiều độ đậm có thể tiện hơn nhiều tệp riêng. Tuy nhiên, nó không mặc nhiên nhẹ hơn nếu trang chỉ dùng một độ đậm.
Bảng 10 Google Fonts hỗ trợ tiếng Việt: dáng chữ, độ đậm, dung lượng và loại site
Danh sách dưới đây để thử, không phải xếp hạng tuyệt đối. Độ đậm ghi hai mức đề xuất cho cấu hình ban đầu, không phải toàn bộ mức mà từng họ hỗ trợ.
- Be Vietnam Pro — Không chân; thử giao diện và nội dung tiếng Việt trước tiên. Độ đậm chọn tải: 400, 600. Đo hai mức cùng bộ Vietnamese cần dùng.
- Inter — Không chân, hợp giao diện có nhiều nhãn và nút. Độ đậm chọn tải: 400, 600. So sánh gói biến thiên với các tệp riêng.
- Roboto — Không chân; lựa chọn để thử cho trang nhiều thành phần. Độ đậm chọn tải: 400, 600. Không tải thêm italic nếu trang chưa dùng.
- Open Sans — Không chân, nên thử ở đoạn giải thích dài. Độ đậm chọn tải: 400, 600. Kiểm tra đúng tệp được gửi cho trình duyệt.
- Noto Sans — Phù hợp để cân nhắc khi nội dung có nhiều ngôn ngữ. Độ đậm chọn tải: 400, 600. Chỉ lấy các bộ ký tự phục vụ nội dung thực tế.
- Noto Serif — Có chân; thử bài đọc hoặc tiêu đề mang nét biên tập. Độ đậm chọn tải: 400, 600. So sánh tổng tải khi ghép thêm họ không chân.
- Nunito Sans — Nét mềm; xem thử trên trang dịch vụ hoặc học tập. Độ đậm chọn tải: 400, 600. Đo cấu hình dùng thật, không lấy dung lượng ZIP.
- Roboto Slab — Chân chữ rõ; có thể dùng làm điểm nhấn tiêu đề. Độ đậm chọn tải: 400, 600. Nếu chỉ dùng tiêu đề, cân nhắc giữ một độ đậm.
- Source Sans 3 — Không chân; thử nội dung hướng dẫn và giao diện. Độ đậm chọn tải: 400, 600. Kiểm tra bộ ký tự trong gói đã chọn.
- Source Serif 4 — Có chân; thử trang tạp chí và bài đọc dài. Độ đậm chọn tải: 400, 600. Tính thêm italic khi thực sự sử dụng.
Chúng tôi không ghi một số KB cố định cho mỗi họ. Kết quả đổi theo định dạng, bộ ký tự và biến thể. Muốn so sánh công bằng, mở mục Network trong công cụ trình duyệt, tắt bộ nhớ đệm và tải lại cùng một trang mẫu.
Ghép font tiêu đề và thân bài: ví dụ cho web bán hàng, tin tức, doanh nghiệp
Web bán hàng có thể thử Inter cho cả tiêu đề lẫn mô tả. Dùng các độ đậm và kích thước khác nhau trước khi thêm họ thứ hai. Một trang sản phẩm vốn có nhiều giá, nhãn và nút sẽ dễ rối nếu mỗi phần mang một nét chữ.
Với trang tin, thử Source Serif 4 cho tiêu đề và Source Sans 3 cho phần giao diện. Đoạn bài dài cần xem riêng trên điện thoại; cặp tên cùng “Source” chưa đủ bảo đảm bố cục hợp lý.
Website doanh nghiệp có thể bắt đầu với Be Vietnam Pro. Nếu logo dùng chữ trang trí, không cần kéo nét ấy sang toàn bộ nội dung. Cách chọn font cho logo phục vụ dấu hiệu nhận diện, khác việc đọc một trang dịch vụ dài.
Hãy so sánh hai bản cùng nội dung, cùng chiều rộng. Bạn sẽ nhận ra khác biệt về số dòng và nhịp đọc, thay vì chọn theo cảm giác từ một từ mẫu.
Nhúng font không làm chậm trang: subset, font-display, tự host
Subset là tệp chỉ chứa một phần bộ ký tự. Với tiếng Việt, cần giữ đủ ký tự dùng trong nội dung, kể cả dấu tổ hợp nếu có. Đừng lấy gói Latin tối giản rồi cho rằng mọi dấu tiếng Việt đều nằm trong đó.
font-display điều khiển cách trình duyệt xử lý chữ trong lúc chờ font. Giá trị swap cho phép hiện font dự phòng rồi đổi sang font tải về. Nội dung xuất hiện sớm hơn, nhưng kích thước chữ khác nhau có thể làm bố cục dịch chuyển.
Theo hướng dẫn tối ưu font web, preload cần dùng có chọn lọc. Khi preload tệp font, thuộc tính crossorigin vẫn cần được thiết lập phù hợp, kể cả trường hợp tự host.
Tự host nghĩa là phục vụ tệp từ hạ tầng bạn quản lý. Bạn chủ động quản lý tên tệp, bộ nhớ đệm và bản cập nhật. Đổi lại, phải theo dõi lỗi tải và giấy phép thay vì chỉ dán một liên kết dịch vụ.
Lỗi hay gặp: chữ nhảy khi tải, mất dấu ở tiêu đề, font khác nhau giữa máy
Nếu nút bấm đổi chiều rộng sau khi tải, xem font dự phòng có khác nhiều về kích thước ký tự không. Thử giảm số biến thể và chỉ tải sớm tệp thật sự cần. Đừng che cả trang chờ font chỉ để tránh thấy sự thay đổi.
Nếu riêng tiêu đề mất dấu, kiểm tra tệp độ đậm dùng cho tiêu đề. Thân bài hiển thị đúng không chứng minh mọi biến thể đều đủ ký tự. Kiểm tra thêm lỗi đường dẫn và phản hồi tải trong Network.
Hai hệ điều hành có thể hiển thị nét chữ hơi khác do cách dựng chữ. Hãy phân biệt sự khác biệt nhỏ đó với việc một máy đang dùng hoàn toàn font dự phòng.
Font trả phí có đáng không và khi nào nên tự host
Font trả phí đáng cân nhắc khi hình dáng, phạm vi ký tự hoặc yêu cầu thương hiệu giải quyết được nhu cầu cụ thể. Giá cao không tự làm website dễ đọc hơn.
Đọc giấy phép web của đúng sản phẩm: phạm vi sử dụng, giới hạn và quyền phân phối tệp. Giấy phép dùng trên máy tính không mặc nhiên bao gồm việc nhúng lên website.
Khi xem các font dành cho thiết kế đồ họa, hãy coi đó là bước tìm hình dáng. Sau khi chọn được ứng viên, vẫn cần kiểm tra quyền dùng web và thử nội dung tiếng Việt thực tế.
Câu hỏi thường gặp
Nên dùng bao nhiêu font trên một website?
Bắt đầu với một họ. Nếu cần phân biệt rõ tiêu đề và bài đọc, thử thêm họ thứ hai. Mỗi lựa chọn mới nên có vai trò; không cần thêm chỉ để trang trông nhiều kiểu.
Roboto và Inter, font nào hợp tiếng Việt hơn?
Cả hai là ứng viên để thử. So sánh cùng đoạn tiếng Việt ở kích thước thật, đặc biệt các dấu và chữ số. Họ phù hợp là họ đọc rõ trong bố cục của bạn, không phải tên được nhắc nhiều hơn.
Font Việt hóa có dùng cho web được không?
Cần kiểm tra giấy phép của font gốc và quyền sửa, phân phối bản Việt hóa. Sau đó kiểm tra tệp web và bộ ký tự. Có thêm dấu không đồng nghĩa được phép nhúng miễn phí.
Nhúng Google Fonts có ảnh hưởng điểm PageSpeed không?
Có thể ảnh hưởng thời điểm hiện chữ và tải tài nguyên. Mức ảnh hưởng phụ thuộc vào cấu hình và trang thực tế. Đo trước và sau trên cùng điều kiện, thay vì kết luận chỉ từ tên dịch vụ.
Bộ CSS mẫu để dán vào website
Mẫu dưới dùng hai tệp WOFF2 có đủ tiếng Việt, độ đậm 400 và 600. Bạn phải tải tệp được phép sử dụng lên website và thay đường dẫn minh họa. Dán từng đoạn vào tệp CSS của giao diện.
@font-face { font-family: ‘WebVietnamese’; src: url(‘/fonts/vietnamese-400.woff2’) format(‘woff2’); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: ‘WebVietnamese’; src: url(‘/fonts/vietnamese-600.woff2’) format(‘woff2’); font-style: normal; font-weight: 600; font-display: swap; }
body { font-family: ‘WebVietnamese’, Arial, sans-serif; font-weight: 400; line-height: 1.6; } h1, h2, h3, strong { font-weight: 600; }
Tên WebVietnamese là tên nội bộ bạn đặt trong CSS, không phải tên một font để tải. Nếu cần chữ nghiêng, bổ sung biến thể phù hợp. Sau khi áp dụng, mở một bài dài trên điện thoại và kiểm tra Network trước khi đưa lên toàn site.